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

ویجت در فلاتر (Widget in Flutter) مفهومی مهم است که به عنوان سازماندهی اصلی و اجزای متحرک اصلی در برنامه‌های فلاتر مورد استفاده قرار می‌گیرد.

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

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

1. ویجت‌های مبتنی بر مواد(Material-based Widgets): که معمولاً در برنامه‌های طراحی شده برای محیط کاربری اندروید استفاده می‌شوند. مثال‌هایی از این ویجت‌ها عبارت‌اند از: RaisedButton، TextField و Checkbox.
2. ویجت‌های کوچک (Non-Material-based Widgets): که عموماً در برنامه‌های طراحی شده برای iOS استفاده می‌شوند. مثال‌هایی از این ویجت‌ها عبارت‌اند از: CupertinoButton، CupertinoTextField و CupertinoSwitch.

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

ضمیمه 154633

در فلاتر، انواع مختلفی از ویجت‌ها برای ساخت UI وجود دارند که به صورت کلی به دو دسته می‌توان آنها را تقسیم کرد:

1. ویجت‌های مبتنی بر مواد (Material-based Widgets): این ویجت‌ها شامل اجزای UI مرتبط با طراحی مواد است که توسط گوگل برای اندروید طراحی شده‌اند. برخی از ویجت‌های مبتنی بر مواد عبارت‌اند از:

• AppBar: برای نمایش عنوان صفحه و دکمه‌های ناوبری
• FloatingActionButton: برای نمایش دکمه‌های عملیات اصلی
• Card: برای نمایش اطلاعات درون یک جعبه
• ListTile: برای نمایش اطلاعاتی مانند عنوان و توضیحات در فهرست

1. ویجت‌های کوچک (Non-Material-based Widgets): این ویجت‌ها شامل اجزای UI کوچک و ساده‌ای هستند که به صورت پیش‌فرض برای iOS طراحی شده‌اند. برخی از ویجت‌های کوچک عبارت‌اند از:

• CupertinoButton: برای نمایش دکمه‌های iOS شبیه‌سازی شده
• CupertinoTextField: برای نمایش جعبه‌های متنی با سبک iOS
• CupertinoAlertDialog: برای نمایش پیام‌های هشدار در سبک iOS

علاوه بر این دسته‌بندی، در فلاتر ویجت‌هایی وجود دارند که به عنوان اجزای UI سفارشی در برنامه‌ها استفاده می‌شوند. از این ویجت‌ها می‌توان به Container، Image، Text و غیره اشاره کرد. همچنین، در فلاتر می‌توانید با استفاده از ویجت‌های مرتبط با توابع شماره‌گذاری، تقویم و نمودار، اطلاعات گوناگون را نمایش دهید.


در فلاتر، ویجت‌ها را می‌توان از نظر حالت (state) به دو دسته تقسیم کرد:

1. ویجت‌های بدون حالت (Stateless Widgets): این ویجت‌ها شامل ویجت‌هایی هستند که هیچگونه حالت یا داده‌ای را درون خود ذخیره نمی‌کنند و تنها برای نمایش اجزای UI به کار می‌روند. به عبارت دیگر، در صورت تغییر حالت برنامه، این ویجت‌ها هیچ تاثیری بر روی UI نخواهند داشت. برخی از ویجت‌های بدون حالت عبارت‌اند از:

• Text
• Icon
• Image
• IconButton
• RaisedButton
• FlatButton

1. ویجت‌های با حالت (Stateful Widgets): این ویجت‌ها شامل ویجت‌هایی هستند که حالت یا داده‌ای را درون خود ذخیره می‌کنند. هنگامی که حالت یک ویجت تغییر می‌کند، ویجت با مجدد رسم شدن با استفاده از داده‌های جدید، UI را به روز می‌کند. برخی از ویجت‌های با حالت عبارت‌اند از:

• TextField
• CheckBox
• Radio
• Switch
• Slider
• DropdownButton

مهم است که در طراحی صحیح برنامه، ویجت‌های بدون حالت بیشتر به کار بروند زیرا هیچ تاثیری بر روی UI ندارند و اگر UI تغییری نکند، هیچ لازمی به رسم مجدد آنها نیست. همچنین در صورتی که برای نمایش یک UI از ویجت‌های با حالت استفاده شود، مطمئن شوید که تنها داده‌های لازم را در داخل ویجت ذخیره کرده و از تغییر داده‌های غیرلازم خودداری کنید تا کارایی برنامه به حداکثر برسد.



منبع: مرجع فارسی فلاتر , فلاتر چیست؟