ویجت اصلی و مهم در flutter

فلاتر (Flutter) یک فریمورک مدرن برای توسعهٔ اپلیکیشن‌های موبایل، وب و دسکتاپ با زبان Dart است. یکی از قدرتمندی‌های فلاتر، مجموعهٔ غنی از ویجت‌ها (Widgets) است که تقریباً تمام اجزای رابط کاربری را به صورت توکار پوشش می‌دهد. در این مقاله هشت ویجت پایه و کلیدی را معرفی، کاربردها و نمونه کد کوتاهی برای هرکدام ارائه می‌کنیم تا حتی تازه‌کارها هم بتوانند سریع از آن‌ها استفاده کنند.

اگر هنوز فلاتر را نصب نکرده‌اید، راهنمای نصب رسمی ما را در این صفحه ببینید:
https://amooznegar.com/installing-flutter/

اگر می‌خواهید از صفر تا صد فلاتر را با یک دوره آموزشی دنبال کنید، دورهٔ فلاتر آکادمی آموزنگار را ببینید:
https://amooznegar.com/course/flutter/

ویجت ها در فلاتر :

ویجت ها اشیاء سطح بالایی هستند که برای توصیف هر قسمتی از یک برنامه کاربرد دارند. این می تواند باشد اما محدود به عناصر UI مانند دکمه ها نیست. چیدمان (Alignment ، Padding ، …) ؛ Data ها (Theme ، تنظیمات)  و … همه این موارد خود یک ویجت هستند.

1- Scaffold

این ویجت ، ساختار اولیه چیدمان بصری Material Design را پیاده می کند.

Scaffold ساختار پایهٔ صفحه را فراهم می‌کند: AppBar، Drawer، FloatingActionButton، BottomNavigation و بدنهٔ اصلی.

Scaffold(
  appBar: AppBar(title: Text('صفحه نمونه')),
  body: Center(child: Text('سلام فلاتر')),
  floatingActionButton: FloatingActionButton(onPressed: (){}, child: Icon(Icons.add)),
)

2- AppBar

این ویجت یک app bar متریال دیزاین است.

AppBar شامل ToolBar و سایر ویجت های دیگری مانند TabBar و FlexSpaceBar است.

3- Text

این ویجت ، متنی را با یک نوع Style نمایش می دهد.

4- Container

Container یک ویجت چندمنظوره است که می‌تواند اندازه، padding، margin، رنگ، border و چیدمان را کنترل کند. اغلب برای ساخت کارت‌ها، پس‌زمینه‌ها و لایه‌بندی ساده استفاده می‌شود.

نمونه کد:

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [BoxShadow(blurRadius: 6, color: Colors.black12)],
  ),
  child: Text('مثال Container'),
)

5- Column

Layoutو چیدمان لیستی از child widget در جهت عمودی

6- Row

Layout و چیدمان لیستی از child widget در جهت افقی

7- Image

ویجتی که تصویر را نمایش می دهد.

8- ElevatedButton

ElevatedButton یک متریال دیزاین است و قبلا به جای آن از raised button که منسوخ شده استفاده می شد .

از ElevatedButton برای افزودن بُعد به layout‌ های flat استفاده می شود ، به عنوان مثال از این ویجت در فهرست‌های طولانی با محتوای زیاد یا در جای وسیع استفاده می شود. بر روی محتویات already elevated مانند dialog ها  یا  cardها خودداری کنید.

نکات تکمیلی و بهترین روش‌ها (Best practices)

• از ویجت‌های سبک و قابل ترکیب استفاده کنید؛ یک کامپوننت کوچک و مستقل بهتر از ویجت بزرگ با چندین مسئولیت است.
• از const استفاده کنید جایی که ممکن است تا رندرها بهینه‌تر شوند.
• برای لیست‌های بزرگ از ListView.builder یا LazyColumn (در Compose معادل) استفاده کنید تا حافظه مصرفی پایین بیاید.
• UI را تفکیک کنید: صفحه‌ها را به ویجت‌های کوچک تقسیم کنید تا تست و نگهداری آسان شود.
• استفاده از State Management مناسب (Provider, Riverpod, Bloc یا GetX) بسته به مقیاس پروژه اهمیت بالایی دارد.

جمع‌بندی

یادگیری ویجت‌های پایه در فلاتر اساس طراحی رابط کاربری قدرتمند را می‌سازد. با تسلط بر Container، Row/Column، ListView، Stack، Scaffold، TextField، GestureDetector و FutureBuilder می‌توانید اکثر صفحات استاندارد موبایل را پیاده‌سازی کنید.