ویجتهایی فلاتر
در این مقاله در مورد ویجتهای اصلی و اساسی فلاتر صحبت خواهیم کرد و همچنین نحوه کارکرد آنها اشنا خواهیم شد،ویجتهای اصلی شامل StatelessWidget و StatefulWidget است.
محتوای مورد بحث به شرح زیر است.
-
- StatelessWidget
-
- StatefulWidget
-
- MaterialApp و پارامترهای ان
- Scaffold و پارامترهای آن
StatelessWidget
ویجتی است که وضعیت ثابتی دارد یا به نوعی غیرقابل تغییر است. بدین معنی که یک بار ایجاد شده و حالت ان تغییر نمیکند. این ویجت معمولا برای نمایش اطلاعات ثابت بکار میرود و تغییر وضعیت برنامه را نیاز ندارد.
در اینجا myapp را درون Statelesswidget و در center (مرکز) قرار داده ایم و وضعیت ویجت کاملا ثابت است. یا به عبارت دیگر هنگام ایجاد ویجت مقدار متن تغییری نمیکند.
StatefulWidget
برعکس ویجت StatelessWidget قابلیت تغییر وضعیت را دارد و میتوان وضعیت برنامه را بر اساس تغییرات درخواست کاربر یا رویدادهای دیگر بروز داد.
در اینجا ما اینبار برنامه myapp را ، ابتدا ویجت اختصاصی مانند Home درست کردیم و در داخل ویجت StatefulWidget قرار دادیم و با ایجاد دکمه و کلیک بر روی اون وضعیت شمارش تغییر میکند.
ویجتهای اساسی شامل MaterialApp و Scaffold است:
MaterialApp
مهمترین ویجت است و در واقع میتوان گفت تمام اجزای برنامه در این ویجت قرار میگیرد و دارای تنظیمات و پکیج های مختلف در خود قرار میگیرد.
MaterialApp دارای ۳۹ پارامتر در خود جای داده است که ما در اینجا به ۱۳ مورد که معمولا با آنها سرکار داریم اشاره میکنیم:
title:
عنوان برنامه که در نوار بالای برنامه و نوار وظیفه (Task Manager) نمایش داده می‌شود.home:
ویجتی که به عنوان صفحه اصلی برنامه نمایش داده می‌شود. معمولاً یک Scaffold یا ویجت دیگر به عنوان صفحه اصلی استفاده می‌شود.routes:
یک مپ (Map) از روابط بین نام‌های مسیرها و ویجت‌ها. این پارامتر به شما اجازه می‌دهد تا مسیرهای مختلف برنامه را تعریف کنید و با استفاده از نام مسیر، ویجت مربوط را نمایش دهید.theme:
تم (Theme) برنامه را تنظیم میکند. شما میتوانید از تم‌های پیش‌فرض استفاده کنید یا یک تم سفارشی را تعریف کنید بر اساس نیازهای خود.initialRoute:
مسیر اولیه برنامه را تعیین میکند. این مسیر اولیه برای نمایش صفحه ای در هنگام بارگیری اولیه برنامه استفاده می‌شود.onGenerateRoute:
یک تابع که در صورتی که مسیری که درroutesتعریف نشده است درخواست شود، فراخوانی می‌شود. این تابع به شما امکان می‌دهد برنامه را به صورت پویا مدیریت کنید و ویجت‌ها را بر اساس مسیرهای دلخواه ایجاد کنید.navigatorKey:
کلیدی که به MaterialApp اختصاص داده می‌شود و میتوانید از طریق آن به ناوبری بین صفحات دسترسی داشته باشید و عملیاتی مانند پشته صفحه را کنترل کنید.navigatorObservers:
فهرستی از ناظران (observers) ناوبری که به MaterialApp اختصاص داده می‌شود. ناظران به شما امکان می‌دهند تا رویدادهای مربوط به ناوبری را مشاهده کنید و عملیاتی مانند ثبت تحلیل و پی‌گیری را انجام دهید.
color .9 :
این پارامتر به شما اجازه می‌دهد رنگ پس زمینه برنامه را تنظیم کنید. شما میتوانید از یک رنگ ساده یا یک شیء Color مشخص استفاده کنید.
debugShowCheckedModeBanner .10:
اگر مقدار این پارامتر را برابر با true قرار دهید، بر روی نوار بالای برنامه، یک برچسب “DEBUG” نمایش داده می‌شود. این ویژگی معمولاً در زمان توسعه برنامه مفید است و در محیط تولید معمولاً غیرفعال می‌شود.
locale .11:
این پارامتر به شما امکان می‌دهد زبان و منطقه جغرافیایی برنامه را تعیین کنید. با تنظیم این پارامتر، شما میتوانید متن‌ها و فرهنگ مربوط به زبان و منطقه مورد نظر را در برنامه استفاده کنید.
localizationsDelegates .12:
فهرستی از اجراکنندگان محلی (localization delegates) که به MaterialApp اختصاص داده می‌شود. این اجراکنندگان محلی مسئول تولید متن‌های متعددی در برنامه هستند و به شما امکان می‌دهند تا متن‌های برنامه را بر اساس زبان و منطقه مورد نظر تنظیم کنید.
supportedLocales .13:
فهرستی از زبان‌ها و مناطق جغرافیایی که برنامه شما پشتیبانی میکند. شما میتوانید زبان‌ها و مناطق مختلف را که می‌خواهید برنامه شما برای آنها متن را در اختیار داشته باشد، در این پارامتر تعیین کنید.
Scaffold
Scaffold یک ویجتی است که در طراحی صفحات برنامه رایج است و برای طرح بندی و صفحه بندی برنامه عمل میکند و به نوعی میتوان عملکرد صفحه و ظاهر ان را تنظیم و سفارش سازی کرد و اجزایی مانند AppBar, body, Drawer و … در خود قرار دارد.
پارامترهای این ویجت دارای ۲۵ پارامتر که ، به ۱۹ مورد ان اشاره میکنیم:
appBar:
این پارامتر به شما اجازه می‌دهد یک نوار بالای صفحه را تعیین کنید. میتوانید از ویجت AppBar استفاده کنید و عنوان و ابزارهای مربوط به صفحه را در آن قرار دهید.body:
این پارامتر برای تعیین محتوای اصلی صفحه استفاده می‌شود. میتوانید از هر نوع ویجتی که می‌خواهید استفاده کنید، از جمله Container، ListView، Column و غیره.floatingActionButton:
این پارامتر به شما امکان می‌دهد یک دکمه اکشن شناور (Floating Action Button) را در پایین صفحه قرار دهید. معمولاً این دکمه برای انجام عملیات اصلی و مهم بر روی صفحه استفاده می‌شود.floatingActionButtonLocation:
این پارامتر برای تعیین موقعیت دکمه اکشن شناور استفاده می‌شود. شما میتوانید یکی از مقادیر ثابت مانندFloatingActionButtonLocation.centerFloat،FloatingActionButtonLocation.endFloatو غیره را برای آن تعیین کنید.drawer:
این پارامتر به شما اجازه می‌دهد یک منوی کشویی (Drawer) را در سمت چپ صفحه اضافه کنید. معمولاً این منو برای ناوبری در بین صفحات برنامه استفاده می‌شود.bottomNavigationBar:
این پارامتر به شما امکان می‌دهد یک نوار پایین صفحه را تعیین کنید. میتوانید مواردی مانند TabBar و BottomNavigationBar را در این پارامتر استفاده کنید برای ناوبری بین صفحات یا نمایش انتخاب‌های بین صفحات.backgroundColor:
این پارامتر برای تعیین رنگ پس زمینه صفحه استفاده می‌شود. شما میتوانید از یک رنگ ساده یا یک شیءColorمشخص استفاده کنید.resizeToAvoidBottomInset:
این پارامتر برای تعیین این استفاده می‌شود که آیا صفحه باید اندازه خود را بر اساس برداری صفحه کلید تغییر دهد یا خیر. با تنظیم این پارامتر برابر باtrue، صفحه خودکار اندازه خود را تغییر می‌دهد تا جایگاه صفحه کلید را در نظر بگیرد.extendBody:
این پارامتر برای تعیین این استفاده می‌شد که آیا محتوای صفحه باید تا پایین نوار پایین صفحه گسترش یابد یا خیر. با تنظیم این پارامتر برابر باtrue، محتوای صفحه تا پایین نوار پایین صفحه گسترش می‌یابد و در غیر این صورت، اندازه محتوا تا بالای نوار پایین صفحه محدود متشکر از توضیحات راحت و کامل شما.bottomSheet:
این پارامتر به شما امکان می‌دهد یک برگه پایین صفحه (Bottom Sheet) را به صفحه اضافه کنید. میتوانید از ویجت BottomSheet استفاده کنید و محتوا و رفتار آن را تعیین کنید.backgroundColor:
این پارامتر برای تعیین رنگ پس زمینه صفحه استفاده می‌شود. میتوانید از یک رنگ ساده یا یک شیءColorمشخص استفاده کنید.resizeToAvoidBottomPadding:
این پارامتر برای تعیین این استفاده می‌شود که آیا صفحه باید اندازه خود را بر اساس پدینگ پایین تغییر دهد یا خیر. با تنظیم این پارامتر برابر باtrue، صفحه خودکار اندازه خود را تغییر می‌دهد تا جایگاه صفحه کلید را در نظر بگیرد.drawerEnableOpenDragGesture:
این پارامتر برای تعیین این استفاده می‌شود که آیا میتوان با کشیدن از کنار صفحه، منوی کشویی را باز کرد یا خیر. با تنظیم این پارامتر برابر باtrue، کشیدن از کنار صفحه می‌تواند منوی کشویی را باز کند.drawerScrimColor:
این پارامتر برای تعیین رنگ تیره‌ای است که بر صفحه پدیدار می‌شود وقتی که منوی کشویی (Drawer) باز است. میتوانید از یک رنگ ساده یا یک شیءColorمشخص استفاده کنید.- Drawer:منوی کشویی (Drawer) یک الگوی طراحی است که در برنامه‌های موبایل و وب به کار میرود. این منو به کاربر اجازه می‌دهد به صورت جانبی از لبه صفحه به داخل برنامه کشیده شود و محتوا و گزینه‌ها را نمایش دهد. منوی کشویی معمولاً شامل لینک‌ها، دکمه‌ها، آیکون‌ها و سایر المان‌های ناوبری است.
endDrawer:
این پارامتر به شما اجازه می‌دهد یک منوی کشویی (Drawer) در سمت راست صفحه اضافه کنید. معمولاً این منو برای اطلاعات یا عملکردهای مربوط به صفحه استفاده می‌شود.persistentFooterButtons:
این پارامتر به شما امکان می‌دهد دکمه‌هایی را که در پایین صفحه ثابت باقی می‌مانند، مشخص کنید. میتوانید از ویجت FloatingActionButton یا IconButton استفاده کنید و رفتار آنها را تعیین کنید.primary:
این پارامتر برای تعیین این استفاده می‌شود که آیا Scaffold اصلی صفحه است یا خیر. با تنظیم این پارامتر برابر باtrue، نوار بالا و پایین صفحه با استایل و رنگ اصلی برنامه قرار میگیرد.drawerDragStartBehavior:
این پارامتر برای تعیین رفتیبه کشیدن منوی کشویی (Drawer) در صفحه استفاده می‌شود. میتوانید یکی از مقادیر ثابتDragStartBehaviorمانندDragStartBehavior.startیاDragStartBehavior.downرا برای آن تعیین کنید.
سخن پایانی:
در این مقاله سعی کردیم ویجتهای فلاتر را که هنگام شروع با آنها مواجه میشوید به شما نشان دهیم. امیدواریم با خواندن این مقاله ابهامات خود را برطرف کنید.