آموزش ویجت در فلاتر (Flutter)

درک ویجت‌ها در Flutter

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

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

ویجت‌ها المان‌های اصلی هر اپلیکیشن Flutter هستند. هر جزء در رابط کاربری، از دکمه‌ها و فیلدهای متنی گرفته تا لیوت‌ها و اسلایدرها، به صورت ویجت‌هایی درآمده‌اند که می‌توانید آن‌ها را تغییر دهید، ترکیب کنید، و سفارشی سازید.

Flutter با استفاده از یک معماری کاملاً مبتنی بر ویجت، به شما امکان می‌دهد تا رابط‌های کاربری پویا و واکنشگرا بسازید. ویجت‌ها در یک درخت سازماندهی شده‌اند و هر بار که وضعیتی تغییر می‌کند، Flutter فقط بخش‌هایی از UI را که نیاز به به‌روزرسانی دارند را دوباره می‌سازد.

    Class ImageWidget extends StatelessWidget {  
        // Class Stuff  
}  

مثال Hello World

    import 'package:flutter/material.dart';  
  
class MyHomePage extends StatelessWidget {    
  MyHomePage({Key key, this.title}) : super(key: key);    
  // This widget is the home page of your application.    
  final String title;    
    
  @override    
  Widget build(BuildContext context) {    
    return Scaffold(    
      appBar: AppBar(    
        title: Text(this.title),    
      ),    
      body: Center(    
        child: Text('Hello World'),    
      ),    
    );    
  }    
}  

این مثال نشان می‌دهد چگونه یک ویجت ساده برای نمایش صفحه اصلی برنامه ایجاد می‌شود. در اینجا، Scaffold یک ویجت است که یک صفحه کامل با نوار بالا (AppBar) و یک متن در مرکز (Center) فراهم می‌کند. این نمایش دهنده چگونگی ساختاردهی ویجت‌ها در درون یکدیگر و ایجاد رابط‌های کاربری قابل تعامل است.

انواع ویجت در فلاتر

ویجت فلاتر را می توان به دو دسته تقسیم بندی کرد:

1. ویجت‌های قابل رویت: این ویجت‌ها شامل المان‌هایی هستند که کاربران می‌توانند آن‌ها را ببینند و با آن‌ها تعامل داشته باشند. مثلا: ویجت متن برای نمایش متون استفاده می‌شود. شما می‌توانید خصوصیاتی مانند ترازبندی متن (textAlign) و سبک نوشتاری (style) را تنظیم کنید. مثال کد:

       Text(
     'سلام به همه!',
     textAlign: TextAlign.center,
     style: TextStyle(fontWeight: FontWeight.bold),
   )
   
   

2. ویجت‌های غیرقابل رویت:

دکمه

در فلاتر، به جای استفاده مستقیم از ویجت Button، شما از انواع خاصی مانند TextButton (جایگزین FlatButton) و ElevatedButton (جایگزین RaisedButton) استفاده می‌کنید. هر دکمه ویژگی onPressed دارد که تعریف می‌کند چه عملیاتی باید هنگام فشار دادن دکمه انجام شود. ElevatedButton همچنین ویژگی elevation را دارد که میزان برجستگی دکمه را تنظیم می‌کند. نمونه کد:

    مثال TextButton
new FlatButton(  
  child: Text("کلیک کنید"),  
  onPressed: () {  
    // Do something here  
  },  
),  
  
// مثال ElevatedButton 
new RaisedButton(  
  child: Text("کلیک کنید"),  
  elevation: 5.0,  
  onPressed: () {  
    // اقداماتی که باید انجام شوند 
  },  
),  

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

تصویر

ویجت Image اجازه می‌دهد تصاویر را از منابع مختلف مانند پوشه‌ی assets، فایل‌های سیستمی، حافظه دستگاه، یا از طریق شبکه بارگذاری کنید. برای استفاده از تصاویر در پروژه‌ی Flutter، ابتدا باید پوشه‌ای برای تصاویر در فایل pubspec.yaml تعریف کنید و سپس تصویر مورد نظر را بارگذاری کنید:

    flutter:
  assets:
    - assets/

سپس، برای بارگذاری تصویر در فایل دارت:

Image.asset('assets/computer.png')

کد کامل برای نمایش تصویر در برنامه به شکل زیر است:

برای افزودن یک تصویر به پروژه، ابتدا باید یک پوشه asset برای نگهداری تصاویر خود ایجاد کنید و سپس خط زیر را در فایل pubspec.yaml اضافه کنید:

   assets:  
    - assets/  
 

حالا خط زیر را در فایل dart اضافه کنید:

Image.asset('assets/computer.png') 

کد کامل برای افزودن تصویر در زیر در مثال hello world نشان داده شده است:

    class MyHomePage extends StatelessWidget {
        MyHomePage({Key? key, required this.title}) : super(key: key);
        final String title;
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Center(
              child: Image.asset('assets/computer.png'),
            ),
          );
        }
      }
      

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

آیکون

این ویجت برای نمایش آیکون‌ها در برنامه‌های Flutter به کار می‌رود. مثال زیر نحوه استفاده از ویجت آیکون را نشان می‌دهد:

new Icon(  
    Icons.add,  
     size: 34.0,  
   )  
   

ویجت های غیرقابل رویت

این ویجت‌ها برای کنترل چیدمان و ترتیب عناصر رابط کاربری استفاده می‌شوند و شامل موارد زیر هستند:

Column (ستون)

این ویجت فرزندان خود را به صورت عمودی می‌چیند. mainAxisAlignment و crossAxisAlignment فضای بین آن‌ها را تنظیم می‌کنند.

    Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("VegElement"),
    Text("Non-vegElement")
  ]
)

  

Row (سطر)

مشابه Column اما فرزندان را به صورت افقی می‌چیند.

    Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text("VegElement"),
    Text("Non-vegElement")
  ]
)

  

Center (مرکز)

برای قرار دادن ویجت فرزند در مرکز ویجت.

    Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text("VegElement"),
          Text("Non-vegElement")
        ]
      )
    )
    
  

Padding

برای افزودن فضای خالی دور ویجت فرزند.

    Padding(
      padding: EdgeInsets.all(6.0),
      child: Text("Element 1")
    )
    
  

Scaffold

ویجتی که چارچوبی برای عناصر طراحی متریال مانند AppBar و Floating Action Buttons فراهم می‌کند.

Stack

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

ویجت مدیریت دستورات

در Flutter، عمدتا دو نوع ویجت وجود دارد:

• ویجت Stateless
• ویجت Stateful

ویجت Stateful :

این نوع ویجت هیچ وضعیت قابل تغییری ندارد و طی چرخه عمر خود ثابت باقی می‌ماند. مثال‌هایی از ویجت‌های بی‌وضعیت عبارتند از Text، Row، Column و Container.مثال:

      class MyStatelessWidget extends StatelessWidget {
        const MyStatelessWidget({Key? key}) : super(key: key);
    
        @override
        Widget build(BuildContext context) {
            return Container(color: const Color(0xFFEFEFEF));
        }
    }
    
    

ویجت Stateless

این نوع ویجت دارای وضعیت داخلی است که می‌تواند در طول زمان تغییر کند. این ویجت‌ها معمولا شامل دو کلاس هستند: یک کلاس ویجت و یک کلاس وضعیت. ویجت‌های دارای وضعیت مانند Checkbox، Radio، Slider و TextField هستند.مثال:

مثال

      class MyStatefulWidget extends StatefulWidget {
        const MyStatefulWidget({Key? key, this.title}) : super(key: key);
    
        final String? title;
    
        @override
        _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State {
        @override
        Widget build(BuildContext context) {
            return Container(color: const Color(0xFFEFEFEF));
        }
    }