Flutter در توسعه موبایل: چیست، مفاهیم کلیدی و چگونه کار می‌کند

Flutter: مبانی Widget، StatelessWidget و StatefulWidget

Widget — توصیف اعلامی بخشی از UI. همه چیز در Flutter یک Widget است: از یک دکمه تا خود برنامه. Widget یک پیکربندی است (خود UI نیست). StatelessWidget — یک Widget تغییرناپذیر. build() یک بار فراخوانی می‌شود. وضعیت ندارد. برای محتوای ایستا استفاده می‌شود. StatefulWidget — یک Widget قابل تغییر. دارای یک شیء State است که می‌تواند تغییر کند. setState() — بازسازی را فعال می‌کند. State — یک شیء قابل تغییر متصل به StatefulWidget. حاوی داده‌هایی است که می‌توانند تغییر کنند.

StatelessWidget در مقابل StatefulWidget

StatelessWidget — build() یک بار فراخوانی می‌شود. مناسب برای هدرها، آیکون‌ها، متون ایستا. StatefulWidget — build() هر بار که setState() فراخوانی می‌شود، صدا زده می‌شود. مناسب برای فرم‌ها، لیست‌های دارای تغییرات، تایمرها. InheritedWidget — ارسال داده به پایین بدون ارسال صریح از طریق سازنده‌ها. Theme، MediaQuery، Navigator — InheritedWidgetها. BuildContext — موقعیت Widget در درخت. context.of<T>، context.watch<T>، context.select<T,R> — دسترسی به InheritedWidget.

// مثال Flutter Widget: StatefulWidget با setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — پیکربندی. StatelessWidget — تغییرناپذیر. StatefulWidget — قابل تغییر با setState(). IT Sectr توصیه می‌کند با StatelessWidget شروع کنید و فقط زمانی که نیاز به وضعیت دارید به StatefulWidget تغییر دهید.

درختان (Widget Tree، Element Tree، RenderObject Tree)

Flutter از سه درخت برای رندرینگ کارآمد استفاده می‌کند. Widget Tree — درخت پیکربندی. Widgetها مکرراً ایجاد می‌شوند (هر build)، سبک هستند. Element Tree — درخت عناصر. یک عنصر برای هر Widget (اگر نوع تغییر نکند). Element — پل بین Widget و RenderObject. RenderObject Tree — درخت رندرینگ. اندازه‌ها، موقعیت‌ها، ترسیم را مدیریت می‌کند. RenderObject — سنگین است، به ندرت ایجاد می‌شود. Flutter Widget Tree را مقایسه کرده و Element Tree را به‌روز می‌کند که باعث به‌روزرسانی RenderObject Tree می‌شود.

Keys و Element Tree

Key — شناسه Widget در Element Tree. ValueKey، ObjectKey، UniqueKey، PageStorageKey. Keyها به Flutter امکان می‌دهند Widgetهای قدیمی و جدید را در هنگام بازسازی تطبیق دهد. بدون Key، Flutter بر اساس نوع Widget و موقعیت تطبیق می‌دهد. GlobalKey — دسترسی به State از Widget دیگر. استفاده برای: فرم‌های پیچیده، انیمیشن‌ها، دسترسی به State در تست‌ها. IT Sectr توصیه می‌کند از Keyها برای لیست‌ها (List.generate) استفاده کنید و از GlobalKey در صورت عدم نیاز خودداری کنید.

Expanded — Widget که فضای موجود را در Row/Column/Flex پر می‌کند. Flexible — پر کردن را اجباری نمی‌کند (می‌تواند کوچک‌تر باشد). MediaQuery — InheritedWidget با اطلاعات دستگاه: اندازه صفحه، جهت، پلتفرم، ضریب مقیاس متن. Theme/ThemeData — تم متمرکز. Theme.of(context) — دسترسی. MaterialApp — Widget ریشه برای پیکربندی مسیریابی، تم‌ها، زبان‌ها. Scaffold — طرح‌بندی پایه با AppBar، Drawer، BottomNavigationBar. AppBar — پنل بالایی.

ناوبری (Navigator، Route)

Navigator — پشته مسیرها (Routes). Navigator.push — باز کردن صفحه (Future برمی‌گرداند). Navigator.pop — بستن (با نتیجه). MaterialPageRoute — انتقال متحرک (اسلاید از راست). Named Routes — شناسه‌های رشته‌ای. onGenerateRoute — مدیریت متمرکز. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — ناوبری اعلامی برای وب، لینک‌های عمیق و سناریوهای پیچیده.

Navigator 2.0

Navigator 2.0 — ناوبری اعلامی. Router — Widget مرکزی. RouteInformationParser — تجزیه URL. RouterDelegate — مدیریت پشته. GoRouter (بسته) — پوشش ساده‌شده روی Navigator 2.0. پشتیبانی می‌کند: مسیرهای نام‌گذاری شده، پارامترها، تغییر مسیر، لینک‌های عمیق. IT Sectr برای اکثر پروژه‌ها GoRouter و فقط برای سناریوهای پیچیده (وب، دسکتاپ) Navigator 2.0 را توصیه می‌کند.

ناهمزمانی (FutureBuilder، StreamBuilder)

FutureBuilder — Widget که UI را بر اساس Future می‌سازد. connectionState: none، waiting، active، done. استفاده برای: درخواست‌های HTTP، خواندن پایگاه داده، تایمرها. StreamBuilder — Widget برای Stream (جریان داده نامحدود). snapshot.data، snapshot.hasError، snapshot.hasData. استفاده برای: WebSocket، Firebase، به‌روزرسانی موقعیت. هر دو Widget هنگام دریافت داده جدید بازسازی می‌شوند.

مدیریت وضعیت

Provider — DI ساده + مدیریت وضعیت. ChangeNotifierProvider، MultiProvider. Riverpod — جایگزین مدرن Provider: امن در کامپایل، مستقل از BuildContext. Bloc — معماری رویدادمحور: Cubit (رویدادهای ساده) در مقابل Bloc (پیچیده). GetX — مدیریت وضعیت سبک + DI + مسیریابی. setState — ساده‌ترین، برای وضعیت محلی. IT Sectr برای پروژه‌های جدید Riverpod و برای پروژه‌های موجود Provider را توصیه می‌کند.

تم‌ها و تطبیق (MediaQuery، ThemeData)

MediaQuery — اندازه صفحه، جهت، پلتفرم، textScaleFactor. MediaQuery.of(context).size.width. ThemeData — تم برنامه: رنگ‌ها، فونت‌ها، اشکال. Theme.of(context).textTheme.bodyLarge. Hot Reload — تزریق کد در برنامه در حال اجرا. وضعیت را حفظ می‌کند. پشتیبانی نمی‌کند: تغییر main()، متغیرهای سراسری، فیلدهای ایستا. Hot Restart — راه‌اندازی مجدد کامل برنامه (از دست رفتن وضعیت). Hot Reload — مزیت اصلی Flutter برای توسعه‌دهندگان.

StatelessWidget — برای محتوای ایستا. StatefulWidget — برای محتوای پویا. InheritedWidget — برای DI. IT Sectr به طور پیش‌فرض StatelessWidget و فقط در صورت نیاز StatefulWidget را توصیه می‌کند.

طرح‌بندی واکنش‌گرا

LayoutBuilder — تطبیق با ابعاد والد. OrientationBuilder — تطبیق با جهت. Expanded در مقابل Flexible — توزیع فضا در Row/Column. MediaQuery — نقاط شکست برای تبلت‌ها و دسکتاپ‌ها. SafeArea — حاشیه از عناصر سیستم ( notch، نوار وضعیت). AspectRatio — حفظ تناسب. IT Sectr برای طرح‌بندی‌های تطبیقی LayoutBuilder و برای جهت افقی OrientationBuilder را توصیه می‌کند.

تست (Widget، Integration، Unit)

تست‌های واحد — تست منطق کسب‌وکار، مخازن، مدل‌ها. dart test — اجرا. تست‌های Widget — تست ویجت‌ها به صورت مجزا. WidgetTester — pumpWidget، tap، enterText. تست‌های یکپارچه — سناریوهای کامل روی دستگاه/شبیه‌ساز واقعی. Mockito — شبیه‌سازی وابستگی‌ها. تست‌های Golden — مقایسه اسکرین‌شات (فایل‌های golden). IT Sectr برای هر صفحه تست Widget و برای منطق کسب‌وکار تست واحد را توصیه می‌کند.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

انیمیشن‌ها (ضمنی، صریح، Hero)

انیمیشن‌های ضمنی — AnimatedContainer، AnimatedOpacity، AnimatedPadding، TweenAnimationBuilder. تغییر ویژگی‌ها به طور خودکار انیمیت می‌شوند. انیمیشن‌های صریح — AnimationController با Tween. forward() / reverse(). انیمیشن Hero — Hero Widget با برچسب — انیمیشن انتقال بین صفحات. انیمیشن پلکانی — زنجیره انیمیشن با Interval. Lottie — ادغام انیمیشن‌های After Effects. Rive — انیمیشن‌های تعاملی (state machine). IT Sectr برای ۸۰٪ موارد AnimatedContainer و برای سناریوهای پیچیده AnimationController را توصیه می‌کند.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

شبکه (http، dio، graphql)

http — کلاینت HTTP ساده (get، post، put، delete). dio — کلاینت پیشرفته با رهگیرها، مهلت‌های زمانی، تلاش مجدد، ثبت وقایع. graphql_flutter — کلاینت GraphQL برای Flutter. json_serializable — تولید از fromJson/toJson از طریق حاشیه‌نویسی. Retrofit Dart — کلاینت HTTP type-safe مانند Retrofit. WebSocket — از طریق web_socket_channel. Firebase — Cloud Firestore، Realtime Database، Cloud Functions. IT Sectr برای REST API dio و برای GraphQL graphql_flutter را توصیه می‌کند.

Flutter DevTools — مجموعه ابزارها: Inspector (درخت ویجت)، Timeline (عملکرد)، Memory، Network، Logging. Profile mode — پروفایل بدون دیباگ. Performance overlay — FPS، زمان‌های build. Flame chart — ردیابی نمودار شعله. DevTools — ابزاری ضروری برای بهینه‌سازی برنامه‌های Flutter در تولید.

Flutter Web — کامپایل Flutter به WASM (WebAssembly). CanvasKit (Skia) در مقابل HTML renderer. CanvasKit — پیکسل کامل، اما سنگین‌تر. HTML renderer — سبک، اما با محدودیت‌ها. WASM (Flutter 3.22+) — عملکرد بومی. تطبیق واکنش‌گرا از طریق LayoutBuilder و MediaQuery. IT Sectr برای برنامه‌های وب دسکتاپ CanvasKit و برای سایت‌های محتوایی HTML renderer را توصیه می‌کند.