آموزش کار با تصاویر در فریمورک Flutter
در هر اپلیکشنی با هر موضوعی ما نیاز داریم که از تصاویر استفاده کنیم , در واقع برنامه ای نمیتونید پیدا کنید که فقط متن باشه و تصویری داخل آن نبینیم. به همین دلیل امروز با آموزش نمایش عکس در فلاتر Flutter به صورت آفلاین و آنلاین در خدمت شما دوستان هستیم.
روش آفلاین
برای نمایش تصاویر بصورت آفلاین باید از بخش assets کمک بگیریم, ابتدا یک پکیج به اسم images بسازید برای این کار روی اسم پروژتون راست کلیک کنید و با انتخاب new Directory پوشه خودتون و ایجاد کنید. حالا عکسی که میخواید نمایش بدید و داخل این پوشه کپی کنید.
داخل پروژتون وارد فایل pubspec.yaml شوید اینجا باید عکس های خودمون و به برنامه بشناسونیم, برای این کار چند خط بعد از عبارت
uses-material-design: true
دستور زیر را بنویسید:
assets:
- images/aid.png
images اسم پوشه ای است که ایجاد کردیم و aid.png هم اسم عکس شما هست.
دقت کنید در YAML فاصله خیلی مهم هست و از زدن اسپیس بیشتر خود داری کنید. بعد از این کار بروی گزینه flutter packages get کلیک کنید.
حالا وارد کد های طراحی خود میشیم, برای نمایش عکس از ویجت Image استفاده می کنیم و چون به صورت آفلاین هست از ویژگی asset این ویجت بهره میبرم.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Examples',
home: Scaffold(
appBar: AppBar(
title: Text('Image Examples'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset('images/aid.png',height:100.0,width:100.0),
],
),
)
),
);
}
}
در کد بالا با Image.asset تصویر خودمون و نمایش دادیم همچنین اندازه تصویر را هم ۱۰۰در۱۰۰ پیکسل تعریف کردیم.
روش آنلاین
اگر بخواهیم عکسی و از اینترنت لود کنیم و نمایش بدهیم باز هم از ویجت Image استفاده می کنیم ولی این بار با ویژگی network این ویجت کار می کنیم
Image.network('http://image-url')
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
خیلی عالی. متشکر