Flutter — مفاهیم کلیدی، معماری و ویجت‌ها

Flutter چیست

Flutter یک SDK (کیت توسعه نرم‌افزار) و فریم‌ورک برای ایجاد رابط‌های کاربری است که توسط گوگل در سال ۲۰۱۵ معرفی شد. اولین نسخه پایدار Flutter 1.0 در دسامبر ۲۰۱۸ منتشر شد. بر خلاف React Native، Flutter از پل بین JavaScript و کد بومی استفاده نمی‌کند — مستقیماً به دستورالعمل‌های بومی پردازنده کامپایل می‌شود.

ویژگی کلیدی Flutter موتور رندرینگ اختصاصی آن است. این فریم‌ورک به UIKit (iOS) یا سیستم View اندروید متکی نیست. در عوض Flutter هر پیکسل را به طور مستقل از طریق Skia (تا سال ۲۰۲۴) یا موتور جدید Impeller رسم می‌کند. این ظاهر یکسان برنامه را در semua پلتفرم‌ها تضمین می‌کند و مشکلات سازگاری با نسخه‌های مختلف سیستم‌عامل را برطرف می‌کند.

بر اساس داده‌های Statista 2024، Flutter از نظر محبوبیت در میان فریم‌ورک‌های کراس پلتفرم رتبه اول را دارد: حدود ۴۶٪ توسعه‌دهندگان از آن برای توسعه موبایل استفاده می‌کنند. این فریم‌ورک در پروژه‌های Google Pay، Alibaba، eBay، BMW و Tencent به کار گرفته می‌شود.

تاریخچه و نسخه‌های Flutter

اولین نسخه آلفای Flutter در Dart Developer Summit در سال ۲۰۱۵ با نام Sky معرفی شد. در سال ۲۰۱۸ Flutter 1.0 با پشتیبانی فقط از iOS و Android منتشر شد. Flutter 2.0 (۲۰۲۱) پشتیبانی از Web و Desktop را اضافه کرد. Flutter 3.0 (۲۰۲۲) پشتیبانی پایدار از macOS و Linux را معرفی کرد. Flutter 3.16 (۲۰۲۳) Impeller — موتور رندرینگ جدید مبتنی بر Metal و Vulkan را معرفی کرد.

نسخه Flutter 3.22 (۲۰۲۴) شامل Impeller به‌طور پیش‌فرض در iOS، پشتیبانی بهبودیافته از Material Design 3، Dart 3.4 با توسعه‌دهنده‌های ماکرو و پشتیبانی داخلی از Native Assets برای دسترسی مستقیم به منابع پلتفرم است. گوگل گزارش می‌دهد که Impeller افت فریم (jank) را در مقایسه با Skia تا ۹۰٪ کاهش می‌دهد.

زبان Dart

Dart یک زبان برنامه‌نویسی است که توسط گوگل در سال ۲۰۱۱ ایجاد شده و در Flutter استفاده می‌شود. Dart تایپ‌دهی دقیق را با قابلیت‌های کامپایل JIT (برای Hot Reload) و کامپایل AOT (برای نسخه‌های نهایی) ترکیب می‌کند. نسخه Dart 3.0 (۲۰۲۳) pattern matching، sealed class و records را به عنوان قابلیت‌های پایدار معرفی کرد.

Null safety در Dart — یک قابلیت اجباری است که از نسخه ۲.۱۲ معرفی شده است. کامپایلر semua نوع‌های nullable را در مرحله ساخت بررسی می‌کند و NullPointerException را در زمان اجرا حذف می‌کند. انواع داده (int, String, bool) به‌طور پیش‌فرض non-nullable هستند و برای مقادیر nullable از پسوند ? استفاده می‌شود (مثلاً String? name).

معماری Flutter

معماری Flutter بر اساس اصل سه لایه ساخته شده است. لایه پایین — موتور (C/C++)، مسئول رندرینگ، ورودی/خروجی و دسترسی به APIهای پلتفرم. لایه میانی — فریم‌ورک (Dart)، پیاده‌سازی سیستم ویجت‌ها، ژست‌ها، انیمیشن‌ها و ناوبری. لایه بالایی — برنامه (Dart) که ویجت‌ها را در یک درخت جمع می‌کند.

ویجت‌ها و درخت ویجت

در Flutter همه چیز یک ویجت است. ویجت‌ها دو نوع هستند: StatelessWidget (تغییرناپذیر، وضعیت را ذخیره نمی‌کند) و StatefulWidget (تغییرپذیر، وضعیت را از طریق State مدیریت می‌کند). درخت ویجت (Widget Tree) یک ساختار سلسله‌مراتبی است که در آن هر ویجت فرزند در والد خود قرار می‌گیرد. Scaffold، AppBar، Container، Text، Column، Row — بلوک‌های ساختمانی پایه هستند.

BuildContext یک شیء است که موقعیت ویجت را در درخت منتقل می‌کند. MediaQuery.of(context) اندازه‌های صفحه را دریافت می‌کند، Theme.of(context) — تم طراحی فعلی را. BuildContext برای ناوبری (Navigator.of(context))، دسترسی به InheritedWidget و ترجمه locale از طریق Localizations.of استفاده می‌شود.

موتور Impeller

Impeller یک موتور رندرینگ مدرن Flutter است که به زبان C++ نوشته شده و از Metal (iOS/macOS) و Vulkan (Android) استفاده می‌کند. بر خلاف Skia که هر فریم را از صفر بازرسم می‌کرد، Impeller شیدرها را از قبل کامپایل می‌کند و آنها را در حافظه پنهان ذخیره می‌کند. این کار تأخیر در اولین رندرینگ صحنه‌های پیچیده را حذف می‌کند و بار GPU را کاهش می‌دهد.

آزمایش‌های Google Flutter Team نشان می‌دهد که Impeller زمان کامپایل شیدر را از ۲۰۰–۵۰۰ میلی‌ثانیه (Skia) به ۱–۳ میلی‌ثانیه کاهش می‌دهد. در iPhone 13 Pro، رندرینگ Impeller به ۱۲۰ FPS بدون افت فریم می‌رسد. در Android با Vulkan، ۶۰ FPS پایدار حتی در دستگاه‌های میان‌رده (Xiaomi Redmi Note 12).

نمونه برنامه در Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('برنامه Flutter')),
        body: const Center(
          child: Text('سلام، Flutter!'),
        ),
      ),
    );
  }
}

مزایای Flutter

پایگاه کد واحد — مزیت اصلی Flutter است. یک پروژه به زبان Dart برای iOS، Android، Web، Windows، macOS و Linux کامپایل می‌شود. بر اساس برآورد گوگل، این زمان توسعه را ۳۰–۵۰٪ در مقایسه با پروژه‌های جداگانه iOS و Android کاهش می‌دهد. Alibaba زمان انتشار نسخه‌ها را پس از انتقال به Flutter ۳۰٪ کاهش داد.

عملکرد Flutter به بومی نزدیک است. کامپایل AOT Dart به کد ماشین ARM و x86_64 تأخیرهای تفسیر را حذف می‌کند. موتور Impeller ۶۰ FPS را حتی در دستگاه‌های سال ۲۰۱۸ (iPhone XR، Samsung Galaxy S9) تضمین می‌کند. به گفته گوگل، ۹۹.۵٪ فریم‌ها در برنامه‌های Flutter بدون افت رندر می‌شوند.

Hot Reload — فناوری به‌روزرسانی آنی کد. توسعه‌دهنده کد منبع را تغییر می‌دهد، فایل را ذخیره می‌کند و Flutter درخت ویجت را در ۳۰۰–۸۰۰ میلی‌ثانیه بدون از دست دادن وضعیت فعلی برنامه بازسازی می‌کند. این کار تکرارهای طراحی UI را سرعت می‌بخشد: می‌توان حاشیه‌ها، رنگ‌ها و انیمیشن‌ها را در ثانیه تغییر داد بدون اینکه منتظر بازسازی کامل ماند.

Material Design 3 و زبان طراحی اختصاصی Cupertino (سبک iOS) در بسته استاندارد Flutter گنجانده شده‌اند. ویجت‌های Material 3 از رنگ‌های پویا (Material You)، چیدمان تطبیق‌پذیر و انیمیشن انتقال بین صفحه‌ها پشتیبانی می‌کنند. CupertinoPageTransition و CupertinoNavigationBar رفتار ناوبر بومی iOS را تقلید می‌کنند.

سفارشی‌سازی ویجت‌ها نیاز به ایجاد View سفارشی در هر پلتفرم ندارد. کافی است build() را بازنویسی کرده و یک ویجت جدید برگردانید. بسته‌های animation (AnimatedContainer, Hero, TweenAnimationBuilder) و gesture (GestureDetector, Dismissible) ۹۵٪ سناریوهای انیمیشن UI را بدون نوشتن کد پلتفرم پوشش می‌دهند.

اکوسیستم و بسته‌های Flutter

pub.dev — مخزن رسمی بسته‌ها برای Dart و Flutter. تا جولای ۲۰۲۴، بیش از ۴۵۰۰۰ بسته در مخزن منتشر شده است. نصب بسته با دستور flutter pub add <نام_بسته> انجام می‌شود. Pub به‌طور خودکار وابستگی‌ها را حل می‌کند، سازگاری نسخه‌ها را بررسی می‌کند و pubspec.lock را تولید می‌کند.

مدیریت وضعیت در Flutter — یکی از وظایف کلیدی معماری. علاوه بر flutter_bloc، راه‌حل‌های محبوب: Provider (توصیه شده توسط گوگل، از InheritedWidget استفاده می‌کند)، Riverpod (نسخه بازنویسی شده Provider با ایمنی زمان کامپایل) و GetX (همه‌در-یک: وضعیت، مسیریابی، DI). Provider ساده‌ترین برای شروع باقی می‌ماند: ChangeNotifierProvider مدل را می‌پیچد و Consumer ویجت را هنگام تغییر داده بازرسم می‌کند.

تست در Flutter در سه سطح پشتیبانی می‌شود. تست‌های واحد (flutter test) توابع و کلاس‌ها را بدون UI بررسی می‌کنند. تست‌های ویجت (testWidgets) ویجت‌های جداگانه را در محیط ایزوله رندر می‌کنند. تست‌های یکپارچه‌سازی (IntegrationTest) برنامه کامل را روی دستگاه یا شبیه‌ساز اجرا می‌کنند. Flutter 3.22 پشتیبانی از تست‌های وصله (patch tests) را از طریق تحلیل وصله و گزارش بهبود یافته پوشش کد اضافه کرد.

بسته‌های محبوب

dio — کلاینت HTTP با پشتیبانی از interceptors، timeouts و FormData. در ۴۰٪ پروژه‌های Flutter در GitHub استفاده می‌شود. Dio از رهگیری درخواست‌ها برای ثبت‌نام، تلاش مجدد و افزودن توکن‌های احراز هویت پشتیبانی می‌کند. دومین کتابخانه محبوب — retrofit، کلاینت‌های API تایپ‌شده تولید می‌کند.

flutter_bloc — کتابخانه مدیریت وضعیت مبتنی بر الگوی BLoC (Business Logic Component). BlocProvider وضعیت‌ها را به پایین درخت ویجت منتقل می‌کند، BlocBuilder UI را هنگام تغییر وضعیت بازرسم می‌کند و BlocListener اثرات جانبی (ناوبری، SnackBar) را انجام می‌دهد. Cubet — نسخه ساده‌شده BLoC بدون رویدادها.

go_router — ناوبری اعلانی برای Flutter از گوگل. مسیرها در پیکربندی GoRouter با پشتیبانی از مسیرهای تو در تو، تغییر مسیرها و deep links توصیف می‌شوند. ShellRoute ناوبری را به تب‌های BottomNavigationBar تقسیم می‌کند. GoRouter 14.0 از مسیرهای type-safe و StatefulShellRoute با حفظ وضعیت تب‌ها پشتیبانی می‌کند.