Flutter Widgets — این چیست، درخت ویجت و build

Flutter Widgets چیست؟

Flutter Widgets — همه المان‌های UI در چارچوب Flutter هستند که به عنوان کلاس‌های Dart تغییرناپذیر (immutable) پیاده‌سازی شده‌اند. ویجت پیکربندی از یک المان UI است: اندازه، رنگ، موقعیت، توابع رویدادگر. بر خلاف Android (XML + View) یا iOS (Storyboard + UIView)، Flutter از ماژول‌های سیستم‌عامل استفاده نمی‌کند — همه چیز توسط موتور Skia (Android/iOS/Linux) یا Impeller (iOS/macOS) روی Canvas رسم می‌شود. این ظاهر یکسانی را در تمام سیستم‌عامل‌ها بدون تفاوت‌های سیستم‌عاملی تضمین می‌کند. Flutter با دو مجموعه ویجت ارائه می‌شود: Material Widgets (طراحی Google Material Design 3 برای Android/Web) و Cupertino Widgets (طراحی Apple HIG برای iOS/macOS). توسعه‌دهنده می‌تواند هر دو مجموعه را در یک برنامه ترکیب کند. هر ویجت روش build() را دارد که یک ویجت فرعی یا ترکیبی از آنها را بازمی‌گرداند — درخت ویجت‌ها به این طریق ساخته می‌شود.

سه درخت Flutter

Flutter با سه درخت کار می‌کند: Widget Tree (پیکربندی، توسط توسعه‌دهنده ایجاد می‌شود)، Element Tree (ابزار مقابل ویجت با موقعیت در درخت، مدیریت توسط چارچوب)، Render Tree (شئ‌هایی که layout را محاسبه و paint را انجام می‌دهند). Widget Element را ایجاد می‌کند که RenderObject را ایجاد می‌کند. Element در زمان تغییر پیکربندی (rebuild) مجدداً استفاده می‌شود — این مکانیسم بهینه‌سازی Flutter است: اگر نوع ویجت و key یکسان باشند، Element مجدداً ایجاد نمی‌شود، بلکه پیکربندی جدید به‌روز می‌شود. درک سه درخت کلید بهینه‌سازی عملکرد برنامه‌های Flutter است.

StatelessWidget: ویجت‌های تغییرناپذیر

StatelessWidget — ویجتی که وضعیت داخلی ذخیره نمی‌کند. پارامترها را از طریق سازنده می‌پذیرد و آنها را بدون امکان تغییر پس از ساخت نمایش می‌دهد. StatelessWidget برای عناصر استاتیک ایده‌آل است: عناوین، آیکون‌ها، آواتارها، لیست‌های با داده‌های ثابت. روش build() یک بار در زمان ایجاد و در زمان تغییر ویجت والد فراخوانده می‌شود. از آنجا که StatelessWidget وضعیتی ندارد، به شئ‌ء State جداگانه نیاز ندارد — build() مستقیماً در کلاس ویجت تعریف شده است.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — StatelessWidgetی است که name و avatarUrl را از طریق سازنده می‌پذیرد. CircleAvatar آواتار و Text نام را نمایش می‌دهد. ویجت نمی‌تواند این مقادیر را پس از ایجاد تغییر دهد. استفاده از سازنده const (const ProfileHeader) به Flutter اجازه می‌دهد در زمان rebuild والد از نمونه ویجت مجدداً استفاده کند — این یک ریزبهینه‌سازی است که برای همه StatelessWidget توصیه می‌شود.

StatefulWidget: ویجت‌های با وضعیت

StatefulWidget — ویجتی با وضعیت تغییرپذیر که در شئ‌ء State جداگانه ذخیره می‌شود. خود StatefulWidget مانند StatelessWidget تغییرناپذیر (immutable) است. بخش تغییرپذیر در State جا گذاشته شده است: State — شئ‌ای که یک بار ایجاد شده و از rebuildهای متعدد ویجت جان سالم به در می‌آید. وقتی وضعیت تغییر می‌کند (setState())، Flutter روش build() State را فراخوانده و UI را به‌روز می‌کند. StatefulWidget برای عناصر تعاملی استفاده می‌شود: شمارنده‌ها، فیلدهای متنی، کادرهای واردادی، انیمیشن‌ها، تایمرها.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — StatefulWidget با کلاس State گیرندگی _LikeButtonState. خواص liked و count وضعیتی هستند که در State ذخیره می‌شوند و در rebuild بازنشسته نمی‌شوند. setState() به Flutter اطلاع می‌دهد که UI را بازسازی کند. Flutter State را در هر rebuild والد مجدداً ایجاد نمی‌کند — تنها در زمان تغییر پیکربندی (key یا نوع ویجت). در IT Sectr ما از StatelessWidget برای نمایش و از StatefulWidget برای کامپوننت‌های تعاملی استفاده می‌کنیم، با پیروی از اصل کاهش StatefulWidget تا حدود تغییر.

درخت ویجت‌ها: از Widget تا RenderObject

Widget Tree — ساختار سلسله‌مراتبی ویجت‌هایی که UI برنامه را توصیف می‌کند. Flutter Widget Tree را به Element Tree تبدیل می‌کند: هر Widget یک Element ایجاد می‌کند که موقعیت در درخت و ارتباط با RenderObject را پیگیری می‌کند. Render Tree layout (تعیین اندازه و موقعیت) و paint (رسم) را انجام می‌دهد. Element لایه کلیدی بهینه‌سازی است: اگر نوع ویجت و key در rebuild تغییر نکرده باشند، Element مجدداً استفاده می‌شود و پیکربندی را بدون ایجاد مجدد RenderObject به‌روز می‌کند. این عملکرد Flutter را در فرکانس بالای کادر (60/120 FPS) تضمین می‌کند.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'سلام، Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

درخت ویجت HomeScreen: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — ویجت layout اصلی Material Design. Center ویجت فرعی Column را وسط چین می‌کند. Column فرزندان را به صورت عمودی با تراز وسط (mainAxisAlignment.center) جایگذاری می‌کند. Flutter layout را از بالا به پایین (constraints از والد انتقال می‌یابند) و اندازه‌ها را از پایین به بالا (sizedByParent یا sizing from children) محاسبه می‌کند.

BuildContext: زمینه ساخت و دسترسی به درخت

BuildContext — دسکریپتور موقعیت ویجت در Element Tree. هر روش build() BuildContext را دریافت می‌کند که از طریق آن ویجت می‌تواند به موارد زیر دسترسی داشته باشد: MediaQuery (اندازه صفحه، جهت‌گیری، تراکم پیکسل، ناحیه امن), Theme (MaterialThemeData یا CupertinoThemeData), Navigator (پیشکه ناوبری), ScaffoldMessenger (SnackBar), InheritedWidget (انتقال داده به پایین درخت). BuildContext نباید پس از پایان build() ذخیره شود یا خارج از زمینه همگام استفاده شود — این به خطاهای «Scaffold.of() called with a context that does not contain a Scaffold» منجر می‌شود. به جای ذخیره context، از ویجت Builder یا الگوی InheritedWidget برای دسترسی به داده‌ها استفاده کنید.

Key: شناسایی ویجت در درخت

Key — پارامتر اختیاری سازنده هر ویجت (super.key). Key به Flutter در زمان تغییر ترتیب/تعداد عناصر در لیست در شناسایی ویجت کمک می‌کند. بدون key، Flutter ویجت‌ها را بر اساس نوع و موقعیت مقایسه می‌کند؛ در زمان افزودن عنصر به وسط لیست بدون key، Flutter از Element برای ویجت اشتباه مجدداً استفاده می‌کند و باعث خطاهای وضعیت (StatefulWidget) و انیمیشن می‌شود. برای لیست‌ها از ValueKey (شناسه یکتا)، ObjectKeyUniqueKey