نمایش عکس در فلاتر Flutter به دو روش آفلاین و آنلاین

نمایش عکس در فلاتر Flutter به دو روش آفلاین و آنلاین ، در این پست از تجاری اپ می خواهیم نمایش تصویر در فلاتر Flutter را در قالب یک پروژه ساده به شما آموزش دهیم.با ما همراه باشید.

نمایش عکس در فلاتر Flutter به دو روش آفلاین و آنلاین

همانطور که در پست های پیشین گفتیم فلاتر با دو حالت StatelessWidget برای حالات نمایش view های استاتیک یا بدون تغییر و StatefulWidget برای view های پویا.

ما برای نمایش عکس در فلاتر به حالت StatelessWidget نیاز داریم چون در صفحه هیچ پویایی وجود ندارد .پس از ایجاد پروژه فلاتر مطابق آموزشی که در پست پیاده سازی اولین پروژه با فلاتر از تجاری اپ که خدمت شما ارائه دادیم ، فایل اصلی پروژه یعنی main.dart رو از StatelessWidget ارث بری (extends) میکنیم.

همچنین بخوانید: نصب فلاتر بر روی ویندوز ، لینوکس و مک

در ادامه هر دو حالت نمایش عکس در فلاتر را با هم انجام خواهیم داد.

نمایش عکس در Flutter به روش آفلاین

برای نمایش یک عکس آفلاین یا به بیانی دیگر لوکال در فلاتر کافیست که در مسیر ریشه یا root پروژه یک فولدر با نام دلخواه ایجاد کنیم.با کلیک راست برروی فولدر root (فولدر اصلی که هم نام پروژه ای ست که ایجاد کردید) سپس New و در نهایت Directory را انتخاب میکنیم.حال می توان نامی برای دایرکتوری انتخاب و در نهایت دایرکتوری را ایجاد کنیم (من دایرکتوری را با نام proj_repo ایجاد کردم).

حالا کافیست یک عکس را بصورت دستی درون دایرکتوری که ایجاد کردید قرار دهید.

حالا باید عکس را به پروژه معرفی کنیم ، پس در فایل pubspec.yaml کلمه assets را با Ctrl+F جستجو کنید به بخشی از فایل خواهید رسید که توضیحاتی درباره معرفی فایل های assets داده شده.
شما میتوانید دستوراتی که بصورت نمونه به شما داده را از حالت توضیحات (Comment) خارج کنید و یا به صورت دستی دستورات زیر را وارد کنید:

 assets:
     - proj_repo/linuxlogo.jpg

اکنون دکمه Packages upgrade را بزنید تا دستورات sync شوند.

حالا به سراغ فایل اصلی فلاتر یعنی main.dart می رویم و شروع به نوشتن کد میکنیم

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         body: Center(
             child: Image.asset("proj_repo/linuxlogo.jpg", height: 100 , width: 100,)
         ),
       ),
     );
   }
 }

خب از خط اول شروع میکنیم

 import 'package:flutter/material.dart';

این خط کتابخانه material را بصورت کامل برای این کلاس ایمپورت می کند .این بدین معناست که میتوان از تمامی ویجت های کلاس material استفاده کرد.
خط بعد متدی است که مشخص می کند کدام کلاس زمان اجرای برنامه نمایش داده میشود.

void main() => runApp(MyApp());

که مشخصا کلاس MyApp کلاسی است که به عنوان لانچر پروژه خواهد بود.

و اما کلاس MyApp که از کلاس StatelessWidget ارث بری می کند.

 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {

همچنین متد build درون آن که override شده و بدنه کلاس را می سازد.درون این متد ما صفحه خود را طراحی و کانفیگ میکنیم.
همانطور که مشخص است این متد یک خروجی از نوع Widget برمیگرداند یا return میکند پس بدنه آن بدین صورت خواهد بود.

 return MaterialApp(
       home: Scaffold(
         body: Center(
             child: Image.asset("proj_repo/linuxlogo.jpg", height: 100 , width: 100,)
         ),
       ),
     );

ما MaterialApp که یک ویجت است را return میکنیم یا برمیگردانیم.درون MaterialApp بدنه صفحه را ساختیم که شامل یک home است که با Scaffold مقدار دهی شده است.

Scaffold در فلاتر چیست ؟

در واقع Scaffold ساختار بیسیک و پایه ای متریال دیزاین را پیاده می کند و برای اپلیکیشن هایی با طراحی های پایه ای مناسب و کافیست.

همچنین بخوانید: مقایسه فلاتر (Flutter) با ری اکت نیتیو (React Native)

درون بلاک home ما یک body ایجاد میکنیم که با Center مقدار دهی شده (بدین معناست که تمامی محتوی درون body کاملا وسط چین خواهد شد.( چه عمودی و چه افقی) درون body ما یک child پیاده می کنیم که مشخصا می تواند هرویجتی باشد که ما اینجا از Image برای نمایش عکس استفاده کردیم.سپس آدرس عکسی که درون دایرکتوری assets داریم را به ویجت Image میدهیم به علاوه می توان خصوصیت های height و width را هم مشخص کرد.

پس از اجرای پروژه خواهیم دید که عکس در وسط صفحه نمایش داده می شود.

نمایش عکس در فلاتر Flutter به صورت آنلاین

برای نمایش عکس در فلاتر به صورت آنلاین کافیست کد فوق را بصورت زیر تغییر دهیم:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         body: Center(
           child: Image.network("https://www.tejariapp.com/wp-content/uploads/Group.jpg", height: 150 , width: 150,)
         ),
       ),
     );
   }
 }

همانطور که مشاهده میکنید تنها تفاوت نحوه نمایش عکس با ویجت Image است که اینجا از network برای نمایش عکس در فلاتر استفاده شده است.
به همین سادگی تنها کافیست لینک عکس را به network بدهیم و درصورت تمایل ارتفاع و پهنا را تغییر دهید.

امیدوارم این آموزش برای شما مفید بوده باشد.