آموزش کار با تصاویر در فریمورک Flutter

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

اهمیت نمایش تصویر در اپلیکیشن

ویجت Image در فلاتر نقشی حیاتی در نمایش تصاویر و محتوای بصری در رابط کاربری برنامه شما ایفا می‌کند. این ویجت نه تنها برای نمایش تصاویر ساده، بلکه برای موارد زیر نیز کاربرد دارد:

1. جذابیت بصری:

تصاویر می‌توانند رابط کاربری برنامه شما را جذاب‌تر و کاربرپسندتر کنند. استفاده از تصاویر با کیفیت و مرتبط با محتوای برنامه، تجربه کاربری بهتری را برای کاربران رقم خواهد زد.

2. انتقال اطلاعات:

تصاویر می‌توانند اطلاعات را به طور بصری و سریع‌تر از متن به کاربران منتقل کنند. به عنوان مثال، می‌توانید از تصاویر برای نمایش محصولات در یک فروشگاه آنلاین یا برای نشان دادن مراحل انجام یک کار در یک برنامه آموزشی استفاده کنید.

3. افزایش تعامل:

تصاویر می‌توانند تعامل کاربران با برنامه شما را افزایش دهند. به عنوان مثال، می‌توانید از تصاویر برای دکمه‌ها یا آیتم‌های منوی برنامه استفاده کنید تا کاربران را به کلیک کردن و انجام اقدامات ترغیب کنید.

آموزش پیاده سازی Method Channel در فلاتر

نمایش آفلاین تصاویر در فلاتر

برای نمایش تصاویر بصورت آفلاین باید از بخش 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 تصویر خودمون  و نمایش دادیم همچنین اندازه تصویر را هم 100در100 پیکسل تعریف کردیم.

روش آنلاین

اگر بخواهیم عکسی و از اینترنت لود کنیم و نمایش بدهیم باز هم از ویجت Image استفاده می کنیم ولی این بار با ویژگی network این ویجت کار می کنیم

Image.network('http://image-url')

نکاتی در مورد نمایش تصاویر:

• می‌توانید از fit برای تنظیم نحوه تناسب تصویر با فضای موجود استفاده کنید.
• می‌توانید از alignment برای تنظیم موقعیت تصویر در فضای موجود استفاده کنید.
• می‌توانید از width و height برای تنظیم اندازه تصویر استفاده کنید.
• می‌توانید از color برای تنظیم رنگ تصویر استفاده کنید.
• می‌توانید از opacity برای تنظیم شفافیت تصویر استفاده کنید.
• می‌توانید از borderRadius برای تنظیم گوشه‌های گرد تصویر استفاده کنید.
• می‌توانید از boxShadow برای اضافه کردن سایه به تصویر استفاده کنید.

مثال:

Image(
  image: AssetImage('assets/image.png'),
  fit: BoxFit.cover,
  alignment: Alignment.center,
  width: 100,
  height: 100,
  color: Colors.red,
  opacity: 0.5,
  borderRadius: BorderRadius.circular(10),
  boxShadow: [
    BoxShadow(
      color: Colors.grey,
      offset: Offset(0, 5),
      blurRadius: 10,
    ),
  ],
),

در مجموع، ویجت Image ابزاری قدرتمند و ضروری برای نمایش تصاویر در برنامه‌های فلاتر است. با استفاده از این ویجت می‌توانید رابط کاربری جذاب، آموزنده و تعاملی برای برنامه خود ایجاد کنید.