همه چیز درباره مفهوم ویجت در فلاتر

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

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

برای آشنایی کامل با این فریمورک میتوانید به مقاله فلاتر چیست مراجعه کنید.

ویجت چیست؟

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

به عنوان مثال برای ساخت یک خانه به بلوک های آجر نیاز داریم, با قرار دادن این آجرها در کنار هم میتونیم اتاق, دیوار,سقف و به طور کلی یک خانه بسازیم. در فریمورک Flutter نیز برای طراحی رابط کاربری از قرار دادن بلوک های مختلفی که widget نام دارند در کنار یکدیگر استفاده میکنیم تا به طراحی مورد نظر دست پیدا کنیم.

پس به طور کلی هر عنصری که در رابط کاربری اپلیکیشن های نوشته با فلاتر را مشاهده میکنید یک widget میباشد. متن, تصویر, دکمه ها و… همه یک نوع ویجت هستند.

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

ویجت ها به طور پیش فرض امکان تغییر اطلاعات را به برنامه نویسان نمیدهند و تمام اعضای آن از نوع final میباشد.

اما در این بین نوعی از ویجت ها وجود دارند که شامل یک State میشوند و میتوانند در طول اجرای برنامه اطلاعات ذخیره شده در خود را تغییر دهند. به این نوع از widget ها که امکان تغییر اطلاعات را دارند Stateful Widget و به نوع دیگر آن Stateless Widget میگویند.

به دلیل وجود همین ویژگی در فریمورک فلاتر مبحث مفصلی برای مدیریت State وجود دارد.

دسته بندی ویجت ها

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

• Accessibility: این ویجت ها امکان دسترس پذیری برنامه را افزایش میدهند. اندازه فونت, کنتراست صفحه و خیلی از مسائل در دسترس پذیر بودن یک اپلیکیشن تاثیر دارد.

• Animation: این نوع از ویجت ها برای ساخت و نمایش انیمیشن و حرکات مختلف در اپلیکیشن استفاده میشود. ویجت های Hero, Fade, Scale از پرکاربرد ترین ویجت های این بخش میباشند.

• ویجت های مخصوص نمایش متن, تصویر, آیکون

• Cupertino: ویجت مختص طراحی های مرتبط با رابط کاربری iOS

• Widgetهای لایه ای

• Widget های مخصوص تعامل با کاربر مثل دکمه ها

برای درک بهتر به مثال زیر توجه کنید.

 
class FirstWidget extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreen,
                                       appBar: AppBar( backgroundColor: Colors.green,
                                       title: Text("Flutter"), ),
                                        
   body: Container( child: Center( child: Text("Flutte-Learn.ir!!"), ), ), ), ); } } 

در این کد یک ویجت از نوع StatelessWidget داریم که نام آن را FirstWidget قرار داده ایم. در بخش متد build که رابط کاربری ویجت را طراحی میکنیم ابتدا یک ویجت لایه ای از نوع MaterialApp استفاده کرده ایم.

در ادامه از ویجت Scaffold استفاده شده که یک Widget لایه ای است و شامل کامپوننت های متریال دیزاین میباشد.

از ویجت AppBar  برای ساخت تولبار استفاده شده است.

ویجت Text   برای نمایش متن میباشد.

ویجت های Container و Center هم باز از نوع لایه ای میباشد.

اکثر ویجت ها میتوانند یک فرزند نیز داشته باشند که با کلمه Child مشخص میشود و نوع آن هم یک Widget میباشد.

به همین ترتیب یک درختی از ویجت ها تشکیل میشود.

چرخه حیات ویجت

مانند اپلیکیشن ویجت ها هم شامل یک چرخه حیات هستند که شامل متدهای گوناگونی میباشد که به بررسی آنها میپردازیم.

initState: این متد زمانی که ویجت به درخت Widget اضافه شد اجرا میشود و دقیقا یکبار فقط این اتفاق رخ میدهد. در این مرحله معمولا متغیرهای مورد نیاز مقداردهی میشوند. این متد فقط در Stateful Widget وجود دارد.

build: این متد هرباری که ویجت مجددا ساخته شود اجرا میشود. برای مثال برای تغییر state زمانی که از دستور setState استفاده کنید این ویجت دوباره اجرا میشود. محدودیتی در تعداد اجرا وجود ندارد.

didChangeDependencies: این متد دقیقا بعد از متد initState اجرا میشود. همچنین هرزمان که وابستگی های ویجت تغییر کند نیز اجرا میشود.

didUpdateWidget: هر زمان که تنظیمات ویجت تغییر کند این متد نیز اجرا میشود. برای مثال ویجت والد یک متغیری را به ویجت فرزند از طریق متد سازنده ارسال کند.

deactivate: هر زمان که نمونه مورد نظر از درخت حذف شود این متد اجرا میشود.

dispose: زمانی که نمونه به شکل دائمی از درخت حذف شود این متد اجرا میشود. در این حالت باید تمام منابعی که توسط این ویجت مصرف میشد را نیز آزاد کرد.