فلاتر یک فریم‌ورک متن‌باز برای توسعه اپلیکیشن‌های موبایل است که توسط شرکت گوگل در سال ۲۰۱۷ معرفی شد و بر زبان برنامه‌نویسی دارت نوشته شده است. دارت یک زبان برنامه‌نویسی چندمنظوره و شی‌گرا است. در واقع با استفاده از این ویجت هاست که میتوانیم اپلیکیشن مورد نظر را طراحی کنیم و به کاربر نمایش دهیم. ویجت در فلاتر همانند اجزای UI در دیگر فریمورک‌ها (مانند View در اندروید) عمل می‌کند. ویجت‌ها از مجموعه‌ای از اجزا تشکیل شده‌اند که برای نمایش اطلاعات و تعامل با کاربر در صفحات UI بکار می‌روند. از طریق ویجت‌ها، می‌توانید همه چیز را از متن، دکمه‌ها، تصاویر، لیست‌ها و حتی صفحات را ایجاد کنید.

ویجت فلاتر چیست؟

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

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

دسته بندی انواع ویجت در فلاتر:

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

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

انواع ویجت های فلاتر بر اساس کاربرد آنها:

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

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

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

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

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

• Widgetهای لایه ای

• Widget های مخصوص تعامل با کاربر مثل دکمه ها: این ویجت ها در فلاتر برای مدیریت رویدادهای لمسی و هدایت کاربران به سمت نمایش‌های مختلف در برنامه ایجاد می‌شوند.

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

حال که می‌دانیم ویجت چیست و چه کاری انجام می‌دهد وقت آن رسیده که بدانیم چند نوع ابزارک یا ویجت (Widget) داریم پیش تر در مورد چگونگی دسته‌بندی آنان صحبت کردیم. این بخش در مورد انواع آنان سخن خواهیم گفت.

Flutter مجموعه‌ای گسترده از ابزارک‌های داخلی مانند متن، buttons، slider، لیست‌ها، چیدمان‌ها، ردیاب حرکات، انیمیشن‌ها و … را دارد و طراحان فلاتر به طور مداوم ابزارک‌های بیشتری را به عنوان نیاز توسعه‌دهندگان به آن اضافه می‌کنند.

اما جدا از ابزارک‌های داخلی، می‌توانید ابزارک‌های خود را با توجه به نیاز خود ایجاد کنید. فلاتر (Flutter) ابزارک‌ها را به دو دسته تقسیم می‌کند:

۱. ویجت های بدون حالت (Stateless Widgets):

این ویجت همانطور که از نامش پیداست هیچ کاری در کل انجام نمی‌دهد و کاملا ماهیت ساکنی دارد. ابزارک‌هایی که بدون تابعیت هستند هیچگونه توابعی را ذخیره نمی‌کنند. این جمله بدین معناست که آنها مقادیری را که ممکن است تغییر کنند را ذخیره نمی‌کنند.

همچنین می‌توان گفت که ابزارک‌های بدون دولت (تابعیت)، ابزارک‌های “DATALESS” هستند. زیرا آنها هیچ داده‌ای در زمان واقعی ذخیره نمی‌کنند. نکته: Icon ،IconButton و Text نمونه‌ای از ابزارک‌های بدون حالت هستند.

برخی از ویجت‌های فلاتر بدون حالت عبارت‌اند از:

۱- ویجت Text در فلاتر

ویجت Text یکی از پرکاربردترین ویجت‌ها در فلاتر برای نمایش متن است. با استفاده از این ویجت می‌توانید متن‌های ساده تا پیچیده را به راحتی نمایش دهید.

ویژگی‌های ویجت Text در فلاتر:

• data: متنی که می‌خواهید نمایش داده شود.
• style: سبک متن را شامل اندازه، رنگ، ضخامت، فونت و … مشخص می‌کند.
• textAlign: نحوه چینش متن را مشخص می‌کند (چپ چین، راست چین، وسط چین).
• overflow: نحوه نمایش متن‌های طولانی که در فضای ویجت جا نمی‌شوند را مشخص می‌کند.
• softWrap: اگر می‌خواهید متن به خط بعدی برود و محدودیتی برای آن قائل نشوید، این ویژگی را true کنید.

۲- ویجت Icon در فلاتر

ویجت Icon در فلاتر برای نمایش آیکون‌ها از کتابخانه‌های آیکون Material و Cupertino استفاده می‌شود.

ویژگی‌های ویجت Icon در فلاتر:

• icon: نوع آیکون را مشخص می‌کند.
• size: اندازه آیکون را مشخص می‌کند.
• color: رنگ آیکون را مشخص می‌کند.
• shadows: سایه‌های آیکون را فعال یا غیرفعال می‌کند.
• semanticLabel: برچسبی برای آیکون جهت دسترس‌پذیری بیشتر

۳- ویجت Image در فلاتر

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

ویژگی‌های ویجت Image در فلاتر:

• image: منبع تصویر را مشخص می‌کند.
• width: عرض تصویر را مشخص می‌کند.
• height: ارتفاع تصویر را مشخص می‌کند.
• fit: نحوه تناسب تصویر با فضای ویجت را مشخص می‌کند.
• color: رنگ تصویر را تغییر می‌دهد.
• alignment: نحوه چینش تصویر در فضای ویجت را مشخص می‌کند.

۴- ویجت IconButton در فلاتر

ویجت IconButton در فلاتر یک دکمه ساده است که به جای متن، از یک آیکن برای نمایش استفاده می‌کند. این ویجت برای موارد مختلفی مانند:

• منوی ناوبری
• نوار ابزار
• تنظیمات
• و …

کاربرد دارد.

مزایای استفاده از ویجت IconButton:

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

ویژگی‌های کلیدی ویجت IconButton در فلاتر:

۱. آیکن:

• می‌توانید از آیکن‌های پیش‌فرض فلاتر یا آیکن‌های سفارشی خود استفاده کنید.
• اندازه و رنگ آیکن را با پارامترهای iconSize و color به دلخواه تغییر دهید.

۲. فشردن دکمه:

• با استفاده از پارامتر onPressed، تابعی را برای اجرا پس از کلیک کاربر بر روی دکمه تعریف کنید.
• می‌توانید از انیمیشن‌های مختلف برای فشرده شدن دکمه استفاده کنید.

۳. ظاهر دکمه:

• با پارامتر splashColor رنگ موج ایجاد شده هنگام کلیک را تعیین کنید.
• با پارامتر highlightColor رنگ پس‌زمینه دکمه هنگام فشرده شدن را تغییر دهید.
• با پارامتر shape شکل دکمه را به دلخواه (دایره، مربع و …) تغییر دهید.

۴. سایر ویژگی‌ها:

• با پارامتر padding حاشیه اطراف دکمه را تنظیم کنید.
• با پارامتر tooltip متنی را برای نمایش به کاربر هنگام نگه داشتن موس بر روی دکمه تعریف کنید.
• با پارامتر enabled دکمه را فعال یا غیرفعال کنید.

۵- ویجت RaisedButton در فلاتر

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

ویژگی‌های کلیدی ویجت RaisedButton:

۱. ظاهر:

• دکمه به صورت برجسته و با سایه نمایش داده می‌شود.
• رنگ پس‌زمینه و رنگ متن دکمه را می‌توان به دلخواه تغییر داد.
• می‌توانید از انیمیشن‌های مختلف برای فشرده شدن دکمه استفاده کنید.

۲. فشردن دکمه:

• با استفاده از پارامتر onPressed، تابعی را برای اجرا پس از کلیک کاربر بر روی دکمه تعریف کنید.
• می‌توانید از انیمیشن‌های مختلف برای فشرده شدن دکمه استفاده کنید.

۳. سایر ویژگی‌ها:

• با پارامتر shape شکل دکمه را به دلخواه (دایره، مربع و …) تغییر دهید.
• با پارامتر padding حاشیه اطراف دکمه را تنظیم کنید.
• با پارامتر elevation میزان برجستگی دکمه را تعیین کنید.
• با پارامتر disabledColor رنگ دکمه در حالت غیرفعال را تعیین کنید.

۶- ویجت FlatButton در فلاتر

ویجت FlatButton در فلاتر یک دکمه ساده با ظاهری دو بعدی است که برای انجام اقدامات مختلف در رابط کاربری برنامه استفاده می‌شود.

ویژگی‌های کلیدی ویجت FlatButton:

۱. ظاهر:

• دکمه به صورت یک سطح صاف و بدون سایه نمایش داده می‌شود.
• رنگ پس‌زمینه و رنگ متن دکمه را می‌توان به دلخواه تغییر داد.

۲. فشردن دکمه:

• با استفاده از پارامتر onPressed، تابعی را برای اجرا پس از کلیک کاربر بر روی دکمه تعریف کنید.
• می‌توانید از انیمیشن‌های مختلف برای فشرده شدن دکمه استفاده کنید.

۳. سایر ویژگی‌ها:

• با پارامتر shape شکل دکمه را به دلخواه (دایره، مربع و …) تغییر دهید.
• با پارامتر padding حاشیه اطراف دکمه را تنظیم کنید.
• با پارامتر splashColor رنگ موج ایجاد شده هنگام کلیک را تعیین کنید.
• با پارامتر highlightColor رنگ پس‌زمینه دکمه هنگام فشرده شدن را تغییر دهید.

۷- ویجت SnackBar در فلاتر 

اسنک بار (SnackBar) یک ویجت در فلاتر است که برای نمایش یک پیام کوتاه به کاربر استفاده می‌شود. این پیام می‌تواند برای اطلاع‌رسانی به کاربر از یک رویداد یا برای ارائه یک عمل به کاربر استفاده شود.

ویژگی‌های SnackBar در فلاتر:

• content: محتوای اسنک بار را نشان می‌دهد.
• backgroundColor: رنگ پس‌زمینه اسنک بار را نشان می‌دهد.
• action: یک دکمه را در اسنک بار نمایش می‌دهد.
• duration: مدت زمان نمایش اسنک بار را نشان می‌دهد.

۸- ویجت Stack در فلاتر

ویجت Stack در فلاتر برای قرار دادن چندین ویجت بر روی یکدیگر و جانمایی آنها نسبت به یکدیگر استفاده می‌شود. این ویجت برای ایجاد طرح‌های پیچیده و لایه‌های مختلف در رابط کاربری بسیار مفید است.

ویژگی‌های Stack در فلاتر:

• children: لیستی از ویجت‌هایی که باید در Stack قرار داده شوند.
• alignment: نحوه چینش ویجت‌ها در Stack را مشخص می‌کند.
• fit: نحوه تناسب ویجت‌ها با فضای Stack را مشخص می‌کند.
• overflow: نحوه نمایش ویجت‌هایی که از فضای Stack خارج می‌شوند را مشخص می‌کند.

۹- ویجت AlertDialog در فلاتر

ویجت AlertDialog در فلاتر برای نمایش یک پنجره پاپ‌آپ به کاربر با یک پیام و دکمه‌های انتخابی استفاده می‌شود. این ویجت برای جلب توجه کاربر و دریافت پاسخ از او در مورد یک موضوع خاص مفید است.

ویژگی‌های ویجت فلاتر AlertDialog :

• title: عنوان AlertDialog را نمایش می‌دهد.
• content: محتوای AlertDialog را نمایش می‌دهد.
• actions: لیستی از دکمه‌هایی که کاربر می‌تواند انتخاب کند را نمایش می‌دهد.
• shape: شکل AlertDialog را مشخص می‌کند.
• backgroundColor: رنگ پس‌زمینه AlertDialog را مشخص می‌کند.

۱۰- ویجت FloatingActionButton در فلاتر

ویجت FloatingActionButton در فلاتر برای نمایش یک دکمه شناور در پایین صفحه استفاده می‌شود. این دکمه معمولاً برای انجام یک عمل مهم، مانند اضافه کردن یک آیتم جدید، ارسال یک فرم، یا باز کردن یک صفحه جدید استفاده می‌شود.

کاربردهای ویجت فلاتر FloatingActionButton :

• اضافه کردن یک آیتم جدید به لیست
• ارسال یک فرم
• باز کردن یک صفحه جدید
• ذخیره اطلاعات
• و …

۱۱- ویجت SliverAppBar در فلاتر

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

کاربردهای ویجت فلاتر SliverAppBar :

• نمایش عنوان صفحه
• نمایش آیکون‌ها و سایر عناصر ناوبری
• نمایش تصاویر و ویدئوها
• نمایش لیست‌ها
• و …

۱۲- ویجت Align در فلاتر

ویجت Align در فلاتر برای تراز کردن یک ویجت فرزند در داخل یک ویجت والد استفاده می‌شود. این ویجت به شما امکان می‌دهد تا ویجت فرزند را در هر نقطه دلخواه از ویجت والد قرار دهید.

ویژگی‌های ویجت فلاتر Align :

• تراز کردن یک متن در وسط صفحه
• تراز کردن یک دکمه در گوشه سمت راست صفحه
• تراز کردن یک تصویر در مرکز یک کانتینر
• و …

۱۳- ویجت PageView در فلاتر

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

ویژگی‌های ویجت فلاتر PageView :

• نمایش اسلایدشو تصاویر
• نمایش لیست آیتم ها به صورت افقی
• نمایش صفحات مختلف یک کتاب
• و …

۱۴- ویجت Spacer در فلاتر

ویجت Spacer در فلاتر برای ایجاد فاصله بین ویجت‌های فرزند در داخل یک ویجت Row یا Column استفاده می‌شود. این ویجت به شما امکان می‌دهد تا فضای خالی بین ویجت‌ها را به طور مساوی تقسیم کنید.

ویژگی‌های ویجت فلاتر Spacer:

• ایجاد فاصله بین آیتم‌های یک لیست
• ایجاد فاصله بین دکمه‌ها در یک نوار ابزار
• ایجاد فاصله بین ستون‌ها در یک جدول
• و …

۱۵- ویجت RichText در فلاتر

ویجت RichText در فلاتر برای نمایش متن با استایل‌های مختلف استفاده می‌شود. این ویجت به شما امکان می‌دهد تا رنگ، اندازه، فونت و سایر ویژگی‌های متن را به طور جداگانه برای هر بخش از متن تنظیم کنید.

ویژگی‌های ویجت فلاتر RichText :

• نمایش متن با رنگ‌های مختلف
• نمایش متن با اندازه‌های مختلف
• نمایش متن با فونت‌های مختلف
• نمایش متن با لینک‌ها
• و …

۱۶- ویجت ListView در فلاتر

ویجت ListView در فلاتر برای نمایش لیست عمودی از آیتم‌ها استفاده می‌شود. این ویجت به شما امکان می‌دهد تا لیست‌های ساده و پیچیده را به راحتی ایجاد کنید.

ویژگی‌های ویجت فلاتر ListView :

• نمایش لیست اسامی
• نمایش لیست محصولات
• نمایش لیست پیام‌ها
• و …

۱۷- ویجت DraggableScrollableSheet در فلاتر

ویجت DraggableScrollableSheet در فریم‌ورک فلاتر امکان نمایش محتوایی که کاربر می‌تواند آن را به بالا یا پایین بکشد را فراهم می‌کند. این ویجت برای ایجاد رابط کاربری‌هایی مانند پنجره‌های پاپ‌آپ (popup) یا فرم‌های جزئی استفاده می‌شود که کاربر می‌تواند آنها را به بالا و پایین بکشد.

۱۸- ویجت ListTile در فلاتر

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

ویژگی‌های ویجت فلاتر ListTile :

• نمایش لیست اسامی
• نمایش لیست محصولات
• نمایش لیست پیام‌ها
• و …

۱۹- ویجت AnimatedPositioned در فلاتر

ویجت AnimatedPositioned در فلاتر برای جابجایی انیمیشنی یک ویجت فرزند در داخل یک ویجت پدر استفاده می‌شود. این ویجت به شما امکان می‌دهد تا موقعیت ویجت فرزند را به صورت انیمیشنی تغییر دهید.

ویژگی‌های ویجت فلاتر AnimatedPositioned :

• ایجاد انیمیشن‌های حرکت
• ایجاد انیمیشن‌های ظاهر و ناپدید شدن
• ایجاد انیمیشن‌های تغییر اندازه

۲۰- ویجت FadeInImage در فلاتر

ویجت FadeInImage در فلاتر برای نمایش تصویری که به تدریج ظاهر می‌شود استفاده می‌شود. این ویجت به شما امکان می‌دهد تا تصویر را به صورت محو و سپس به تدریج واضح نمایش دهید.

ویژگی‌های ویجت فلاتر FadeInImage :

• نمایش تصاویر در یک لیست
• نمایش تصاویر در یک گالری
• نمایش تصاویر در یک صفحه جزئیات

۲۱- ویجت ToggleButtons در فلاتر

ویجت ToggleButtons در فلاتر برای نمایش مجموعه‌ای از دکمه‌های انتخابی که فقط یک دکمه از آنها می‌تواند در یک زمان فعال باشد، استفاده می‌شود. این ویجت برای انتخاب بین چند گزینه مختلف، مانند روشن/خاموش کردن یک ویژگی یا انتخاب بین چند حالت مختلف، مناسب است.

ویژگی‌های ویجت فلاتر ToggleButtons:

• استفاده آسان
• رابط کاربری بصری
• مناسب برای انتخاب بین چند گزینه مختلف
• قابل تنظیم با استفاده از پارامترهای مختلف

۲۲- ویجت IndexedStack در فلاتر

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

ویژگی‌های ویجت فلاتر IndexedStack:

• استفاده آسان
• رابط کاربری بصری
• مناسب برای نمایش صفحات مختلف در یک صفحه
• انیمیشن‌های روان برای جابجایی بین صفحات

۲۳- ویجت Hero در فلاتر

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

ویژگی‌های ویجت فلاتر Hero:

• tag: همانطور که قبلاً گفته شد، tag تگ مشترک بین دو ویجتی است که می‌خواهید بین آنها انیمیشن ایجاد کنید.

• transitionOnUserGestures: با تنظیم این ویژگی می‌توانید تعیین کنید که انیمیشن فقط با حرکات کاربر اجرا شود یا با تغییر مسیر هم اجرا شود.

• flightShuttleBuilder: این تابع به شما امکان می‌دهد تا انیمیشن Hero را به طور کامل سفارشی کنید.

• placeholderBuilder: این تابع به شما امکان می‌دهد تا یک ویجت جایگزین را در حین انیمیشن نمایش دهید.

• heroController: با استفاده از heroController می‌توانید انیمیشن Hero را به صورت دستی کنترل کنید.

• duration: مدت زمان انیمیشن را تعیین می‌کند.

• curve: منحنی انیمیشن را تعیین می‌کند.

• alignment: چینش ویجت در حین انیمیشن را تعیین می‌کند.

• replicas: تعداد دفعات تکرار انیمیشن را تعیین می‌کند.

• maxScale: حداکثر اندازه ویجت در حین انیمیشن را تعیین می‌کند.

• minScale: حداقل اندازه ویجت در حین انیمیشن را تعیین می‌کند.

۲۴- ویجت Row/Column در فلاتر

ویجت های Row و Column در فلاتر، از ویجت های بسیار پرکاربرد برای چیدمان و مدیریت فرزندهای (children) دیگر ویجت ها هستند.

• Row: برای قرار دادن فرزندهای خود بصورت افقی (دستم به دست) استفاده می شود. به عبارتی فرزندها در یک ردیف و کنار هم چیده می شوند. ترتیب قرارگیری فرزندها بر اساس ترتیب اضافه شدن آنها به ویجت Row است.

• Column: برای قرار دادن فرزندهای خود بصورت عمودی (روی هم) استفاده می شود. فرزندها در ستون های جداگانه و زیر هم چیده می شوند. ترتیب قرارگیری فرزندها نیز بر اساس ترتیب اضافه شدن آنها به ویجت Column است.

۲۵- ویجت Wrap در فلاتر

ویجت Wrap در فلاتر برای چیدمان فرزندهای خود بصورت منعطف و شبیه به کلمات در یک متن استفاده می شود. این ویجت به شما امکان می دهد تا فرزندهای خود را در خطوط مختلف و با در نظر گرفتن فضای موجود، بهینه سازی کنید.

ویژگی‌های ویجت فلاتر Wrap :

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

۲۶- ویجت Expanded در فلاتر

ویجت Expanded در فلاتر برای اشغال فضای باقی‌مانده توسط فرزند خود در یک ردیف (Row) یا ستون (Column) استفاده می‌شود. این ویجت به شما کمک می‌کند تا فرزند خود را به طور خودکار به اندازه فضای موجود در ردیف یا ستون، بزرگ کنید.

ویژگی‌های ویجت فلاتر Expanded:

• flex: این پارامتر برای تعیین نسبت فضای اشغال شده توسط ویجت Expanded در مقایسه با سایر ویجت های Expanded در یک ردیف یا ستون استفاده می شود. به طور پیش فرض، مقدار flex برابر با ۱ است.

• fit: این پارامتر نحوه تناسب ویجت Expanded با فضای موجود را تعیین می کند. مقادیر ممکن برای fit عبارتند از:

  • FlexFit.loose: ویجت Expanded به اندازه دلخواه خود رشد می کند، اما از فضای خالی موجود بیشتر استفاده نمی کند.
  • FlexFit.tight: ویجت Expanded تا حد امکان فضای موجود را پر می کند.

• crossAxisAlignment: این پارامتر نحوه تراز عمودی فرزند ویجت Expanded را تعیین می کند. مقادیر ممکن برای crossAxisAlignment عبارتند از:

  • CrossAxisAlignment.start: فرزند در بالای فضای موجود قرار می گیرد.
  • CrossAxisAlignment.center: فرزند در وسط فضای موجود قرار می گیرد.
  • CrossAxisAlignment.end: فرزند در پایین فضای موجود قرار می گیرد.

• mainAxisAlignment: این پارامتر نحوه تراز افقی فرزند ویجت Expanded را تعیین می کند. مقادیر ممکن برای mainAxisAlignment عبارتند از:

  • MainAxisAlignment.start: فرزند در لبه سمت چپ فضای موجود قرار می گیرد.
  • MainAxisAlignment.center: فرزند در وسط فضای موجود قرار می گیرد.
  • MainAxisAlignment.end: فرزند در لبه سمت راست فضای موجود قرار می گیرد.

۲۷- ویجت SafeArea در فلاتر

ویجت SafeArea در فلاتر برای اضافه کردن padding به طور خودکار به فرزند خود، با توجه به ناچ، بریدگی و سایر ویژگی های سیستم، استفاده می شود. این ویجت به شما کمک می کند تا از نمایش محتوای خود در مناطق غیرقابل دسترس صفحه نمایش، مانند ناچ یا نوار وضعیت، جلوگیری کنید.

۲۸- ویجت Flexible در فلاتر

ویجت Flexible در فلاتر برای چیدمان فرزند خود در فضای موجود در یک ردیف (Row) یا ستون (Column) به صورت منعطف استفاده می‌شود. این ویجت به شما کمک می‌کند تا فرزند خود را به گونه‌ای تنظیم کنید که از فضای موجود به طور کامل استفاده کند و در عین حال، نسبت ابعادی خود را حفظ کند.

ویژگی‌های ویجت فلاتر Flexible:

• flex: این پارامتر برای تعیین نسبت فضای اشغال شده توسط ویجت Flexible در مقایسه با سایر ویجت های Flexible در یک ردیف یا ستون استفاده می شود. به طور پیش فرض، مقدار flex برابر با ۱ است.

• fit: این پارامتر نحوه تناسب ویجت Flexible با فضای موجود را تعیین می کند. مقادیر ممکن برای fit عبارتند از:

  • FlexFit.loose: ویجت Flexible به اندازه دلخواه خود رشد می کند، اما از فضای خالی موجود بیشتر استفاده نمی کند.
  • FlexFit.tight: ویجت Flexible تا حد امکان فضای موجود را پر می کند.

• crossAxisAlignment: این پارامتر نحوه تراز عمودی فرزند ویجت Flexible را تعیین می کند. مقادیر ممکن برای crossAxisAlignment عبارتند از:

  • CrossAxisAlignment.start: فرزند در بالای فضای موجود قرار می گیرد.
  • CrossAxisAlignment.center: فرزند در وسط فضای موجود قرار می گیرد.
  • CrossAxisAlignment.end: فرزند در پایین فضای موجود قرار می گیرد.

• mainAxisAlignment: این پارامتر نحوه تراز افقی فرزند ویجت Flexible را تعیین می کند. مقادیر ممکن برای mainAxisAlignment عبارتند از:

  • MainAxisAlignment.start: فرزند در لبه سمت چپ فضای موجود قرار می گیرد.
  • MainAxisAlignment.center: فرزند در وسط فضای موجود قرار می گیرد.
  • MainAxisAlignment.end: فرزند در لبه سمت راست فضای موجود قرار می گیرد.

۲۹- ویجت AbsorbPointer در فلاتر

ویجت AbsorbPointer در فلاتر برای جلوگیری از دریافت اشاره‌گرها (مانند لمس، کلیک، اسکرول) توسط فرزند خود استفاده می‌شود. این ویجت به شما کمک می‌کند تا قسمت‌هایی از رابط کاربری خود را غیرفعال کنید و از تداخل آنها با سایر قسمت‌ها جلوگیری کنید.

ویژگی‌های ویجت فلاتر AbsorbPointer:

• absorbing: این پارامتر برای فعال یا غیرفعال کردن ویجت AbsorbPointer استفاده می شود. اگر مقدار absorbing برابر با true باشد، ویجت از دریافت اشاره‌گرها (مانند لمس، کلیک، اسکرول) جلوگیری می‌کند.
• ignoringSemantics: این پارامتر تعیین می کند که آیا ویجت AbsorbPointer از نظر معنایی قابل دسترس است یا خیر. اگر مقدار ignoringSemantics برابر با true باشد، ویجت از نظر معنایی غیرفعال می شود و توسط خوانندگان صفحه نمایش و سایر ابزارهای کمکی قابل دسترسی نیست.
• child: این پارامتر فرزند ویجت AbsorbPointer را مشخص می کند.

۳۰- ویجت LayoutBuilder در فلاتر

ویجت LayoutBuilder در فلاتر برای دریافت اطلاعات مربوط به اندازه و موقعیت یک ویجت در سلسله مراتب ویجت ها و همچنین برای ساختن ویجت های پویای responsive استفاده می شود.

ویژگی‌های ویجت فلاتر LayoutBuilder:

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

۳۱- ویجت Container در فلاتر

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

ویژگی‌های ویجت فلاتر Container :

• ایجاد یک کادر یا قاب برای محتوای مختلف
• تنظیم رنگ، حاشیه، و padding برای محتوای داخل
• تنظیم چیدمان محتوای داخل (مانند چیدمان عمودی، افقی، یا justify)
• اضافه کردن انیمیشن و افکت های مختلف به محتوای داخل

۳۲- ویجت BackdropFilter در فلاتر

ویجت BackdropFilter در فلاتر برای اعمال فیلتر به پس‌زمینه یک ویجت استفاده می‌شود. این ویجت به شما امکان می‌دهد تا جلوه‌های محو، تار و سایر جلوه‌ها را به پس‌زمینه ویجت فرزند خود اضافه کنید.

ویژگی‌های ویجت فلاتر BackdropFilter:

• ایجاد جلوه محو برای پس‌زمینه یک تصویر
• ایجاد جلوه تار برای پس‌زمینه یک متن
• ایجاد جلوه‌های رنگی برای پس‌زمینه یک دکمه
• و …

۳۳- ویجت SizedBox در فلاتر

ویجت SizedBox در فلاتر برای تعیین اندازه یک ویجت فرزند استفاده می‌شود. این ویجت به شما امکان می‌دهد تا عرض و ارتفاع ویجت فرزند را به طور جداگانه تنظیم کنید.

ویژگی‌های ویجت فلاتر SizedBox:

• تنظیم اندازه یک تصویر
• تنظیم اندازه یک دکمه
• تنظیم اندازه یک متن
• و …

۳۴- ویجت DropDownButton در فلاتر

ویجت DropDownButton در فلاتر برای نمایش لیست کشویی از گزینه ها به کار می رود. این ویجت به کاربر اجازه می دهد تا با کلیک بر روی یک دکمه، یک گزینه از لیست را انتخاب کند.

کاربردهای ویجت فلاتر DropDownButton:

• انتخاب یک کشور از لیست کشورهای جهان
• انتخاب یک شهر از لیست شهرهای یک کشور
• انتخاب یک رنگ از لیست رنگ ها
• انتخاب یک جنس از لیست جنس ها
• و …

۲. ویجت های با حالت (Stateful Widgets)

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

کاربر با استفاده از یک ویجت و ابزارک می‌تواند به راحتی با برنامه ارتباط برقرار کند. به عنوان مثال اگر شما یک دکمه را بزنید هر کاری که بعد از آن انجام شود یک ویجت و ابزارک (ویجت Stateful) پشت آن است. CheckBox ،Radio،Slider ،InkWell ،Form و TextField نمونه‌ای از ابزارک‌های مناسب هستند.

برخی از ویجت‌های با حالت عبارت‌اند از:

• TextField
• CheckBox
• Radio
• Switch
• Slider
• DropdownButton
• و…

همیشه این موارد را به یاد داشته باشید که:

• اگر ویجتی پویا بود و باعث تغییرات در دیگر ابزارک‌ها و ویجت‌ها گردید، آن ویجت Stateful است.
• اگر ویجتی کاملا ساکن بود و هیچ حالتی از خود نشان نداد، آن ویجت Stateless است.

در ادامه شما را با انواع ویجت ها با توضیحات و مثال هایشان آشنا خواهیم کرد.

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

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

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

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

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

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

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

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

درخت ویجت در فلاتر چیست؟

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

شکل ۱. درخت ویجت نشان دهنده ویجت های والد و فرزند است

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

درخت ویجت در Flutter از دو بخش اصلی تشکیل شده است:

• گره‌ها: گره‌های درخت ویجت، ویجت‌های رابط کاربری برنامه هستند.
• یال‌ها: یال‌های درخت ویجت، روابط بین ویجت‌ها را نشان می‌دهند.

نحوه عملکرد درخت ویجت در Flutter:

1. مرحله اول: موتور رندر فلاتر درخت ویجت را از ریشه (بالاترین گره) به صورت بازگشتی پیمایش می‌کند.
2. مرحله دوم: برای هر گره در درخت ویجت، موتور رندر فلاتر متد build آن گره را اجرا می‌کند.
3. مرحله سوم: متد build هر گره، یک عنصر رابط کاربری را برمی‌گرداند.
4. مرحله چهارم: موتور رندر فلاتر عناصر رابط کاربری را به ترتیب سلسله مراتبی در درخت ویجت نمایش می‌دهد.

مزایای استفاده از درخت ویجت در فلاتر:

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

معایب استفاده از درخت ویجت:

• پیچیدگی: در برخی موارد، درخت ویجت می‌تواند پیچیده شود و مدیریت آن دشوار باشد.
• عملکرد: اگر درخت ویجت شما خیلی بزرگ باشد، ممکن است بر عملکرد برنامه شما تأثیر منفی بگذارد.

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

دیباگ و تست ویجت در فلاتر

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

ابزارهای دیباگ در فلاتر:

• ابزار Debug Paint: این ابزار به شما کمک می‌کند تا ویجت‌هایی که در طراحی UI شما مشکل دارند را پیدا کنید.
• Inspect Element: این ابزار به شما اجازه می‌دهد تا ویژگی‌های هر ویجت را بررسی کنید.
• Logcat: این ابزار به شما اجازه می‌دهد تا پیام‌های log را مشاهده کنید که می‌توانند به شما در پیدا کردن مشکلات برنامه کمک کنند.

ابزارهای تست در فلاتر:

• Widget Tester: این ابزار به شما اجازه می‌دهد تا ویجت‌های خود را به صورت جداگانه تست کنید.
• Integration Tests: این ابزار به شما اجازه می‌دهد تا تست کنید که چگونه ویجت‌های مختلف با یکدیگر تعامل دارند.
• End-to-End Tests: این ابزار به شما اجازه می‌دهد تا تست کنید که چگونه برنامه شما در سناریوهای مختلف کار می‌کند.

نکاتی برای دیباگ و تست ویجت در فلاتر:

• از ابزارهای دیباگ و تست موجود در فلاتر استفاده کنید.
• برنامه خود را به طور کامل تست کنید، از جمله تست‌های واحد، تست‌های ادغام و تست‌های end-to-end.
• از یک چارچوب تست مانند Flutter Driver استفاده کنید.
• از گزارش‌های خطا و stack trace برای پیدا کردن مشکلات برنامه خود استفاده کنید.

کاربرد کلید در ویجت فلاتر چیست؟

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

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

انواع کلید در Flutter:

• Key: یک کلید ساده است که برای تشخیص ویجت‌ها استفاده می‌شود.
• GlobalKey: یک کلید منحصر به فرد در سراسر برنامه است.
• UniqueKey: یک کلید منحصر به فرد است که در هر بار ایجاد یک ویجت جدید تولید می‌شود.

کاربردهای کلید در Flutter:

• حذف ویجت: برای حذف یک ویجت از درخت ویجت، می‌توان از کلید آن ویجت استفاده کرد.
• بارگذاری دوباره ویجت: برای بارگذاری دوباره یک ویجت، می‌توان از کلید آن ویجت استفاده کرد.
• تعیین تغییرات در ویجت: برای تعیین تغییرات در یک ویجت، می‌توان از کلید آن ویجت استفاده کرد.

مثال:

// Create a widget with a unique key
final myWidget = new Text(
‘This is a widget with a unique key’,
key: new UniqueKey(),
);
// Add the widget to the tree
setState(() {
widgets.add(myWidget);
});
// Later, remove the widget from the tree
setState(() {
widgets.remove(myWidget);
});

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

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

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

1. با فریم ورک فلاتر، برای چه سیستم عامل هایی می توان خروجی گرفت؟

تقریبا برای همه OS ها می توان خروجی دقیق گرفت برای مثال، سیستم عامل های IOS , Android , Windows, macOS, Web App.

2. تفاوت فریم ورک با کتابخانه در چیست؟

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

3. کارایی ویجت ها در برنامه های فلاتری چیست؟

ما با قرار دادن ویجت ها، المان های ساختار یک برنامه را برای ارتباط کاربر با برنامه قرار می دهیم.

4. برای استفاده تمام صفحه باید از چه ویجتی استفاده کرد؟

برای اینکه بتوانید یک فضای تمام صفحه در یک اکتیویتی داشته باشید باید از ویجت خارق العاده Safe Area استفاده کنید.

5. چرا با فریم ورک فلاتر می توان در زمان صرفه جویی کرد؟

به دلیل اینکه شما می توانید با یکبار کدنویسی، برای تمام سیستم عامل ها خروجی جذاب و بدون نقص بگیرید.