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

آموزش Flutter یکی از بهترین راه‌ها برای شروع یادگیری توسعه اپلیکیشن‌های موبایل با استفاده از فریم‌ورک قدرتمند Flutter است. در این مقاله، به بررسی مفاهیم ابتدایی و ساخت اولین پروژه Flutter خواهیم پرداخت و تمامی جنبه‌های این موضوع را از سطح مبتدی تا پیشرفته پوشش می‌دهیم. این مقاله به زبان ساده و قابل فهم برای مبتدیان نوشته شده است.

ایجاد پروژه جدید با دستور flutter create یا از طریق IDE

برای شروع کار با Flutter و ساخت اولین پروژه Flutter، ابتدا باید Flutter SDK را نصب کرده باشید. پس از نصب، می‌توانید با استفاده از دستور flutter create در خط فرمان یا از طریق یک محیط توسعه یکپارچه (IDE) مانند Android Studio یا Visual Studio Code پروژه جدید خود را ایجاد کنید. در این بخش، به تفصیل هر دو روش ایجاد پروژه را بررسی می‌کنیم تا بتوانید بر اساس نیاز و ترجیح خود بهترین روش را انتخاب کنید.

استفاده از دستور flutter create

استفاده از خط فرمان برای ایجاد پروژه Flutter یک روش سریع و ساده است که به ویژه برای کسانی که ترجیح می‌دهند از ابزارهای متنی استفاده کنند، مناسب است. این روش به شما امکان می‌دهد کنترل کامل بر فرآیند ایجاد پروژه داشته باشید و تنظیمات پیش‌فرض را به سرعت اعمال کنید.

مراحل ایجاد پروژه با استفاده از دستور flutter create:

باز کردن ترمینال یا CMD:

ابتدا ترمینال (در سیستم‌های مک و لینوکس) یا CMD (در ویندوز) را باز کنید. در ویندوز می‌توانید از PowerShell یا Command Prompt استفاده کنید. برای باز کردن ترمینال در ویندوز، می‌توانید از کلیدهای ترکیبی Win + R استفاده کرده و سپس cmd را تایپ کنید.

رفتن به دایرکتوری مورد نظر:

با استفاده از دستور cd به دایرکتوری‌ای بروید که می‌خواهید پروژه جدید Flutter را در آن ایجاد کنید. به عنوان مثال:

cd C:\Users\YourUsername\Projects

یا در مک و لینوکس:

cd /Users/YourUsername/Projects

اطمینان حاصل کنید که مسیر انتخابی شما محل مناسبی برای ذخیره‌سازی پروژه است و دسترسی نوشتن در آن دارید.

اجرای دستور flutter create:

دستور زیر را وارد کنید تا یک پروژه جدید Flutter با نام مورد نظر ایجاد شود:

flutter create my_first_flutter_app

توضیحات:

flutter create: این دستور برای ایجاد یک پروژه جدید Flutter استفاده می‌شود.
my_first_flutter_app: نام پروژه شماست که می‌توانید آن را به دلخواه تغییر دهید.
پس از اجرای این دستور، Flutter ساختار پوشه‌های لازم را ایجاد کرده و فایل‌های اولیه پروژه را تنظیم می‌کند. نمونه‌ای از خروجی ممکن است به شکل زیر باشد:

Creating project my_first_flutter_app...
  my_first_flutter_app/.gitignore (created)
  my_first_flutter_app/.metadata (created)
  my_first_flutter_app/README.md (created)
  my_first_flutter_app/pubspec.yaml (created)
  my_first_flutter_app/lib/main.dart (created)
  ...

باز کردن پروژه در IDE:

پس از ایجاد پروژه، می‌توانید با استفاده از IDE مورد علاقه خود مانند Visual Studio Code یا Android Studio پروژه را باز کنید و شروع به توسعه کنید. برای باز کردن پروژه در Visual Studio Code، می‌توانید از دستور زیر در ترمینال استفاده کنید:

code my_first_flutter_app

یا به صورت دستی از طریق منوی File و گزینه Open Folder اقدام کنید.

مزایا و نکات استفاده از دستور flutter create:

سرعت و سادگی: ایجاد پروژه با چند خط فرمان سریع و بدون نیاز به تنظیمات پیچیده.
قابلیت سفارشی‌سازی: می‌توانید از گزینه‌های مختلف دستور flutter create برای تنظیمات پیشرفته‌تر مانند افزودن پشتیبانی از پلتفرم‌های خاص استفاده کنید.
اتوماتیک بودن تنظیمات: Flutter به طور خودکار تنظیمات اولیه پروژه را انجام می‌دهد، از جمله ایجاد فایل‌های مورد نیاز و پوشه‌های استاندارد.

گزینه‌های پیشرفته دستور flutter create:

می‌توانید با افزودن پارامترهای مختلف به دستور flutter create، پروژه خود را به شکل دلخواه تنظیم کنید. برخی از این پارامترها عبارتند از:

-i, –ios-language [objc|swift]: تعیین زبان برنامه‌نویسی برای بخش iOS (Objective-C یا Swift).

flutter create -i swift my_first_flutter_app

-a, –android-language [java|kotlin]: تعیین زبان برنامه‌نویسی برای بخش اندروید (Java یا Kotlin).

flutter create -a kotlin my_first_flutter_app

–web: اضافه کردن پشتیبانی از وب به پروژه.

flutter create --web my_first_flutter_app

–template: انتخاب نوع قالب پروژه مانند app, package, plugin و غیره.

flutter create --template=plugin my_first_flutter_plugin

استفاده از این گزینه‌ها به شما کمک می‌کند تا پروژه خود را دقیق‌تر با نیازهای خاص خود تنظیم کنید.

استفاده از IDE

اگر از یک محیط توسعه یکپارچه (IDE) مانند Android Studio یا Visual Studio Code استفاده می‌کنید، ایجاد پروژه Flutter می‌تواند با استفاده از رابط گرافیکی ساده‌تر و بصری‌تر انجام شود. این روش به ویژه برای کسانی که ترجیح می‌دهند از ابزارهای گرافیکی بهره ببرند و نیاز به تنظیمات پیشرفته ندارند، مناسب است.

مراحل ایجاد پروژه جدید در Android Studio:

باز کردن Android Studio:

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

انتخاب گزینه “New Flutter Project”:

از صفحه خوش‌آمدگویی (Welcome Screen)، گزینه “New Flutter Project” را انتخاب کنید. اگر قبلاً پروژه‌ای باز کرده‌اید، می‌توانید از منوی File گزینه New و سپس New Flutter Project را انتخاب کنید.

انتخاب نوع پروژه:

در پنجره باز شده، نوع پروژه را انتخاب کنید. برای شروع، معمولاً گزینه Flutter Application مناسب است. سپس بر روی Next کلیک کنید.

تنظیمات پروژه:

Project Name: نام پروژه خود را وارد کنید (مثلاً my_first_flutter_app).
Flutter SDK Path: مسیر نصب Flutter SDK را مشخص کنید. اگر قبلاً Flutter SDK را نصب کرده‌اید، Android Studio ممکن است به صورت خودکار مسیر آن را تشخیص دهد.
Project Location: مسیری که می‌خواهید پروژه در آن ذخیره شود را انتخاب کنید.
Description: توضیحی کوتاه درباره پروژه (اختیاری).
Platform: پلتفرم‌های مورد نظر برای پروژه (اندروید، iOS، وب و غیره) را انتخاب کنید.

پیکربندی نهایی و ایجاد پروژه:

پس از وارد کردن تنظیمات، بر روی دکمه Finish کلیک کنید. Android Studio شروع به ایجاد پروژه می‌کند و ساختار پوشه‌های لازم را تنظیم می‌کند. این فرآیند ممکن است چند دقیقه طول بکشد. پس از اتمام، پروژه جدید شما در پنجره اصلی Android Studio باز می‌شود و آماده برای توسعه است.

مراحل ایجاد پروژه جدید در Visual Studio Code:

باز کردن Visual Studio Code:

Visual Studio Code را باز کنید. مطمئن شوید که افزونه‌های Flutter و Dart نصب شده‌اند. اگر نصب نشده‌اند، می‌توانید از بخش Extensions (Ctrl + Shift + X در ویندوز و لینوکس یا Cmd + Shift + X در مک) آن‌ها را جستجو و نصب کنید.

باز کردن فرمان پالت (Command Palette):

با فشردن Ctrl + Shift + P (در ویندوز و لینوکس) یا Cmd + Shift + P (در مک)، فرمان پالت را باز کنید. فرمان پالت یک ابزار قدرتمند در VS Code است که به شما امکان اجرای دستورات مختلف را می‌دهد.

انتخاب گزینه “Flutter: New Project”:

در فرمان پالت، عبارت Flutter: New Project را تایپ کرده و انتخاب کنید. سپس نوع پروژه را انتخاب کنید (معمولاً Application).

وارد کردن نام پروژه:

نام پروژه را وارد کنید (مثلاً my_first_flutter_app) و مسیر ذخیره‌سازی را انتخاب کنید. VS Code شروع به ایجاد پروژه می‌کند و پوشه‌های لازم را تنظیم می‌کند. پس از اتمام، پروژه در پنجره اصلی VS Code باز خواهد شد.

باز کردن پروژه در VS Code:

پس از ایجاد پروژه، می‌توانید فایل‌های پروژه را مرور کرده و با توسعه آن شروع کنید. همچنین، می‌توانید ترمینال داخلی VS Code را باز کرده و دستورات Flutter را مستقیماً در محیط IDE اجرا کنید.

مزایا و نکات استفاده از IDE برای ایجاد پروژه:

رابط کاربری گرافیکی: ایجاد پروژه از طریق IDE به شما امکان می‌دهد از طریق منوها و گزینه‌های بصری پروژه خود را به راحتی پیکربندی کنید.
یکپارچگی ابزارها: IDEها ابزارهای قدرتمندی مانند ویرایشگر کد، دیباگر، مدیریت بسته‌ها و شبیه‌سازهای داخلی را در یک محیط یکپارچه فراهم می‌کنند.
پشتیبانی از پلاگین‌ها: IDEها از پلاگین‌های مختلفی پشتیبانی می‌کنند که می‌توانند فرآیند توسعه را بهبود بخشند و امکانات اضافی ارائه دهند.
راهنمایی‌های تعاملی: IDEها اغلب دارای راهنمایی‌های تعاملی و پیشنهادات کد (IntelliSense) هستند که می‌تواند به شما در نوشتن کد صحیح و بهینه کمک کند.

نکات مهم در استفاده از IDE برای ایجاد پروژه Flutter:

نصب پلاگین‌های ضروری: مطمئن شوید که پلاگین‌های Flutter و Dart در IDE شما نصب و فعال هستند تا از امکانات کامل Flutter بهره‌مند شوید.
تنظیمات محیط توسعه: برخی تنظیمات مانند مسیر Flutter SDK، فونت و قالب‌های کد را مطابق با ترجیحات خود تنظیم کنید.
استفاده از ترمینال داخلی: IDEها معمولاً دارای ترمینال داخلی هستند که می‌توانید به جای استفاده از ترمینال خارجی از آن استفاده کنید. این کار فرآیند توسعه را سریع‌تر و کارآمدتر می‌کند.
پشتیبانی از چندین پلتفرم: اگر قصد دارید برنامه خود را برای چندین پلتفرم (اندروید، iOS، وب و غیره) توسعه دهید، اطمینان حاصل کنید که تنظیمات پروژه به درستی انجام شده و همه پلتفرم‌های مورد نیاز فعال هستند.

نکات اضافی برای ایجاد اولین پروژه Flutter

نصب و راه‌اندازی Flutter SDK:

قبل از ایجاد پروژه، اطمینان حاصل کنید که Flutter SDK به درستی نصب و تنظیم شده است. می‌توانید از دستور flutter doctor در ترمینال برای بررسی وضعیت نصب Flutter استفاده کنید:

flutter doctor

این دستور وضعیت نصب Flutter و وابستگی‌های لازم مانند Android SDK و ابزارهای خط فرمان را بررسی می‌کند و مشکلات احتمالی را گزارش می‌دهد. اگر هر گونه مشکلی وجود داشت، راهنمایی‌های ارائه شده را دنبال کنید تا آن‌ها را برطرف کنید.

پیکربندی دستگاه‌های توسعه:

برای اجرای پروژه Flutter روی شبیه‌ساز یا دستگاه واقعی، باید دستگاه‌های توسعه را پیکربندی کنید. مطمئن شوید که شبیه‌ساز اندروید یا iOS نصب و تنظیم شده است و یا دستگاه موبایل شما به درستی به کامپیوتر متصل شده و حالت دیباگ USB فعال است.

آشنایی با دستورات پایه Flutter:

در طول فرآیند توسعه، دستورات مختلف Flutter مانند flutter run, flutter build, flutter pub get و غیره به شما کمک می‌کنند تا پروژه خود را مدیریت کنید. آشنایی اولیه با این دستورات می‌تواند فرآیند توسعه را تسهیل کند.

flutter run: اجرای برنامه روی دستگاه متصل یا شبیه‌ساز.
flutter build: ساخت نسخه نهایی برنامه برای انتشار.
flutter pub get: دانلود و نصب بسته‌های مورد نیاز پروژه.
flutter analyze: بررسی کد برای یافتن خطاها و بهینه‌سازی‌ها.
با رعایت این نکات و انتخاب روش مناسب برای ایجاد پروژه، شما می‌توانید به راحتی مفاهیم ابتدایی و ساخت اولین پروژه Flutter خود را آغاز کرده و به توسعه اپلیکیشن‌های جذاب و کارآمد بپردازید.

ساختار پوشه‌های پروژه (lib، android، ios، web، test و …)

پس از ایجاد اولین پروژه Flutter، آشنایی با ساختار پوشه‌های آن امری ضروری است. درک دقیق ساختار پروژه به شما کمک می‌کند تا بتوانید به طور مؤثر و سازمان‌یافته کدهای خود را مدیریت کنید و از امکانات مختلف Flutter به بهترین شکل استفاده نمایید. در ادامه، به تفصیل هر یک از پوشه‌های اصلی پروژه Flutter را بررسی می‌کنیم:

1. پوشه lib

پوشه lib محلی است که تمامی کدهای منبع Dart برنامه شما در آن قرار می‌گیرند. این پوشه معمولاً شامل فایل‌های اصلی برنامه مانند main.dart و سایر فایل‌های Dart مرتبط با ویجت‌ها، مدل‌ها، سرویس‌ها و غیره می‌باشد.

فایل main.dart: نقطه ورود برنامه شماست. در این فایل، تابع اصلی main() قرار دارد که اجرای برنامه را آغاز می‌کند و ویجت اصلی برنامه را بارگذاری می‌کند.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'اولین پروژه Flutter',
      home: HomePage(),
    );
  }
}

ساختار پیشنهادی پوشه lib: برای سازماندهی بهتر کدها، می‌توانید زیرپوشه‌هایی مانند screens برای صفحات مختلف، widgets برای ویجت‌های قابل استفاده مجدد، models برای مدل‌های داده‌ای و services برای سرویس‌های ارتباط با API ایجاد کنید.

lib/
├── main.dart
├── screens/
│   └── home_page.dart
├── widgets/
│   └── custom_button.dart
├── models/
│   └── user.dart
└── services/
    └── api_service.dart

2. پوشه android

پوشه android حاوی تمامی تنظیمات و کدهای مربوط به پلتفرم اندروید است. این پوشه شامل فایل‌های مربوط به Gradle، AndroidManifest.xml و سایر تنظیمات پلتفرم اندروید می‌باشد.

فایل AndroidManifest.xml: فایل پیکربندی اصلی اپلیکیشن اندروید که شامل مجوزها، فعالیت‌ها (Activities) و سایر تنظیمات مربوط به اپلیکیشن است.

پوشه app/src/main/java/: محل قرارگیری کدهای بومی اندروید در صورت نیاز به افزودن کدهای نیتیو (Native) است.

پوشه res/: شامل منابع مختلف مانند تصاویر، رشته‌ها، سبک‌ها و غیره است.

نکات مهم:

برای افزودن قابلیت‌های خاص اندروید مانند استفاده از پلاگین‌های نیتیو، ممکن است نیاز به ویرایش فایل‌های داخل این پوشه باشد.
تغییرات در فایل build.gradle می‌تواند تنظیمات ساخت اپلیکیشن اندروید را تغییر دهد، مانند نسخه SDK، وابستگی‌ها و تنظیمات پیکربندی.

3. پوشه ios

پوشه ios حاوی تنظیمات و کدهای مربوط به پلتفرم iOS است. این پوشه شامل فایل‌های پروژه Xcode، Info.plist و تنظیمات پلتفرم iOS می‌باشد.

فایل Info.plist: فایل پیکربندی اصلی اپلیکیشن iOS که شامل تنظیمات مانند نام اپلیکیشن، نسخه، مجوزها و سایر تنظیمات مرتبط است.

پوشه Runner/: شامل کدهای بومی iOS و تنظیمات پروژه Xcode می‌باشد.

پوشه Assets.xcassets/: محل ذخیره تصاویر و آیکون‌های مورد استفاده در اپلیکیشن iOS است.

نکات مهم:

برای افزودن قابلیت‌های خاص iOS مانند استفاده از پلاگین‌های نیتیو، ممکن است نیاز به ویرایش فایل‌های داخل این پوشه باشد.
تغییرات در فایل Podfile می‌تواند تنظیمات وابستگی‌های CocoaPods را تغییر دهد که برای مدیریت کتابخانه‌های iOS استفاده می‌شود.

4. پوشه web

پوشه web در صورتی که پشتیبانی وب فعال باشد، شامل فایل‌های مربوط به نسخه وب برنامه شما است. این پوشه شامل فایل‌های HTML، CSS و JavaScript تولید شده برای اجرای برنامه در مرورگرها می‌باشد.

فایل index.html: صفحه اصلی وب اپلیکیشن شما است که ویجت Flutter را بارگذاری می‌کند.

پوشه assets/: محل ذخیره منابع وب مانند تصاویر و فایل‌های CSS.

نکات مهم:

برای بهینه‌سازی عملکرد وب اپلیکیشن، می‌توانید فایل‌های CSS و JavaScript سفارشی خود را در این پوشه اضافه کنید.
تغییرات در فایل index.html می‌تواند تنظیمات کلی اپلیکیشن وب را تغییر دهد، مانند عنوان صفحه، آیکون‌ها و سایر متادیتاها.

5. پوشه test

پوشه test حاوی تست‌های خودکار برای برنامه شما می‌باشد. در این پوشه می‌توانید تست‌های واحد (Unit Tests) و تست‌های ویجت (Widget Tests) خود را قرار دهید تا کیفیت کدهای خود را تضمین کنید.

تست‌های واحد (Unit Tests): برای تست توابع و کلاس‌های جداگانه استفاده می‌شوند.

import 'package:flutter_test/flutter_test.dart';
import 'package:my_first_flutter_app/models/user.dart';

void main() {
  test('User model test', () {
    final user = User(name: 'Ali', age: 25);
    expect(user.name, 'Ali');
    expect(user.age, 25);
  });
}

تست‌های ویجت (Widget Tests): برای تست ویجت‌های Flutter و بررسی نحوه تعامل آن‌ها با کاربران استفاده می‌شوند.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_first_flutter_app/main.dart';

void main() {
  testWidgets('HomePage has a title and message', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    
    expect(find.text('صفحه اصلی'), findsOneWidget);
    expect(find.text('به اولین پروژه Flutter خود خوش آمدید!'), findsOneWidget);
  });
}

نکات مهم:

استفاده از تست‌ها به شما کمک می‌کند تا خطاها را زودتر شناسایی و رفع کنید و کیفیت کدهای خود را بالا ببرید.
می‌توانید از ابزارهای مختلف مانند flutter_test برای نوشتن و اجرای تست‌ها استفاده کنید.

6. پوشه assets

پوشه assets برای ذخیره دارایی‌های برنامه مانند تصاویر، فونت‌ها، فایل‌های صوتی و ویدئویی استفاده می‌شود. این پوشه به شما امکان می‌دهد منابع مورد نیاز برنامه را به صورت سازمان‌یافته ذخیره کنید و در برنامه به آن‌ها دسترسی داشته باشید.

پوشه‌های زیرپوشه assets: می‌توانید زیرپوشه‌هایی مانند images/ برای تصاویر، fonts/ برای فونت‌ها و audio/ برای فایل‌های صوتی ایجاد کنید.

assets/
├── images/
│   ├── logo.png
│   └── background.jpg
├── fonts/
│   └── CustomFont.ttf
└── audio/
    └── click.mp3

تعریف دارایی‌ها در pubspec.yaml: برای استفاده از دارایی‌ها در برنامه، باید مسیر آن‌ها را در فایل pubspec.yaml تعریف کنید.

flutter:
  assets:
    - assets/images/
    - assets/audio/
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont.ttf

استفاده از دارایی‌ها در کد:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/images/logo.png'),
            SizedBox(height: 20),
            Text(
              'با فونت سفارشی',
              style: TextStyle(fontFamily: 'CustomFont', fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // پخش فایل صوتی
              },
              child: Text('فشار دهید'),
            ),
          ],
        ),
      ),
    );
  }
}

نکات مهم:

سازماندهی دارایی‌ها: دارایی‌ها را به صورت منطقی و بر اساس نوع آن‌ها سازماندهی کنید تا دسترسی به آن‌ها آسان‌تر باشد.
بهینه‌سازی اندازه دارایی‌ها: از تصاویر و فایل‌های صوتی با کیفیت مناسب و اندازه کم استفاده کنید تا حجم برنامه افزایش نیابد و عملکرد بهتری داشته باشد.
استفاده از فونت‌های سفارشی: با تعریف فونت‌های سفارشی در pubspec.yaml می‌توانید ظاهر برنامه خود را بهبود بخشید و آن را منحصر به فرد کنید.

7. پوشه build (اختیاری)

پوشه build حاوی فایل‌های تولید شده در هنگام ساخت برنامه است. این پوشه معمولاً نادیده گرفته می‌شود و نیازی به ویرایش آن‌ها نیست. فایل‌های داخل این پوشه به صورت خودکار توسط Flutter ایجاد و مدیریت می‌شوند.

کاربرد:
ذخیره خروجی‌های کامپایل شده برای پلتفرم‌های مختلف.
ذخیره فایل‌های موقتی مورد نیاز برای فرآیند ساخت.
نکات مهم:

نادیده گرفتن پوشه build: معمولاً پوشه build در فایل .gitignore نادیده گرفته می‌شود تا فایل‌های تولید شده در سیستم کنترل نسخه ذخیره نشوند.

پاک‌سازی پوشه build: در صورتی که با مشکلاتی در فرآیند ساخت مواجه شدید، می‌توانید با اجرای دستور flutter clean پوشه build را پاک‌سازی کنید و سپس مجدداً پروژه را بسازید.

flutter clean
flutter pub get
flutter run

8. پوشه‌های دیگر (اختیاری)

در برخی پروژه‌های پیچیده‌تر، ممکن است پوشه‌های اضافی دیگری نیز وجود داشته باشند که به نیازهای خاص پروژه مرتبط هستند. به عنوان مثال:

پوشه scripts/: برای نگهداری اسکریپت‌های سفارشی مانند اسکریپت‌های ساخت و استقرار.
پوشه docs/: برای نگهداری مستندات پروژه.
پوشه assets/icons/: برای نگهداری آیکون‌های سفارشی برنامه.
نکات مهم:

سازماندهی بر اساس نیاز: بسته به نیازهای پروژه، می‌توانید پوشه‌های اضافی ایجاد کنید تا کدها و منابع خود را بهتر سازماندهی کنید.
پاسخگویی به استانداردها: رعایت استانداردهای نام‌گذاری و سازماندهی پوشه‌ها به خوانایی و نگهداری کدها کمک می‌کند.

آشنایی با فایل‌های اصلی پروژه

در مفاهیم ابتدایی و ساخت اولین پروژه Flutter، آشنایی با فایل‌های اصلی پروژه یکی از مراحل حیاتی است. در پروژه Flutter، چندین فایل اصلی وجود دارد که هر کدام نقش مهمی در عملکرد و ساختار برنامه دارند. در ادامه به تفصیل هر یک از این فایل‌ها و نقش آن‌ها پرداخته می‌شود:

1. فایل main.dart

فایل main.dart نقطه ورود برنامه Flutter شماست. این فایل شامل تابع اصلی main() است که اجرای برنامه را آغاز می‌کند و ویجت اصلی برنامه را بارگذاری می‌کند. در واقع، هر برنامه Flutter با اجرای این فایل شروع می‌شود.

مثال ساده از main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'اولین پروژه Flutter',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: Text('به اولین پروژه Flutter خود خوش آمدید!'),
      ),
    );
  }
}

توضیحات:

import ‘package:flutter/material.dart’;: وارد کردن بسته‌های مورد نیاز Flutter برای استفاده از ویجت‌های Material Design.
void main() { runApp(MyApp()); }: تابع اصلی که برنامه را اجرا می‌کند و ویجت MyApp را بارگذاری می‌کند.
MyApp: یک کلاس که از StatelessWidget ارث‌بری می‌کند و تنظیمات پایه‌ای برنامه را تعریف می‌کند.
MaterialApp: یک ویجت پیش‌فرض Flutter که تنظیمات برنامه مانند عنوان، تم و مسیرهای ناوبری را مدیریت می‌کند.
HomePage: ویجت صفحه اصلی برنامه که شامل AppBar و بدنه (body) با متن خوش‌آمدگویی است.

2. فایل pubspec.yaml

فایل pubspec.yaml یکی از مهم‌ترین فایل‌های پروژه Flutter است که برای مدیریت بسته‌ها (Packages) و دارایی‌ها (Assets) استفاده می‌شود. این فایل به Flutter می‌گوید که چه بسته‌ها و منابعی در پروژه استفاده می‌شوند و چگونه باید آن‌ها را مدیریت کند.

مثال از فایل pubspec.yaml:

name: my_first_flutter_app
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/

توضیحات:

name: نام پروژه.
description: توضیح کوتاهی درباره پروژه.
version: نسخه فعلی پروژه.
environment: مشخصات نسخه Dart مورد نیاز.
dependencies: بسته‌های مورد نیاز پروژه که در زمان اجرا استفاده می‌شوند.
dev_dependencies: بسته‌های مورد نیاز در زمان توسعه مانند تست‌ها.
flutter: تنظیمات مربوط به Flutter مانند استفاده از طراحی Material و تعریف دارایی‌ها.
برای افزودن یک بسته جدید، کافی است نام آن را در بخش dependencies وارد کنید و سپس دستور flutter pub get را اجرا کنید تا بسته دانلود و نصب شود. به عنوان مثال، برای اضافه کردن بسته http:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

سپس در ترمینال دستور زیر را اجرا کنید:

flutter pub get

3. فایل README.md

فایل README.md حاوی توضیحات اولیه پروژه است. این فایل معمولاً شامل اطلاعاتی درباره پروژه، نحوه نصب و راه‌اندازی، نحوه استفاده و سایر جزئیات مرتبط است. وجود یک فایل README خوب به دیگران کمک می‌کند تا بهتر پروژه شما را درک کنند و بتوانند به راحتی با آن کار کنند.

مثال ساده از README.md:

# My First Flutter App

این پروژه یک اپلیکیشن ساده Flutter است که به عنوان اولین پروژه Flutter توسعه یافته است. در این اپلیکیشن، یک صفحه اصلی با یک دکمه برای نمایش پیام خوش‌آمدگویی وجود دارد.

## نصب و راه‌اندازی

1. Flutter SDK را از [flutter.dev](https://flutter.dev) دانلود و نصب کنید.
2. ترمینال را باز کرده و به دایرکتوری پروژه بروید.
3. دستور `flutter pub get` را اجرا کنید تا بسته‌های مورد نیاز نصب شوند.
4. برنامه را با دستور `flutter run` اجرا کنید.

## استفاده

پس از اجرای برنامه، شما یک صفحه اصلی با یک دکمه مشاهده خواهید کرد. با فشار دادن دکمه، پیام خوش‌آمدگویی تغییر می‌کند.

## مشارکت

برای مشارکت در این پروژه، لطفاً ابتدا یک فورک از مخزن ایجاد کنید، تغییرات خود را اعمال کنید و سپس یک Pull Request ارسال کنید.

4. فایل .gitignore

فایل .gitignore تنظیمات Git را برای نادیده گرفتن فایل‌ها و پوشه‌های مشخصی که نباید در مخزن Git ذخیره شوند، تعریف می‌کند. این فایل به جلوگیری از آپلود فایل‌های موقتی، فایل‌های ساخت (build)، و سایر فایل‌های غیرضروری کمک می‌کند.

مثال ساده از .gitignore برای پروژه Flutter:

# Flutter
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
build/
ios/Flutter/Flutter.framework
android/.gradle/
android/app/build/

توضیحات:

.flutter-plugins و .flutter-plugins-dependencies: فایل‌های مربوط به پلاگین‌های Flutter که به صورت خودکار تولید می‌شوند.
.packages: فایل پیکربندی بسته‌ها.
.pub-cache/ و .pub/: پوشه‌های کش بسته‌ها.
build/: پوشه‌های مربوط به فایل‌های ساخت.
ios/Flutter/Flutter.framework: فایل‌های مربوط به فریم‌ورک Flutter در پلتفرم iOS.
android/.gradle/ و android/app/build/: پوشه‌های مربوط به Gradle و ساخت برنامه در پلتفرم اندروید.
نکات مهم:

حفظ امنیت: اطمینان حاصل کنید که فایل‌های حساس مانند کلیدهای API، اطلاعات کاربری، و سایر اطلاعات حساس در فایل .gitignore قرار دارند تا از انتشار آن‌ها جلوگیری شود.
سازگاری با پروژه: فایل .gitignore را بر اساس نیازهای پروژه خود تنظیم کنید. برای مثال، اگر از ابزارهای دیگری برای مدیریت بسته‌ها استفاده می‌کنید، ممکن است نیاز به افزودن قوانین اضافی داشته باشید.

فایل pubspec.yaml و مدیریت بسته‌ها (Packages) و دارایی‌ها (Assets)

فایل pubspec.yaml یکی از اصلی‌ترین فایل‌های پروژه Flutter است که برای مدیریت بسته‌ها (Packages) و دارایی‌ها (Assets) استفاده می‌شود. در این فایل می‌توانید بسته‌های مورد نیاز پروژه را اضافه کرده و دارایی‌های برنامه را تعریف کنید. در این بخش به تفصیل نحوه افزودن بسته‌ها و دارایی‌ها و مدیریت آن‌ها را بررسی می‌کنیم.

1. مدیریت بسته‌ها (Packages)

بسته‌ها در Flutter همانند کتابخانه‌های کد هستند که می‌توانید از آن‌ها برای افزودن قابلیت‌های مختلف به پروژه خود استفاده کنید. بسته‌ها می‌توانند شامل ویجت‌ها، ابزارها، و عملکردهای مختلف باشند.

افزودن یک بسته جدید:

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

به وب‌سایت pub.dev مراجعه کرده و بسته مورد نیاز خود را جستجو کنید. به عنوان مثال، بسته http برای انجام درخواست‌های HTTP.

افزودن بسته به pubspec.yaml:

نام بسته و نسخه آن را در بخش dependencies فایل pubspec.yaml اضافه کنید:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

اجرای دستور flutter pub get:

پس از ذخیره تغییرات در pubspec.yaml, در ترمینال دستور زیر را اجرا کنید تا بسته دانلود و نصب شود:

flutter pub get

استفاده از بسته در کد:

حال می‌توانید بسته را در فایل‌های Dart خود وارد (import) کنید و از آن استفاده نمایید:

import 'package:http/http.dart' as http;

void fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    print('Data fetched successfully!');
  } else {
    print('Failed to fetch data.');
  }
}

نکات مهم:

سازگاری نسخه‌ها: هنگام افزودن بسته‌ها، مطمئن شوید که نسخه‌های آن‌ها با نسخه Flutter و Dart شما سازگار هستند. از مستندات بسته‌ها برای بررسی سازگاری نسخه‌ها استفاده کنید.
به‌روز نگه‌داشتن بسته‌ها: همواره سعی کنید بسته‌های خود را به‌روز نگه دارید تا از آخرین قابلیت‌ها و رفع باگ‌ها بهره‌مند شوید. می‌توانید از دستور flutter pub upgrade برای به‌روزرسانی بسته‌ها استفاده کنید.

2. مدیریت دارایی‌ها (Assets)

دارایی‌ها شامل تصاویر، فونت‌ها، فایل‌های صوتی و سایر منابعی هستند که در برنامه شما استفاده می‌شوند. برای افزودن دارایی‌ها به پروژه Flutter، باید آن‌ها را در پوشه assets قرار داده و در فایل pubspec.yaml تعریف کنید.

افزودن تصاویر به پروژه:

ایجاد پوشه assets/images:

در ریشه پروژه، پوشه‌ای به نام assets و در داخل آن پوشه‌ای به نام images ایجاد کنید:

my_first_flutter_app/
├── assets/
│   └── images/
│       ├── logo.png
│       └── background.jpg
├── lib/
├── android/
├── ios/
└── ...

وارد کردن تصاویر:

تصاویر مورد نظر خود را در پوشه assets/images کپی کنید.

تعریف دارایی‌ها در pubspec.yaml:

در بخش flutter فایل pubspec.yaml, مسیر پوشه دارایی‌ها را به صورت زیر اضافه کنید:

flutter:
  uses-material-design: true

  assets:
    - assets/images/

استفاده از تصاویر در کد:

حال می‌توانید تصاویر را در ویجت‌های خود استفاده کنید:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: Image.asset('assets/images/logo.png'),
      ),
    );
  }
}

افزودن فونت‌های سفارشی به پروژه:

ایجاد پوشه assets/fonts:

در ریشه پروژه، پوشه‌ای به نام fonts در داخل پوشه assets ایجاد کنید:

assets/
├── images/
└── fonts/
    └── CustomFont.ttf

وارد کردن فونت:

فایل فونت مورد نظر خود را در پوشه assets/fonts کپی کنید.

تعریف فونت‌ها در pubspec.yaml:

در بخش flutter فایل pubspec.yaml, فونت‌های سفارشی را تعریف کنید:

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont.ttf

استفاده از فونت در کد:

حال می‌توانید فونت سفارشی را در ویجت‌های خود استفاده کنید:

Text(
  'با فونت سفارشی',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
  ),
)

افزودن فایل‌های صوتی به پروژه:

ایجاد پوشه assets/audio:

در ریشه پروژه، پوشه‌ای به نام audio در داخل پوشه assets ایجاد کنید:

assets/
├── images/
├── fonts/
└── audio/
    └── click.mp3

وارد کردن فایل صوتی:

فایل صوتی مورد نظر خود را در پوشه assets/audio کپی کنید.

تعریف فایل صوتی در pubspec.yaml:

در بخش flutter فایل pubspec.yaml, مسیر فایل صوتی را اضافه کنید:

flutter:
  assets:
    - assets/images/
    - assets/audio/

استفاده از فایل صوتی در کد:

برای پخش فایل صوتی می‌توانید از بسته‌های مربوطه مانند audioplayers استفاده کنید:

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class HomePage extends StatelessWidget {
  final AudioPlayer _audioPlayer = AudioPlayer();

  void _playSound() async {
    await _audioPlayer.play(AssetSource('audio/click.mp3'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _playSound,
          child: Text('پخش صدا'),
        ),
      ),
    );
  }
}

 

نکات مهم در مدیریت بسته‌ها و دارایی‌ها:

سازماندهی دارایی‌ها: دارایی‌ها را به صورت منطقی و بر اساس نوع آن‌ها سازماندهی کنید تا دسترسی به آن‌ها آسان‌تر باشد. به عنوان مثال، تصاویر را در پوشه assets/images و فونت‌ها را در پوشه assets/fonts قرار دهید.

بهینه‌سازی اندازه دارایی‌ها: از تصاویر و فایل‌های صوتی با کیفیت مناسب و اندازه کم استفاده کنید تا حجم برنامه افزایش نیابد و عملکرد بهتری داشته باشد.

استفاده از فونت‌های سفارشی: با تعریف فونت‌های سفارشی در pubspec.yaml می‌توانید ظاهر برنامه خود را بهبود بخشید و آن را منحصر به فرد کنید.

مدیریت نسخه‌های بسته‌ها: هنگام افزودن بسته‌ها، مطمئن شوید که نسخه‌های آن‌ها با نسخه Flutter و Dart شما سازگار هستند. از مستندات بسته‌ها برای بررسی سازگاری نسخه‌ها استفاده کنید.

به‌روز نگه‌داشتن بسته‌ها: همواره سعی کنید بسته‌های خود را به‌روز نگه دارید تا از آخرین قابلیت‌ها و رفع باگ‌ها بهره‌مند شوید. می‌توانید از دستور flutter pub upgrade برای به‌روزرسانی بسته‌ها استفاده کنید.

نقش main.dart و تابع اصلی main()

در مفاهیم ابتدایی و ساخت اولین پروژه Flutter، فایل main.dart و تابع اصلی main() از جمله اجزای کلیدی و حیاتی هستند که بدون آن‌ها برنامه شما نمی‌تواند اجرا شود. در این بخش، به تفصیل نقش این فایل و تابع را بررسی می‌کنیم تا درک بهتری از نحوه عملکرد برنامه Flutter خود داشته باشید.

1. فایل main.dart

فایل main.dart، نقطه ورود برنامه Flutter شماست. این فایل شامل تمام کدهای لازم برای شروع و اجرای برنامه می‌باشد. هر برنامه Flutter با اجرای این فایل آغاز می‌شود و تمامی اجزای دیگر برنامه از طریق آن بارگذاری می‌شوند.

ویژگی‌های فایل main.dart:

نقطه ورود برنامه: تمامی برنامه‌های Flutter از فایل main.dart آغاز می‌شوند.
تعریف ویجت اصلی: در این فایل، ویجت اصلی برنامه که معمولاً MyApp نامیده می‌شود، تعریف می‌شود.
مدیریت مسیرهای ناوبری: از طریق MaterialApp یا CupertinoApp، مسیرهای مختلف برنامه مدیریت می‌شوند.
تنظیمات پایه‌ای برنامه: شامل تم، عنوان، و سایر تنظیمات اولیه برنامه.

2. تابع اصلی main()

تابع main()، تابعی است که اولین بار هنگام اجرای برنامه فراخوانی می‌شود. این تابع مسئول آغاز اجرای برنامه و بارگذاری ویجت اصلی آن است. در Flutter، تابع main() معمولاً بسیار ساده است و تنها شامل فراخوانی runApp() برای اجرای ویجت اصلی برنامه می‌باشد.

ساختار تابع main():

import 'package:flutter/material.dart';

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

توضیحات:

import ‘package:flutter/material.dart’;: این خط کد بسته‌های مورد نیاز Flutter را وارد می‌کند. بسته material.dart شامل ویجت‌های Material Design است که برای ساخت رابط کاربری زیبا و کارآمد استفاده می‌شود.
void main() { runApp(MyApp()); }: تعریف تابع main() که برنامه را اجرا می‌کند. در اینجا، ویجت MyApp به عنوان ویجت اصلی برنامه بارگذاری می‌شود.

3. ویجت اصلی MyApp

ویجت MyApp، کلاس اصلی برنامه شماست که از StatelessWidget یا StatefulWidget ارث‌بری می‌کند. این ویجت تنظیمات پایه‌ای برنامه را تعریف می‌کند و ویجت‌های دیگر را به عنوان صفحات مختلف برنامه مدیریت می‌کند.

مثال از ویجت MyApp:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'اولین پروژه Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

توضیحات:

class MyApp extends StatelessWidget: تعریف کلاس MyApp که از StatelessWidget ارث‌بری می‌کند. ویجت‌های بدون وضعیت (Stateless) برای نمایش اطلاعاتی که نیاز به تغییر ندارند مناسب هستند.
@override Widget build(BuildContext context): متد build که ساختار رابط کاربری ویجت را تعریف می‌کند.
MaterialApp: یک ویجت پیش‌فرض Flutter که تنظیمات برنامه مانند عنوان، تم، و مسیرهای ناوبری را مدیریت می‌کند.
title: عنوان برنامه که در برخی مواقع نمایش داده می‌شود.
theme: تنظیمات تم برنامه که شامل رنگ‌ها و سبک‌های مختلف است.
home: ویجتی که به عنوان صفحه اصلی برنامه نمایش داده می‌شود، در اینجا HomePage است.

4. ویجت HomePage

ویجت HomePage، صفحه اصلی برنامه شماست که محتوای اصلی آن را نمایش می‌دهد. این ویجت می‌تواند شامل نوار ابزار (AppBar)، بدنه (body) و سایر اجزای رابط کاربری باشد.

مثال از ویجت HomePage:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: Text('به اولین پروژه Flutter خود خوش آمدید!'),
      ),
    );
  }
}

توضیحات:

class HomePage extends StatelessWidget: تعریف کلاس HomePage که از StatelessWidget ارث‌بری می‌کند.
Scaffold: یک ویجت ساختاری که به شما امکان می‌دهد عناصر پایه‌ای صفحه مانند نوار ابزار، بدنه، و دکمه‌های شناور را اضافه کنید.
appBar: نوار ابزار بالای صفحه که عنوان صفحه را نمایش می‌دهد.
body: محتوای اصلی صفحه که در اینجا یک متن در مرکز صفحه نمایش داده می‌شود.
Center: ویجتی که محتوای خود را در مرکز فضای موجود قرار می‌دهد.
Text: ویجتی برای نمایش متن.

توضیحات تکمیلی

استفاده از StatelessWidget و StatefulWidget:

StatelessWidget: برای ویجت‌هایی که نیاز به تغییر وضعیت ندارند استفاده می‌شود. مناسب برای نمایش اطلاعات ثابت مانند متون، تصاویر و آیکون‌ها.
StatefulWidget: برای ویجت‌هایی که نیاز به تغییر وضعیت در طول زمان دارند استفاده می‌شود. مناسب برای تعاملات کاربری، فرم‌ها، و ویجت‌های پویا.
مثال از StatefulWidget:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String message = 'به Flutter خوش آمدید!';

  void _updateMessage() {
    setState(() {
      message = 'شما دکمه را فشار دادید!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('صفحه اصلی'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(message),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateMessage,
              child: Text('فشار دهید'),
            ),
          ],
        ),
      ),
    );
  }
}

توضیحات:

StatefulWidget: تعریف ویجتی که دارای وضعیت متغیری است.
_HomePageState: کلاس حالت که وضعیت و رفتار ویجت را مدیریت می‌کند.
setState(): متدی که به Flutter اعلام می‌کند وضعیت ویجت تغییر کرده و باید دوباره رسم شود.
ElevatedButton: دکمه‌ای که با فشار دادن آن پیام نمایش داده شده تغییر می‌کند.

6. مفهوم ویجت‌ها و درخت ویجت‌ها

در Flutter، همه چیز یک ویجت است. ویجت‌ها به صورت سلسله‌مراتبی سازمان‌دهی شده‌اند که به آن‌ها درخت ویجت‌ها (Widget Tree) می‌گویند. این درخت ساختار کلی رابط کاربری برنامه شما را تشکیل می‌دهد و به Flutter اجازه می‌دهد تا به طور بهینه رابط کاربری را رسم و مدیریت کند.

مثال از درخت ویجت‌ها:

در مثال ساده HomePage، درخت ویجت‌ها به شکل زیر است:

HomePage
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Body
        └── Center
            └── Text

هر ویجت می‌تواند شامل ویجت‌های فرزند خود باشد که به صورت درختی سازمان‌دهی می‌شوند. این ساختار به Flutter امکان می‌دهد تا تغییرات در ویجت‌ها را به صورت موضعی مدیریت کرده و تنها بخش‌های مورد نیاز را دوباره رسم کند.

اجرای پروژه

پس از ایجاد اولین پروژه Flutter و نوشتن کدهای اولیه، نوبت به اجرای برنامه می‌رسد. در این بخش، به تفصیل نحوه اجرای برنامه روی شبیه‌سازها یا دستگاه‌های واقعی و آشنایی با ویژگی‌های hot reload و hot restart خواهیم پرداخت. این فرآیندها به شما امکان می‌دهند تا تغییرات خود را به سرعت مشاهده کنید و فرآیند توسعه را بهینه‌تر کنید.

اجرای برنامه روی شبیه‌ساز یا گوشی واقعی

برای اجرای پروژه Flutter خود، می‌توانید از شبیه‌سازهای اندروید یا iOS استفاده کنید یا برنامه را روی یک دستگاه واقعی نصب کنید. هر کدام از این روش‌ها مزایا و کاربردهای خاص خود را دارند که در ادامه به آن‌ها می‌پردازیم.

اجرای روی شبیه‌ساز

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

مراحل اجرای برنامه روی شبیه‌ساز:

راه‌اندازی شبیه‌ساز:

اندروید:
از Android Studio، به بخش AVD Manager بروید. اگر قبلاً شبیه‌ساز ایجاد نکرده‌اید، با کلیک بر روی Create Virtual Device یک شبیه‌ساز جدید ایجاد کنید.
نوع دستگاه (مانند Pixel 4) و نسخه سیستم عامل (Android نسخه مورد نظر) را انتخاب کنید.
پس از ایجاد شبیه‌ساز، آن را اجرا کنید.
iOS:
اگر از مک استفاده می‌کنید، Xcode را باز کنید.
از منوی Xcode، گزینه Open Developer Tool و سپس Simulator را انتخاب کنید.
دستگاه مورد نظر (مانند iPhone 14) را از منوی Hardware > Device انتخاب کنید.
اطمینان از اجرای شبیه‌ساز:

قبل از اجرای برنامه، مطمئن شوید که شبیه‌ساز به درستی اجرا شده و آماده دریافت برنامه است.

اجرای دستور flutter run:

ترمینال را باز کرده و به دایرکتوری پروژه Flutter خود بروید:

cd path_to_your_project/my_first_flutter_app

دستور زیر را اجرا کنید تا برنامه روی شبیه‌ساز انتخاب شده اجرا شود:

flutter run

اگر چندین شبیه‌ساز یا دستگاه متصل دارید، ممکن است لازم باشد دستگاه مورد نظر را انتخاب کنید. برای مشاهده لیست دستگاه‌های متصل، از دستور زیر استفاده کنید:

flutter devices

سپس، با استفاده از گزینه‌های موجود در ترمینال یا از طریق IDE خود، دستگاه مورد نظر را انتخاب کنید.

مشاهده خروجی برنامه:

پس از اجرای دستور، برنامه Flutter شما در شبیه‌ساز باز می‌شود و می‌توانید تغییرات را به صورت زنده مشاهده کنید.

نکات مهم:

کارایی شبیه‌ساز: شبیه‌سازهای اندروید و iOS ممکن است بسته به قدرت کامپیوتر شما، سرعت اجرا متفاوتی داشته باشند. استفاده از SSD و افزایش حافظه RAM می‌تواند عملکرد شبیه‌سازها را بهبود بخشد.
پیکربندی شبیه‌ساز: اطمینان حاصل کنید که نسخه سیستم عامل شبیه‌ساز با نسخه Flutter و SDK شما سازگار است.
تست چندین دستگاه: با استفاده از شبیه‌سازها می‌توانید برنامه خود را روی دستگاه‌های مختلف با اندازه‌های صفحه و نسخه‌های سیستم عامل مختلف تست کنید.

اجرای روی دستگاه واقعی

اجرای برنامه روی دستگاه‌های واقعی به شما امکان می‌دهد نحوه عملکرد اپلیکیشن در محیط‌های واقعی را بررسی کنید و از قابلیت‌های سخت‌افزاری دستگاه مانند دوربین، GPS و حسگرها استفاده کنید.

مراحل اجرای برنامه روی دستگاه واقعی:

فعال کردن حالت توسعه‌دهنده و دیباگ USB:

اندروید:
به تنظیمات گوشی بروید.
به بخش About phone بروید و چندین بار روی Build number ضربه بزنید تا حالت توسعه‌دهنده فعال شود.
به تنظیمات Developer options بروید و گزینه USB debugging را فعال کنید.
iOS:
مطمئن شوید که دستگاه شما به Xcode متصل است و پروفایل توسعه‌دهنده مناسب تنظیم شده است.
در دستگاه iOS، به تنظیمات Privacy & Security > Developer Mode بروید و آن را فعال کنید.
اتصال دستگاه به کامپیوتر:

گوشی خود را از طریق کابل USB به کامپیوتر متصل کنید.
در دستگاه اندروید، ممکن است نیاز باشد تا به کامپیوتر اعتماد کنید.
در دستگاه iOS، ممکن است نیاز به تأیید اتصال داشته باشید.
بررسی اتصال دستگاه:

در ترمینال، دستور زیر را اجرا کنید تا دستگاه متصل را مشاهده کنید:

flutter devices

دستگاه متصل باید در لیست نمایش داده شود. اگر دستگاه نمایش داده نشد، مراحل قبلی را بررسی کنید و مطمئن شوید که درایورهای مربوطه نصب شده‌اند.

اجرای دستور flutter run:

در ترمینال، به دایرکتوری پروژه Flutter خود بروید:

cd path_to_your_project/my_first_flutter_app

دستور زیر را اجرا کنید تا برنامه روی دستگاه واقعی نصب و اجرا شود:

flutter run

اگر چندین دستگاه متصل دارید، دستگاه مورد نظر را انتخاب کنید.

مشاهده خروجی برنامه:

پس از اجرای دستور، برنامه Flutter شما روی دستگاه واقعی نصب شده و اجرا می‌شود. می‌توانید اپلیکیشن را تست کرده و عملکرد آن را در شرایط واقعی بررسی کنید.

نکات مهم:

اتصال مطمئن: اطمینان حاصل کنید که کابل USB سالم و معتبر است تا از قطع اتصال و مشکلات دیگر جلوگیری شود.
سازگاری سیستم عامل: مطمئن شوید که نسخه سیستم عامل دستگاه با نسخه Flutter SDK شما سازگار است.
امنیت دستگاه: از نصب برنامه‌های ناشناس در دستگاه‌های واقعی خودداری کنید و مطمئن شوید که اپلیکیشن‌های توسعه‌دهنده اجازه نصب دارند.

آشنایی با hot reload و hot restart

یکی از ویژگی‌های قدرتمند Flutter، قابلیت hot reload و hot restart است که توسعه‌دهندگان را قادر می‌سازد تغییرات کد را بدون نیاز به بازنشانی کامل برنامه مشاهده کنند. این ویژگی‌ها فرآیند توسعه را سریع‌تر و کارآمدتر می‌کنند و تجربه توسعه‌دهندگان را بهبود می‌بخشند.

Hot Reload

Hot Reload به شما اجازه می‌دهد تغییرات کد را سریعاً در برنامه مشاهده کنید بدون از دست دادن وضعیت فعلی برنامه. این ویژگی بسیار مفید است زمانی که می‌خواهید تغییرات جزئی در رابط کاربری یا منطق برنامه را اعمال کنید و بلافاصله نتایج را ببینید.

مزایا:

سرعت بالا: تغییرات سریعاً اعمال می‌شوند و نیازی به بازنشانی کامل برنامه نیست.
حفظ وضعیت برنامه: وضعیت فعلی برنامه حفظ می‌شود و می‌توانید از تغییرات در بخش‌های مختلف برنامه لذت ببرید.
نحوه استفاده از Hot Reload:

اعمال تغییرات در کد:

فایل‌های Dart خود را باز کرده و تغییرات مورد نظر را اعمال کنید. به عنوان مثال، تغییر متن نمایش داده شده در یک ویجت.

اجرای Hot Reload:

در ترمینال: در حالی که برنامه در حال اجراست، دکمه r را فشار دهید.
در IDE:
Android Studio: بر روی آیکون Hot Reload در نوار ابزار کلیک کنید یا از کلید ترکیبی Ctrl + \ استفاده کنید.
Visual Studio Code: از نوار ابزار بالای پنجره یا از کلید ترکیبی Ctrl + F5 استفاده کنید.

مشاهده تغییرات در برنامه:

تغییرات بلافاصله در شبیه‌ساز یا دستگاه واقعی نمایش داده می‌شوند بدون اینکه وضعیت فعلی برنامه از دست برود.

مثال عملی از Hot Reload:

فرض کنید شما تصمیم دارید متن نمایش داده شده در صفحه اصلی برنامه خود را تغییر دهید. پس از اعمال تغییرات در فایل main.dart:

body: Center(
  child: Text('به اولین پروژه Flutter خود خوش آمدید!'),
),

به:

body: Center(
  child: Text('خوش آمدید به دنیای Flutter!'),
),

سپس با اجرای Hot Reload، متن جدید به سرعت در برنامه نمایش داده می‌شود.

Hot Restart

Hot Restart برنامه را کاملاً بازنشانی می‌کند و از ابتدا اجرا می‌شود. این ویژگی زمانی مفید است که تغییرات گسترده‌ای در کد اعمال کرده‌اید که نیاز به بارگذاری مجدد کل برنامه دارد.

مزایا:

بارگذاری مجدد کامل برنامه: تغییرات گسترده در برنامه به درستی اعمال می‌شوند.
رفع مشکلات احتمالی: در صورتی که Hot Reload باعث بروز مشکلاتی شده باشد، Hot Restart می‌تواند آن‌ها را برطرف کند.
نحوه استفاده از Hot Restart:

اعمال تغییرات گسترده در کد:

تغییرات در منطق برنامه که نیاز به بازنشانی کامل دارند، مانند تغییر در ساختار ویجت‌ها یا مدیریت وضعیت.

اجرای Hot Restart:

در ترمینال: در حالی که برنامه در حال اجراست، دکمه R را فشار دهید.
در IDE:
Android Studio: بر روی آیکون Hot Restart در نوار ابزار کلیک کنید.
Visual Studio Code: از نوار ابزار بالای پنجره یا از کلید ترکیبی Shift + F5 استفاده کنید.

مشاهده تغییرات در برنامه:

برنامه کاملاً بازنشانی شده و تغییرات جدید اعمال می‌شوند. وضعیت برنامه به حالت اولیه بازمی‌گردد.

مثال عملی از Hot Restart:

فرض کنید شما تصمیم دارید منطق محاسبه امتیازات در برنامه خود را تغییر دهید. پس از اعمال تغییرات در فایل main.dart، با اجرای Hot Restart، برنامه از ابتدا اجرا می‌شود و تغییرات جدید به درستی اعمال می‌شوند.

نکات مهم در استفاده از Hot Reload و Hot Restart

انتخاب مناسب: از Hot Reload برای تغییرات جزئی و از Hot Restart برای تغییرات گسترده استفاده کنید.
حفظ وضعیت: در هنگام استفاده از Hot Reload، وضعیت فعلی برنامه حفظ می‌شود، اما در Hot Restart وضعیت برنامه بازنشانی می‌شود.
سازگاری با IDE: اکثر IDEهای مدرن مانند Android Studio و Visual Studio Code از این ویژگی‌ها به صورت پیش‌فرض پشتیبانی می‌کنند و امکان استفاده آسان از آن‌ها را فراهم می‌آورند.
رفع مشکلات: اگر Hot Reload باعث بروز مشکلاتی شده باشد، با استفاده از Hot Restart می‌توانید وضعیت برنامه را به حالت پایدار بازگردانید.
مثال عملی ترکیبی
فرض کنید شما در حال طراحی یک فرم ورود هستید و نیاز به تغییرات جزئی در رابط کاربری دارید. با استفاده از Hot Reload، می‌توانید تغییرات را سریعاً مشاهده کنید. سپس، اگر تصمیم به افزودن قابلیت جدیدی مانند اعتبارسنجی ورودی‌ها بگیرید، از Hot Restart برای اعمال تغییرات گسترده‌تر استفاده کنید.

اجرای برنامه از طریق IDEها

همچنین می‌توانید از امکانات داخلی IDEهایی مانند Android Studio و Visual Studio Code برای اجرای برنامه استفاده کنید. این IDEها ابزارهای قدرتمندی برای مدیریت دستگاه‌ها، اجرای برنامه و استفاده از Hot Reload و Hot Restart فراهم می‌کنند.

مراحل اجرای برنامه در Android Studio:

باز کردن پروژه در Android Studio:

پروژه Flutter خود را در Android Studio باز کنید.

انتخاب دستگاه:

از نوار ابزار بالای Android Studio، دستگاه مورد نظر خود را از لیست دستگاه‌های متصل انتخاب کنید.

اجرای برنامه:

بر روی دکمه Run (مثل یک آیکون سبز رنگ با یک مثلث) کلیک کنید تا برنامه روی دستگاه انتخاب شده اجرا شود.

مراحل اجرای برنامه در Visual Studio Code:

باز کردن پروژه در VS Code:

پروژه Flutter خود را در Visual Studio Code باز کنید.

انتخاب دستگاه:

از پایین پنجره VS Code، دستگاه مورد نظر خود را از لیست دستگاه‌های متصل انتخاب کنید.

اجرای برنامه:

از نوار ابزار بالای VS Code، بر روی دکمه Run کلیک کنید یا از کلید ترکیبی F5 استفاده کنید تا برنامه اجرا شود.

نتیجه‌گیری

در این مقاله، به بررسی مفاهیم ابتدایی و ساخت اولین پروژه Flutter پرداختیم و تمامی جنبه‌های این موضوع را از سطح مبتدی تا پیشرفته مورد بررسی قرار دادیم. با آغاز از ایجاد پروژه جدید با استفاده از دستور flutter create یا از طریق IDEهای محبوب مانند Android Studio و Visual Studio Code، تا آشنایی با ساختار پوشه‌های پروژه و فایل‌های اصلی آن، گامی مهم در مسیر یادگیری Flutter برداشته‌ایم.

همچنین، نحوه مدیریت بسته‌ها و دارایی‌ها با استفاده از فایل pubspec.yaml و اهمیت آن در توسعه پروژه‌های Flutter را توضیح دادیم. در بخش دیگری از مقاله، به نقش کلیدی فایل main.dart و تابع اصلی main() در اجرای برنامه پرداختیم و تفاوت‌های بین ویجت‌های بدون وضعیت و دارای وضعیت را مورد بررسی قرار دادیم.

در نهایت، فرآیند اجرای پروژه روی شبیه‌سازها و دستگاه‌های واقعی را به همراه قابلیت‌های قدرتمند hot reload و hot restart که سرعت و کارایی فرآیند توسعه را بهبود می‌بخشند، معرفی کردیم.

با تسلط بر مفاهیم ابتدایی و ساخت اولین پروژه Flutter، شما پایه‌ای مستحکم برای پیشرفت در توسعه اپلیکیشن‌های موبایل با Flutter خواهید داشت. Flutter با ارائه ابزارها و قابلیت‌های متنوع، امکان ایجاد اپلیکیشن‌های زیبا، کارآمد و چندپلتفرمی را برای توسعه‌دهندگان فراهم می‌کند. پیشنهاد می‌کنیم با تمرین مستمر و استفاده از منابع معرفی شده در این مقاله، مهارت‌های خود را در Flutter ارتقا دهید و پروژه‌های پیچیده‌تری را به سراغ بگیرید.