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

فلاتر یکی از محبوب‌ترین فریمورک‌های توسعه اپلیکیشن است که توسط Google معرفی شده و برای ساخت اپلیکیشن‌های موبایل، وب و دسکتاپ استفاده می‌شود. این فریمورک با استفاده از زبان برنامه‌نویسی Dart امکان توسعه سریع، رابط کاربری زیبا و عملکرد بسیار بالا را فراهم می‌کند.

یکی از مهم‌ترین ویژگی‌های Flutter، معماری کاملاً مبتنی بر ویجت (Widget) است. در فلاتر تقریباً همه‌چیز یک ویجت محسوب می‌شود؛ از متن و دکمه گرفته تا فاصله‌ها، رنگ‌ها، چیدمان‌ها و حتی تنظیمات برنامه.

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

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

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

ویجت در Flutter چیست؟

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

برای مثال:

• متن‌ها
• تصاویر
• دکمه‌ها
• فاصله‌ها
• Layoutها
• انیمیشن‌ها

همگی Widget محسوب می‌شوند.

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

StatelessWidget

ویجت‌هایی که State ندارند و تغییر نمی‌کنند.

StatefulWidget

ویجت‌هایی که امکان تغییر State و بروزرسانی UI را دارند.

1️⃣ Scaffold — ساختار اصلی صفحات

یکی از مهم‌ترین ویجت‌های Flutter، ویجت:
Scaffold

است.

این ویجت ساختار پایه صفحات Material Design را فراهم می‌کند.

با Scaffold می‌توانید:

• AppBar
• Drawer
• BottomNavigation
• FloatingActionButton
• Body

را مدیریت کنید.

مثال Scaffold

Scaffold(
  appBar: AppBar(
    title: Text('صفحه نمونه'),
  ),

  body: Center(
    child: Text('سلام فلاتر'),
  ),

  floatingActionButton:
      FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

2️⃣ AppBar — نوار بالای برنامه

ویجت:
AppBar

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

AppBar معمولاً شامل:

• عنوان صفحه
• آیکن بازگشت
• منوها
• اکشن‌ها

است.

مثال AppBar

AppBar(
  title: Text('صفحه اصلی'),

  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
    )
  ],
)

قابلیت‌های مهم AppBar

• افزودن منو
• جستجو
• TabBar
• تغییر رنگ
• افزودن Action Button

3️⃣ Text — نمایش متن

ویجت:
Text

برای نمایش متن استفاده می‌شود.

مثال Text

Text(
  'سلام Flutter',

  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

ویژگی‌های مهم Text

• تغییر فونت
• رنگ متن
• اندازه فونت
• Bold و Italic
• Alignment

4️⃣ Container — ویجت چندمنظوره

ویجت:
Container

یکی از پرکاربردترین ویجت‌های Flutter است.

Container برای:

• رنگ پس‌زمینه
• Padding
• Margin
• Border
• Radius
• Width و Height

استفاده می‌شود.

مثال Container

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'),
)

چرا Container مهم است؟

تقریباً در تمام UIهای Flutter از Container استفاده می‌شود.

5️⃣ Column — چیدمان عمودی

ویجت:
Column

برای نمایش چند ویجت به‌صورت عمودی استفاده می‌شود.

مثال Column

Column(
  children: [

    Text('آیتم اول'),

    Text('آیتم دوم'),

    ElevatedButton(
      onPressed: () {},
      child: Text('دکمه'),
    ),
  ],
)

ویژگی‌های مهم Column

• alignment
• spacing
• mainAxisAlignment
• crossAxisAlignment

6️⃣ Row — چیدمان افقی

ویجت:
Row

برای نمایش آیتم‌ها به‌صورت افقی استفاده می‌شود.

مثال Row

Row(
  children: [

    Icon(Icons.home),

    Text('خانه'),

    Icon(Icons.settings),
  ],
)

تفاوت Row و Column

7️⃣ Image — نمایش تصاویر

ویجت:
Image

برای نمایش تصاویر استفاده می‌شود.

نمایش تصویر از اینترنت

Image.network(
  'https://example.com/image.jpg',
)

نمایش تصویر از Assets

Image.asset(
  'assets/images/logo.png',
)

نکته مهم

حتماً تصاویر را داخل pubspec.yaml معرفی کنید.

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

8️⃣ ElevatedButton — دکمه مدرن متریال

ویجت:
ElevatedButton

نسخه مدرن دکمه‌های Material Design در Flutter است.

قبلاً از:

• RaisedButton

استفاده می‌شد که اکنون منسوخ شده است.

مثال ElevatedButton

ElevatedButton(

  onPressed: () {

    print('Clicked');

  },

  child: Text('ثبت'),
)

شخصی‌سازی دکمه

ElevatedButton(

  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.all(16),
  ),

  onPressed: () {},

  child: Text('ورود'),
)

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

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

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

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

ویجت‌های مهم دیگری که باید یاد بگیرید

بعد از این ویجت‌ها بهتر است با موارد زیر آشنا شوید:

• Stack
• Expanded
• ListView
• GridView
• GestureDetector
• FutureBuilder
• StreamBuilder
• Navigator

جمع‌بندی

در Flutter همه‌چیز بر پایه Widget ساخته شده است. یادگیری ویجت‌های پایه مثل:

• Scaffold
• AppBar
• Text
• Container
• Row
• Column
• Image
• ElevatedButton

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