مقدمه و نصب Flutter

۱.۱ مقدمه

Flutter یک Framework متن‌باز از Google است که با یک کدبیس واحد، اپلیکیشن‌های زیبا و بومی برای Android، iOS، Web، Windows، macOS و Linux می‌سازد. در این فصل با Flutter آشنا می‌شویم و محیط توسعه را آماده می‌کنیم.

۱.۲ Flutter چیست؟

Flutter یک UI toolkit برای ساخت اپلیکیشن‌های native compiled برای موبایل، وب و دسکتاپ است. ویژگی‌های کلیدی آن:

• Cross-platform: یک کد، ۶ پلتفرم (Android، iOS، Web، Windows، macOS، Linux)
• Native Performance: compile به native ARM/x64 — نه interpreter
• Hot Reload: تغییرات کد را در کمتر از یک ثانیه می‌بینید
• Beautiful UI: Material Design و Cupertino به‌صورت built-in
• Rich Widgets: صدها widget آماده، fully customizable
• Open Source: توسط Google توسعه و توسط جامعه پشتیبانی می‌شود

Flutter از چه ساخته شده است؟

┌─────────────────────────────────────────┐
│         Your Application (Dart)          │
├─────────────────────────────────────────┤
│      Flutter Framework (Dart)            │
│  - Material / Cupertino widgets         │
│  - Widgets, Rendering, Animation        │
│  - Foundation                           │
├─────────────────────────────────────────┤
│      Flutter Engine (C/C++)              │
│  - Skia / Impeller (rendering)          │
│  - Dart VM                              │
│  - Text, Layout, Platform Channels      │
├─────────────────────────────────────────┤
│       Embedder (platform-specific)       │
│  Android (Java/Kotlin) │ iOS (Swift)    │
└─────────────────────────────────────────┘
    

۱.۳ Flutter در مقابل سایر Framework ها

چه زمانی Flutter انتخاب درستی است؟

• ✅ MVP و startup که سرعت توسعه مهم است
• ✅ پروژه‌هایی که UI زیبا و یکپارچه می‌خواهند
• ✅ تیم کوچک که می‌خواهد به جای ۲ تیم Android/iOS، یک تیم داشته باشد
• ✅ اپ‌های B2B (مثل Apadana) که UI سفارشی نیاز دارند
• ✅ بازی‌های ساده ۲D و اپ‌های تعاملی
• ✅ توسعه به Web و Desktop در آینده

چه زمانی Flutter انتخاب مناسبی نیست؟

• ❌ بازی‌های ۳D پیچیده (Unity/Unreal بهتر است)
• ❌ اپ‌هایی که نیاز شدید به native API دارند
• ❌ Bundle size خیلی کوچک حیاتی است
• ❌ Apple Watch و Android Wear (پشتیبانی محدود)

۱.۴ شرکت‌های موفق با Flutter

۱.۵ نصب Flutter SDK

گام ۱: دانلود Flutter SDK

به سایت رسمی Flutter بروید و آخرین نسخه SDK را دانلود کنید:

https://docs.flutter.dev/get-started/install

نصب در Windows

# 1. فایل ZIP دانلود شده را در مسیر زیر extract کنید:
#    C:devflutter
#    (از Program Files استفاده نکنید چون نیاز به admin دارد)

# 2. مسیر را به PATH اضافه کنید:
#    Control Panel → System → Advanced → Environment Variables
#    PATH: C:devflutterbin

# 3. در PowerShell جدید:
flutter --version

# نمونه خروجی:
# Flutter 3.27.0 • channel stable
# Framework • revision abc123 (1 day ago)
# Engine • revision def456
# Tools • Dart 3.6.0 • DevTools 2.40.0
    

نصب در macOS

# با Homebrew (راحت‌ترین روش)
brew install --cask flutter

# یا دانلود دستی
mkdir -p ~/dev
cd ~/dev
unzip ~/Downloads/flutter_macos_arm64_3.27.0-stable.zip

# اضافه کردن به PATH (در ~/.zshrc یا ~/.bash_profile)
echo "export PATH=$PATH:$HOME/dev/flutter/bin" >> ~/.zshrc
source ~/.zshrc

# تست
flutter --version
    

نصب در Linux (Ubuntu/Debian)

# با snap
sudo snap install flutter --classic

# یا دانلود دستی
mkdir -p ~/dev
cd ~/dev
tar xf ~/Downloads/flutter_linux_3.27.0-stable.tar.xz

# اضافه کردن به PATH
echo "export PATH=$PATH:$HOME/dev/flutter/bin" >> ~/.bashrc
source ~/.bashrc

# نصب dependency های لازم
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

flutter --version
    

گام ۲: اجرای flutter doctor

این دستور وضعیت نصب شما را بررسی می‌کند:

flutter doctor

# نمونه خروجی:
# Doctor summary (to see all details, run flutter doctor -v):
# [✓] Flutter (Channel stable, 3.27.0, on Microsoft Windows)
# [✓] Windows Version (Installed version of Windows is version 10 or higher)
# [✗] Android toolchain - develop for Android devices
#     ✗ Unable to locate Android SDK.
# [✓] Chrome - develop for the web
# [✓] Visual Studio - develop Windows apps
# [✗] Android Studio (not installed)
# [✓] VS Code (version 1.95.0)
# [✓] Connected device (3 available)
# [✓] Network resources

# سپس مشکلاتی که با [✗] مشخص شده‌اند را رفع کنید
    

گام ۳: نصب Android Studio

برای توسعه Android، Android Studio نیاز است:

دانلود از: https://developer.android.com/studio

# پس از نصب، Plugin های لازم را نصب کنید:
# Android Studio → Settings → Plugins
# - Flutter
# - Dart
# (Dart با Flutter به‌صورت خودکار نصب می‌شود)

# پذیرش لایسنس‌های Android
flutter doctor --android-licenses
# همه را با y قبول کنید
    

گام ۴: نصب VS Code (اختیاری ولی توصیه شده)

# دانلود VS Code از https://code.visualstudio.com/

# نصب extension های ضروری:
# 1. Flutter (توسط Dart Code)
# 2. Dart
# 3. Awesome Flutter Snippets (اختیاری)
# 4. Pubspec Assist (اختیاری)
    

۱.۶ اولین اپلیکیشن Flutter

گام ۱: ساخت پروژه

# ساخت پروژه جدید
flutter create my_first_app

# ورود به پوشه پروژه
cd my_first_app

# دیدن ساختار پروژه
ls -la
    

ساختار پروژه Flutter

my_first_app/
├── android/                  # کد native Android (Java/Kotlin)
├── ios/                      # کد native iOS (Swift/Obj-C)
├── web/                      # برای Flutter Web
├── windows/                  # Windows desktop
├── macos/                    # macOS desktop
├── linux/                    # Linux desktop
├── lib/
│   └── main.dart            # ⭐ نقطه ورود اصلی برنامه
├── test/
│   └── widget_test.dart     # تست‌ها
├── pubspec.yaml             # ⭐ فایل dependency ها (مثل package.json)
├── pubspec.lock             # نسخه‌های دقیق
├── analysis_options.yaml    # تنظیمات linter
├── .gitignore
└── README.md
    

گام ۲: اجرای پروژه

# دیدن دستگاه‌های متصل
flutter devices

# اجرای اپ روی emulator یا دستگاه
flutter run

# اجرا روی Chrome (Web)
flutter run -d chrome

# اجرا روی Windows
flutter run -d windows

# هنگام اجرا، در ترمینال:
# r = Hot Reload
# R = Hot Restart
# q = Quit
# h = Help
    

کد main.dart پیش‌فرض

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(
      title: 'اپ اول من',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'صفحه اصلی'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('شما این دکمه را به این تعداد فشار داده‌اید:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'افزایش',
        child: const Icon(Icons.add),
      ),
    );
  }
}
    

تشریح کد

• main(): نقطه ورود برنامه (مثل main در C/Java)
• runApp(): شروع اپ Flutter با یک Widget root
• MaterialApp: container اصلی اپ با تم Material Design
• Scaffold: ساختار صفحه (AppBar، Body، FAB)
• StatefulWidget: Widget با state قابل تغییر
• setState(): notify Flutter که UI باید rebuild شود

۱.۷ Hot Reload — قابلیت طلایی Flutter

Hot Reload یکی از مهم‌ترین مزیت‌های Flutter است. تغییرات در کد را در کمتر از یک ثانیه روی اپ در حال اجرا می‌بینید — بدون از دست دادن state.

تفاوت Hot Reload و Hot Restart

چه زمانی Hot Reload کار نمی‌کند؟

• تغییر در main()
• تغییر در state initial
• تغییر در native code (Android/iOS)
• اضافه/حذف dependency در pubspec.yaml

۱.۸ فایل pubspec.yaml

این فایل قلب پروژه Flutter است. مثل package.json در Node.js یا requirements.txt در Python.

name: my_first_app
description: یک اپ ساده Flutter
publish_to: "none"  # چون منتشر نمی‌کنیم به pub.dev

# Versioning: major.minor.patch+build
version: 1.0.0+1

environment:
  sdk: ">=3.6.0 <4.0.0"
  flutter: ">=3.27.0"

dependencies:
  flutter:
    sdk: flutter
  
  # آیکون‌های Cupertino (iOS)
  cupertino_icons: ^1.0.8
  
  # Package های شخص ثالث
  http: ^1.2.0
  provider: ^6.1.2
  shared_preferences: ^2.3.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0

flutter:
  # استفاده از Material Icons
  uses-material-design: true
  
  # Asset ها (تصاویر، فونت‌ها، فایل‌های متنی)
  assets:
    - assets/images/
    - assets/icons/
  
  # فونت‌های سفارشی
  fonts:
    - family: Vazirmatn
      fonts:
        - asset: assets/fonts/Vazirmatn-Regular.ttf
        - asset: assets/fonts/Vazirmatn-Bold.ttf
          weight: 700
    

دستورات pubspec

# نصب package های جدید
flutter pub add http
flutter pub add provider

# نصب package به عنوان dev
flutter pub add --dev mocktail

# update همه package ها
flutter pub upgrade

# دریافت dependency ها (مشابه npm install)
flutter pub get

# بررسی outdated packages
flutter pub outdated

# حذف package
flutter pub remove provider
    

۱.۹ دستورات کاربردی Flutter CLI

# ساخت پروژه
flutter create my_app
flutter create --org com.icsd my_app  # با package name سفارشی
flutter create --template=plugin my_plugin  # ساخت plugin

# اجرا
flutter run                           # روی پیش‌فرض
flutter run -d chrome                 # روی Chrome
flutter run --release                 # release mode (سریع‌تر)
flutter run --profile                 # برای performance profiling

# Build
flutter build apk                     # APK برای Android
flutter build apk --split-per-abi     # APK جداگانه برای هر معماری
flutter build appbundle               # AAB برای Play Store
flutter build ios                     # iOS
flutter build web                     # Web
flutter build windows                 # Windows

# Clean (پاک کردن build cache)
flutter clean

# تست
flutter test                          # اجرای تست‌ها
flutter test --coverage               # با coverage

# تجزیه و تحلیل کد
flutter analyze                       # lint + type check
dart format lib/                      # فرمت کد

# Doctor (بررسی محیط)
flutter doctor
flutter doctor -v                     # verbose

# Devices
flutter devices                       # دستگاه‌های متصل
flutter emulators                     # لیست emulator ها
flutter emulators --launch Pixel_7    # اجرای emulator

# Channel (stable, beta, dev, master)
flutter channel                       # نمایش channel فعلی
flutter channel stable                # تغییر به stable
flutter upgrade                       # به‌روزرسانی Flutter

# DevTools
flutter pub global activate devtools
dart devtools
    

۱.۱۰ IDE — VS Code یا Android Studio؟

میانبرهای مفید VS Code

Ctrl + Shift + P    Command Palette
Ctrl + .            Quick Fix (مثل اضافه کردن import خودکار)
F5                  شروع debug
Ctrl + F5           Run بدون debug
Shift + Alt + F     Format کد
F12                 Go to Definition
Shift + F12         Find References
Ctrl + Shift + R    Refactor
Ctrl + B            Toggle Sidebar
Ctrl + `            Toggle Terminal
    

Snippet های مفید

stless    →  StatelessWidget کامل
stful     →  StatefulWidget کامل
mateApp   →  MaterialApp boilerplate
build     →  build method
fori      →  for loop
foreach   →  for-each loop
    

۱.۱۱ راه‌اندازی Emulator

Android Emulator

# باز کردن AVD Manager از Android Studio:
# Tools → Device Manager → Create Device

# یا از command line:
flutter emulators
flutter emulators --create --name Pixel_7
flutter emulators --launch Pixel_7
    

iOS Simulator (فقط macOS)

# باز کردن simulator
open -a Simulator

# یا از Xcode:
# Xcode → Open Developer Tool → Simulator
    

دستگاه فیزیکی

Android:

1. Settings → About Phone → ۷ بار روی Build Number ضربه بزنید
2. Settings → Developer Options → USB Debugging را فعال کنید
3. دستگاه را با USB متصل کنید و trust را بپذیرید
4. flutter devices برای تأیید

iOS:

1. Apple Developer Account (رایگان برای تست)
2. دستگاه را با Mac متصل کنید
3. در Xcode، signing را تنظیم کنید
4. flutter run

۱.۱۲ توصیه‌هایی برای شروع

1. با چیزهای ساده شروع کنید. اول counter app، بعد Todo، بعد یک API client.
2. Hot Reload را تجربه کنید. رنگ‌ها، متن‌ها را تغییر دهید و نتیجه را ببینید.
3. Widget Inspector را یاد بگیرید. در DevTools برای debug کردن UI.
4. پروژه رسمی را بخوانید. https://docs.flutter.dev/cookbook
5. به جامعه فارسی Flutter بپیوندید. Telegram، Discord، Stack Overflow.
6. کد روزانه بنویسید. ۳۰ دقیقه روزانه بهتر از ۸ ساعت آخر هفته است.
7. پروژه‌های دیگران را بخوانید. در GitHub جستجو کنید.
8. با Hot Reload آزمایش کنید. ترسی از تغییر کد نداشته باشید.
9. flutter doctor را جدی بگیرید. همه ✓ ها را داشته باشید.
10. از CodeMagic یا GitHub Actions استفاده کنید. از همان ابتدا CI داشته باشید.

۱.۱۳ خلاصه فصل