آموزش برنامه نویسی فلاتر Flutter

نویسنده : nivad
ارسال شده در: 8 اسفند 1403
ارسال دیدگاه: 0

آموزش برنامه نویسی فلاتر Flutter

برنامه‌نویسی با فلاتر (Flutter) یکی از محبوب‌ترین روش‌ها برای توسعه اپلیکیشن‌های موبایل است. فلاتر یک فریم‌ورک متن‌باز است که توسط گوگل توسعه داده شده و از زبان برنامه‌نویسی دارت (Dart) استفاده می‌کند. در اینجا مراحل اولیه برای شروع برنامه‌نویسی با فلاتر آورده شده است:

1. نصب و راه‌اندازی محیط توسعه

نصب و راه‌اندازی محیط توسعه برای برنامه‌نویسی با فلاتر (Flutter) یکی از اولین و مهم‌ترین مراحل است. در این بخش، به طور کامل و گام‌به‌گام نحوه نصب و راه‌اندازی محیط توسعه فلاتر را توضیح می‌دهیم.

1. نصب Flutter SDK

Flutter SDK شامل تمام ابزارهای لازم برای توسعه اپلیکیشن‌های فلاتر است. مراحل نصب آن به شرح زیر است:

1.1. دانلود Flutter SDK

به وب‌سایت رسمی فلاتر بروید: flutter.dev.
آخرین نسخه Flutter SDK را برای سیستم‌عامل خود (ویندوز، مک، یا لینوکس) دانلود کنید.

1.2. استخراج فایل‌ها

فایل دانلود شده را از حالت فشرده خارج کنید و آن را در یک مسیر مناسب قرار دهید (مثلاً C:\flutter در ویندوز یا /Users/yourusername/flutter در مک).

1.3. اضافه کردن Flutter به PATH

برای دسترسی به دستورات فلاتر از ترمینال یا خط فرمان، باید مسیر Flutter SDK را به متغیر محیطی PATH اضافه کنید.

ویندوز:
1. به Control Panel > System and Security > System > Advanced system settings بروید.
2. روی Environment Variables کلیک کنید.
3. در بخش System variables، متغیر Path را انتخاب کرده و روی Edit کلیک کنید.
4. مسیر پوشه bin داخل Flutter SDK را اضافه کنید (مثلاً C:\flutter\bin).
مک یا لینوکس:
1. فایل پروفایل سیستم خود را باز کنید (مثلاً ~/.bashrc، ~/.zshrc، یا ~/.bash_profile).
2. خط زیر را به انتهای فایل اضافه کنید:
  bash
  Copy
```
export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"
```
  به جای [PATH_TO_FLUTTER]، مسیر پوشه Flutter SDK را وارد کنید (مثلاً /Users/yourusername/flutter/bin).
3. تغییرات را ذخیره کرده و ترمینال را ری‌استارت کنید یا دستور زیر را اجرا کنید:
  bash
  Copy
```
source ~/.bashrc
```

1.4. بررسی نصب

در ترمینال یا خط فرمان، دستور زیر را اجرا کنید:
bash
Copy
```
flutter --version
```
اگر نصب موفقیت‌آمیز باشد، نسخه Flutter SDK نمایش داده می‌شود.

2. نصب Android Studio

Android Studio محیط توسعه یکپارچه (IDE) رسمی برای توسعه اپلیکیشن‌های اندروید است و برای کار با فلاتر بسیار مفید است.

2.1. دانلود و نصب Android Studio

به وب‌سایت رسمی Android Studio بروید: developer.android.com/studio.
نسخه مناسب سیستم‌عامل خود را دانلود و نصب کنید.

2.2. نصب پلاگین Flutter و Dart

پس از نصب Android Studio، آن را باز کنید.
به File > Settings > Plugins بروید.
در بخش جستجو، Flutter را تایپ کرده و روی Install کلیک کنید.
پس از نصب Flutter، پلاگین Dart نیز به طور خودکار نصب می‌شود.

2.3. تنظیم Android SDK

Android Studio را باز کنید و به Tools > SDK Manager بروید.
در تب SDK Platforms، آخرین نسخه Android SDK را نصب کنید.
در تب SDK Tools، Android SDK Build-Tools و Android Emulator را نصب کنید.

3. نصب VS Code (اختیاری)

اگر ترجیح می‌دهید از VS Code به جای Android Studio استفاده کنید، مراحل زیر را دنبال کنید:

3.1. دانلود و نصب VS Code

به وب‌سایت رسمی VS Code بروید: code.visualstudio.com.
نسخه مناسب سیستم‌عامل خود را دانلود و نصب کنید.

3.2. نصب پلاگین Flutter و Dart

VS Code را باز کنید.
به بخش Extensions بروید (Ctrl+Shift+X یا Cmd+Shift+X در مک).
Flutter را جستجو کرده و روی Install کلیک کنید.
پلاگین Dart نیز به طور خودکار نصب می‌شود.

4. نصب Xcode (برای توسعه iOS – اختیاری)

اگر قصد دارید اپلیکیشن‌های iOS نیز توسعه دهید، باید Xcode را روی مک نصب کنید.

4.1. نصب Xcode

Xcode را از Mac App Store دانلود و نصب کنید.
پس از نصب، Xcode را باز کرده و دستور زیر را در ترمینال اجرا کنید تا ابزارهای خط فرمان نصب شوند:
bash
Copy
```
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```

4.2. تنظیم شبیه‌ساز iOS

Xcode را باز کنید و به Xcode > Preferences > Locations بروید.
مطمئن شوید که Command Line Tools تنظیم شده است.

5. بررسی تنظیمات با `flutter doctor`

پس از نصب همه ابزارها، دستور flutter doctor را اجرا کنید تا مطمئن شوید همه چیز به درستی تنظیم شده است.

در ترمینال یا خط فرمان، دستور زیر را اجرا کنید:
bash
Copy
```
flutter doctor
```
این دستور وضعیت نصب و تنظیمات را بررسی می‌کند. اگر مشکلی وجود داشته باشد، راه‌حل‌های پیشنهادی را ارائه می‌دهد.

6. ایجاد یک شبیه‌ساز (Emulator)

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

6.1. ایجاد شبیه‌ساز اندروید

Android Studio را باز کنید.
به Tools > Device Manager بروید.
روی Create Device کلیک کنید و یک دستگاه مجازی (AVD) ایجاد کنید.

6.2. ایجاد شبیه‌ساز iOS

Xcode را باز کنید.
به Window > Devices and Simulators بروید.
یک شبیه‌ساز iOS ایجاد کنید.

7. تست محیط توسعه

یک پروژه فلاتر جدید ایجاد کنید:
bash
Copy
```
flutter create my_first_app
```
به پوشه پروژه بروید:
bash
Copy
```
cd my_first_app
```
برنامه را اجرا کنید:
bash
Copy
```
flutter run
```
اگر همه چیز به درستی تنظیم شده باشد، اپلیکیشن روی شبیه‌ساز یا دستگاه فیزیکی اجرا می‌شود.

2. ایجاد اولین پروژه فلاتر

ایجاد اولین پروژه فلاتر (Flutter) یکی از مراحل هیجان‌انگیز و مهم در یادگیری این فریم‌ورک است. در این بخش، به طور کامل و گام‌به‌گام نحوه ایجاد و اجرای اولین پروژه فلاتر را توضیح می‌دهیم.
1. ایجاد پروژه جدید
برای ایجاد یک پروژه جدید فلاتر، از دستور flutter create استفاده می‌کنیم. این دستور یک ساختار پروژه استاندارد ایجاد می‌کند.
1.1. دستور ایجاد پروژه
- ترمینال یا خط فرمان را باز کنید.
- دستور زیر را اجرا کنید تا یک پروژه جدید ایجاد شود:
  bash
  Copy
```
flutter create my_first_app
```
  - my_first_app: نام پروژه شماست. می‌توانید آن را به دلخواه تغییر دهید.
1.2. ساختار پروژه
پس از اجرای دستور، یک پوشه با نام پروژه شما (مثلاً my_first_app) ایجاد می‌شود. ساختار این پوشه به صورت زیر است:
Copy
```
my_first_app/
├── android/
├── ios/
├── lib/
├── test/
├── pubspec.yaml
└── ...
```
- android/: کدهای خاص پلتفرم اندروید.
- ios/: کدهای خاص پلتفرم iOS.
- lib/: کدهای اصلی برنامه (فایل main.dart نقطه شروع برنامه است).
- test/: تست‌های واحد (Unit Tests).
- pubspec.yaml: فایل تنظیمات پروژه و مدیریت وابستگی‌ها.
2. اجرای پروژه
پس از ایجاد پروژه، می‌توانید آن را اجرا کنید.
2.1. رفتن به پوشه پروژه
- در ترمینال، به پوشه پروژه بروید:
  bash
  Copy
```
cd my_first_app
```
2.2. اجرای برنامه
- دستور زیر را اجرا کنید تا برنامه را اجرا کنید:
  bash
  Copy
```
flutter run
```
  - اگر شبیه‌ساز (Emulator) یا دستگاه فیزیکی متصل باشد، برنامه روی آن اجرا می‌شود.
  - اگر شبیه‌ساز اجرا نشده باشد، فلاتر به شما پیشنهاد می‌کند که یک شبیه‌ساز را راه‌اندازی کنید.
3. ویرایش کدهای پروژه
پس از اجرای پروژه، می‌توانید کدهای آن را ویرایش کنید.
3.1. باز کردن پروژه در IDE
- اگر از Android Studio استفاده می‌کنید، پروژه را از طریق File > Open باز کنید.
- اگر از VS Code استفاده می‌کنید، پروژه را از طریق File > Open Folder باز کنید.
3.2. ویرایش فایل main.dart
- فایل main.dart در پوشه lib/ قرار دارد. این فایل نقطه شروع برنامه است.
- کد پیش‌فرض این فایل به صورت زیر است:
dart
Copy
```
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
```
3.3. تغییرات ساده
- می‌توانید متن‌ها یا رنگ‌ها را تغییر دهید. مثلاً:
  - تغییر عنوان صفحه:
    dart
    Copy
```
home: MyHomePage(title: 'My First Flutter App'),
```
  - تغییر رنگ تم:
    dart
    Copy
```
primarySwatch: Colors.green,
```
4. افزودن وابستگی‌ها (Dependencies)
اگر می‌خواهید از کتابخانه‌های خارجی استفاده کنید، باید آن‌ها را به فایل pubspec.yaml اضافه کنید.
4.1. ویرایش pubspec.yaml
- فایل pubspec.yaml را باز کنید.
- در بخش dependencies، وابستگی‌های مورد نیاز را اضافه کنید. مثلاً:
  yaml
  Copy
```
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
```
4.2. نصب وابستگی‌ها
- پس از ویرایش pubspec.yaml، دستور زیر را اجرا کنید تا وابستگی‌ها نصب شوند:
  bash
  Copy
```
flutter pub get
```
5. تست تغییرات
- پس از هر تغییر در کد، برنامه را دوباره اجرا کنید تا تغییرات را مشاهده کنید:
  bash
  Copy
```
flutter run
```
6. ساخت فایل نصب (APK یا IPA)
اگر می‌خواهید یک فایل نصب برای اندروید یا iOS ایجاد کنید، از دستورات زیر استفاده کنید:
6.1. ساخت فایل APK (برای اندروید)
- دستور زیر را اجرا کنید:
  bash
  Copy
```
flutter build apk
```
- فایل APK در مسیر build/app/outputs/flutter-apk/ ایجاد می‌شود.
6.2. ساخت فایل IPA (برای iOS)
- دستور زیر را اجرا کنید:
  bash
  Copy
```
flutter build ios
```
- فایل IPA در مسیر build/ios/ ایجاد می‌شود.
7. گام‌های بعدی
- با مفاهیم پایه فلاتر مانند ویجت‌ها، مدیریت حالت (State Management)، و ناوبری (Navigation) آشنا شوید.
- پروژه‌های کوچک و ساده ایجاد کنید تا مهارت‌های خود را تقویت کنید.

3. آشنایی با ساختار پروژه

پس از ایجاد پروژه، ساختار فایل‌ها به صورت زیر خواهد بود:

lib/: این پوشه حاوی کدهای اصلی برنامه است. فایل main.dart نقطه شروع برنامه است.
android/ و ios/: این پوشه‌ها حاوی کدهای خاص پلتفرم هستند.
pubspec.yaml: این فایل برای مدیریت وابستگی‌ها و تنظیمات پروژه استفاده می‌شود.

4. شروع کدنویسی

4.1. ویرایش فایل `main.dart`

فایل main.dart را باز کنید و کد زیر را جایگزین کنید:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

4.2. اجرای برنامه

برنامه را با دستور flutter run اجرا کنید.
اگر همه چیز به درستی تنظیم شده باشد، یک اپلیکیشن ساده با متن “Hello, Flutter!” نمایش داده می‌شود.

5. یادگیری مفاهیم پایه

5.1. ویجت‌ها (Widgets)

فلاتر از ویجت‌ها برای ساخت رابط کاربری استفاده می‌کند.
دو نوع ویجت اصلی وجود دارد: StatelessWidget و StatefulWidget.
- StatelessWidget: برای ویجت‌هایی که حالت (state) تغییر نمی‌کند.
- StatefulWidget: برای ویجت‌هایی که حالت آن‌ها تغییر می‌کند.

5.2. مدیریت حالت (State Management)

برای مدیریت حالت در فلاتر، می‌توانید از روش‌های مختلفی مانند setState، Provider، Riverpod، Bloc و غیره استفاده کنید.

5.3. ناوبری (Navigation)

برای حرکت بین صفحات مختلف، از Navigator استفاده می‌شود. مثال:
dart
Copy
```
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);
```

5.4. مدیریت وابستگی‌ها

وابستگی‌های پروژه در فایل pubspec.yaml تعریف می‌شوند. مثال:
yaml
Copy
```
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
```