برنامهنویسی با فلاتر (Flutter) یکی از محبوبترین روشها برای توسعه اپلیکیشنهای موبایل است. فلاتر یک فریمورک متنباز است که توسط گوگل توسعه داده شده و از زبان برنامهنویسی دارت (Dart) استفاده میکند. در اینجا مراحل اولیه برای شروع برنامهنویسی با فلاتر آورده شده است:
نصب و راهاندازی محیط توسعه برای برنامهنویسی با فلاتر (Flutter) یکی از اولین و مهمترین مراحل است. در این بخش، به طور کامل و گامبهگام نحوه نصب و راهاندازی محیط توسعه فلاتر را توضیح میدهیم.
Flutter SDK شامل تمام ابزارهای لازم برای توسعه اپلیکیشنهای فلاتر است. مراحل نصب آن به شرح زیر است:
به وبسایت رسمی فلاتر بروید: flutter.dev.
آخرین نسخه Flutter SDK را برای سیستمعامل خود (ویندوز، مک، یا لینوکس) دانلود کنید.
فایل دانلود شده را از حالت فشرده خارج کنید و آن را در یک مسیر مناسب قرار دهید (مثلاً C:\flutter
در ویندوز یا /Users/yourusername/flutter
در مک).
برای دسترسی به دستورات فلاتر از ترمینال یا خط فرمان، باید مسیر Flutter SDK را به متغیر محیطی PATH
اضافه کنید.
ویندوز:
به Control Panel > System and Security > System > Advanced system settings
بروید.
روی Environment Variables
کلیک کنید.
در بخش System variables
، متغیر Path
را انتخاب کرده و روی Edit
کلیک کنید.
مسیر پوشه bin
داخل Flutter SDK را اضافه کنید (مثلاً C:\flutter\bin
).
مک یا لینوکس:
فایل پروفایل سیستم خود را باز کنید (مثلاً ~/.bashrc
، ~/.zshrc
، یا ~/.bash_profile
).
خط زیر را به انتهای فایل اضافه کنید:
export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"
به جای [PATH_TO_FLUTTER]
، مسیر پوشه Flutter SDK را وارد کنید (مثلاً /Users/yourusername/flutter/bin
).
تغییرات را ذخیره کرده و ترمینال را ریاستارت کنید یا دستور زیر را اجرا کنید:
source ~/.bashrc
در ترمینال یا خط فرمان، دستور زیر را اجرا کنید:
flutter --version
اگر نصب موفقیتآمیز باشد، نسخه Flutter SDK نمایش داده میشود.
Android Studio محیط توسعه یکپارچه (IDE) رسمی برای توسعه اپلیکیشنهای اندروید است و برای کار با فلاتر بسیار مفید است.
به وبسایت رسمی Android Studio بروید: developer.android.com/studio.
نسخه مناسب سیستمعامل خود را دانلود و نصب کنید.
پس از نصب Android Studio، آن را باز کنید.
به File > Settings > Plugins
بروید.
در بخش جستجو، Flutter
را تایپ کرده و روی Install
کلیک کنید.
پس از نصب Flutter، پلاگین Dart نیز به طور خودکار نصب میشود.
Android Studio را باز کنید و به Tools > SDK Manager
بروید.
در تب SDK Platforms
، آخرین نسخه Android SDK را نصب کنید.
در تب SDK Tools
، Android SDK Build-Tools
و Android Emulator
را نصب کنید.
اگر ترجیح میدهید از VS Code به جای Android Studio استفاده کنید، مراحل زیر را دنبال کنید:
به وبسایت رسمی VS Code بروید: code.visualstudio.com.
نسخه مناسب سیستمعامل خود را دانلود و نصب کنید.
VS Code را باز کنید.
به بخش Extensions بروید (Ctrl+Shift+X
یا Cmd+Shift+X
در مک).
Flutter
را جستجو کرده و روی Install
کلیک کنید.
پلاگین Dart نیز به طور خودکار نصب میشود.
اگر قصد دارید اپلیکیشنهای iOS نیز توسعه دهید، باید Xcode را روی مک نصب کنید.
Xcode را از Mac App Store دانلود و نصب کنید.
پس از نصب، Xcode را باز کرده و دستور زیر را در ترمینال اجرا کنید تا ابزارهای خط فرمان نصب شوند:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
Xcode را باز کنید و به Xcode > Preferences > Locations
بروید.
مطمئن شوید که Command Line Tools تنظیم شده است.
flutter doctor
پس از نصب همه ابزارها، دستور flutter doctor
را اجرا کنید تا مطمئن شوید همه چیز به درستی تنظیم شده است.
در ترمینال یا خط فرمان، دستور زیر را اجرا کنید:
flutter doctor
این دستور وضعیت نصب و تنظیمات را بررسی میکند. اگر مشکلی وجود داشته باشد، راهحلهای پیشنهادی را ارائه میدهد.
برای اجرای اپلیکیشنهای فلاتر، میتوانید از شبیهسازهای اندروید یا iOS استفاده کنید.
Android Studio را باز کنید.
به Tools > Device Manager
بروید.
روی Create Device
کلیک کنید و یک دستگاه مجازی (AVD) ایجاد کنید.
Xcode را باز کنید.
به Window > Devices and Simulators
بروید.
یک شبیهساز iOS ایجاد کنید.
یک پروژه فلاتر جدید ایجاد کنید:
flutter create my_first_app
به پوشه پروژه بروید:
cd my_first_app
برنامه را اجرا کنید:
flutter run
اگر همه چیز به درستی تنظیم شده باشد، اپلیکیشن روی شبیهساز یا دستگاه فیزیکی اجرا میشود.
ایجاد اولین پروژه فلاتر (Flutter) یکی از مراحل هیجانانگیز و مهم در یادگیری این فریمورک است. در این بخش، به طور کامل و گامبهگام نحوه ایجاد و اجرای اولین پروژه فلاتر را توضیح میدهیم.
برای ایجاد یک پروژه جدید فلاتر، از دستور flutter create
استفاده میکنیم. این دستور یک ساختار پروژه استاندارد ایجاد میکند.
ترمینال یا خط فرمان را باز کنید.
دستور زیر را اجرا کنید تا یک پروژه جدید ایجاد شود:
flutter create my_first_app
my_first_app
: نام پروژه شماست. میتوانید آن را به دلخواه تغییر دهید.
پس از اجرای دستور، یک پوشه با نام پروژه شما (مثلاً my_first_app
) ایجاد میشود. ساختار این پوشه به صورت زیر است:
my_first_app/ ├── android/ ├── ios/ ├── lib/ ├── test/ ├── pubspec.yaml └── ...
android/
: کدهای خاص پلتفرم اندروید.
ios/
: کدهای خاص پلتفرم iOS.
lib/
: کدهای اصلی برنامه (فایل main.dart
نقطه شروع برنامه است).
test/
: تستهای واحد (Unit Tests).
pubspec.yaml
: فایل تنظیمات پروژه و مدیریت وابستگیها.
پس از ایجاد پروژه، میتوانید آن را اجرا کنید.
در ترمینال، به پوشه پروژه بروید:
cd my_first_app
دستور زیر را اجرا کنید تا برنامه را اجرا کنید:
flutter run
اگر شبیهساز (Emulator) یا دستگاه فیزیکی متصل باشد، برنامه روی آن اجرا میشود.
اگر شبیهساز اجرا نشده باشد، فلاتر به شما پیشنهاد میکند که یک شبیهساز را راهاندازی کنید.
پس از اجرای پروژه، میتوانید کدهای آن را ویرایش کنید.
اگر از Android Studio استفاده میکنید، پروژه را از طریق File > Open
باز کنید.
اگر از VS Code استفاده میکنید، پروژه را از طریق File > Open Folder
باز کنید.
main.dart
فایل main.dart
در پوشه lib/
قرار دارد. این فایل نقطه شروع برنامه است.
کد پیشفرض این فایل به صورت زیر است:
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), ), ); } }
میتوانید متنها یا رنگها را تغییر دهید. مثلاً:
تغییر عنوان صفحه:
home: MyHomePage(title: 'My First Flutter App'),
تغییر رنگ تم:
primarySwatch: Colors.green,
اگر میخواهید از کتابخانههای خارجی استفاده کنید، باید آنها را به فایل pubspec.yaml
اضافه کنید.
pubspec.yaml
فایل pubspec.yaml
را باز کنید.
در بخش dependencies
، وابستگیهای مورد نیاز را اضافه کنید. مثلاً:
dependencies: flutter: sdk: flutter http: ^0.13.3
پس از ویرایش pubspec.yaml
، دستور زیر را اجرا کنید تا وابستگیها نصب شوند:
flutter pub get
پس از هر تغییر در کد، برنامه را دوباره اجرا کنید تا تغییرات را مشاهده کنید:
flutter run
اگر میخواهید یک فایل نصب برای اندروید یا iOS ایجاد کنید، از دستورات زیر استفاده کنید:
دستور زیر را اجرا کنید:
flutter build apk
فایل APK در مسیر build/app/outputs/flutter-apk/
ایجاد میشود.
دستور زیر را اجرا کنید:
flutter build ios
فایل IPA در مسیر build/ios/
ایجاد میشود.
با مفاهیم پایه فلاتر مانند ویجتها، مدیریت حالت (State Management)، و ناوبری (Navigation) آشنا شوید.
پروژههای کوچک و ساده ایجاد کنید تا مهارتهای خود را تقویت کنید.
پس از ایجاد پروژه، ساختار فایلها به صورت زیر خواهد بود:
lib/
: این پوشه حاوی کدهای اصلی برنامه است. فایل main.dart
نقطه شروع برنامه است.
android/
و ios/
: این پوشهها حاوی کدهای خاص پلتفرم هستند.
pubspec.yaml
: این فایل برای مدیریت وابستگیها و تنظیمات پروژه استفاده میشود.
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!'), ), ); } }
برنامه را با دستور flutter run
اجرا کنید.
اگر همه چیز به درستی تنظیم شده باشد، یک اپلیکیشن ساده با متن “Hello, Flutter!” نمایش داده میشود.
فلاتر از ویجتها برای ساخت رابط کاربری استفاده میکند.
دو نوع ویجت اصلی وجود دارد: StatelessWidget
و StatefulWidget
.
StatelessWidget
: برای ویجتهایی که حالت (state) تغییر نمیکند.
StatefulWidget
: برای ویجتهایی که حالت آنها تغییر میکند.
برای مدیریت حالت در فلاتر، میتوانید از روشهای مختلفی مانند setState
، Provider
، Riverpod
، Bloc
و غیره استفاده کنید.
برای حرکت بین صفحات مختلف، از Navigator
استفاده میشود. مثال:
Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), );
وابستگیهای پروژه در فایل pubspec.yaml
تعریف میشوند. مثال:
dependencies: flutter: sdk: flutter http: ^0.13.3
دیدگاه بگذارید