در طی سال‌های گذشته تعداد فریمورک‌های توسعه اپلیکیشن به صورت چند سکویی به تعداد ده‌ها مورد رسیده است، هر کدام از این موارد کارایی و تجربه کاربری متفاوتی را عرضه می‌کنند. Google Flutter یکی از فریمورک‌های جدید در این حوزه است. از آنجایی که این فریمورک از جاوااسکریپت به عنوان یک پل برای توسعه‌دهندگان استفاده نمی‌کند (مانند ری‌اکت نیتیو)، بسیار مورد منحصر به فردی است.
ما در وبسایت راکت سعی داریم تا به خوبی جدیدترین تکنولوژی‌ها را به شما آموزش دهیم. در این حوزه نیز ما یک دوره آموزشی را تهیه کرده‌ایم که می‌توانید آن را در این لینک مشاهده بکنید.
در این آموزش متنی قصد داریم به صورت بسیار ساده با شیوه پیاده‌سازی یک پروژه Flutter شما را آشنا بکنیم. در این آموزش من از سیستم عامل مک‌او‌اس‌ایکس استفاده می‌کنم اما این موضوع چندان تاثیرگذار نخواهد بود. تنها باید به یک محیط خط فرمان مانند بش شل دسترسی داشته باشید. البته این موضوع می‌تواند روی توسعه اپلیکیشن برای پلتفرم موبایل تاثیر داشته باشد.
۱. شروع کار
ابتدای کار نیاز است که چند پیش نیاز را نصب و دانلود بکنید که من در زیر آن‌ها را لیست کرده‌ام:
- Xcode for iOS support
- Android Studio for Android support
- Android SDK (می‌توانید این مورد را بعد از دانلود آندروید استدیو دانلود بکنید)
بعد از نصب این موارد Xcode و یا Android Studio را باز کنید و مواردی که به شما پیشنهاد می‌دهد را نصب کنید. در نهایت برای اینکه مطمئن شوید همه موارد به خوبی کار می‌کند، یک پروژه جدید را ایجاد کرده و آن را اجرا نمایید.
حال که همه چیز به خوبی کار می‌کند، بیایید کارمان را با Flutter شروع بکنیم. Flutter SDK را از این وبسایت دانلود کرده و در هر جایی که می‌خواهید آن را از حالت فشرده خارج کنید. بعد از این کار نیاز است که متغیرهای محیطی را در سیستم عامل‌تان درست بکنید. در مک برای انجام چنین کاری نیاز است ابتدا وارد .bash_profile شوید:
sudo atom $HOME/.bash_profile
بعد از آن مسیر flutter/bin مربوط به SDK را به PATH اضافه نمایید:
export PATH=/Users/simon/dev/flutter/bin:$PATH
بعد از آن یک دستور شل را برای آپدیت شدن تغییرات اجرا کنید:
source $HOME/.bash_profile
حال می‌توانیم با استفاده از Flutter CLI کارها را انجام دهید. اولین کاری که نیاز است انجام دهید این است که از بروز بودن SDK خود مطمئن شوید. برای این کار کافی‌ست دستور upgrade را اجرا نمایید.
flutter upgrade
۲. حل کردن مشکلات
بعد از انجام upgrade، محیط Flutter به شما یک ابزار مفید را برای بررسی خطاها معرفی می‌کند. با اجرا کردن این ابزار شما از درست کار کردن و نصب شدن تمام چیزهای مربوط به SDK مطمئن می‌شوید. براستی می‌توان این مورد را یک ابزار بسیار کاربردی دانست:
flutter doctor
به چیزهایی که doctor به شما می‌گوید و پیام‌هایی که می‌دهد دقت بکنید و به تمام مشکلات آن توجه نمایید. ممکن است در روند توسعه یک اپلیکیشن چندین بار نیاز باشد که doctor را اجرا کنید. هر بار با اجرای این دستور می‌توانید اطلاعات اضافی را دریافت بکنید.
وقتی که با هیچ خطایی برخورد نکردید، نیاز است که سراغ دیگر قدم‌ها بروید.
به عنوان یک نکته باید بگویم که برای کار با xcode و اینکه shell بتواند به صورت تمام و کمال فرایند نصب را تشخیص دهد، نیاز است که کارهای زیر را انجام دهید:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install cocoapods
pod setup
برای کار کردن با آندروید استدیو نیز نیاز است که یک لایسنس را تایید بکنید:
flutter doctor –android-licenses
۳. پیدا کردن یک IDE و شروع یک پروژه
حال که Flutter به خوبی نصب شده است، باید دنبال یک IDE مناسب باشید. پلاگین‌هایی برای Flutter در Android Studio و IntelliJ توسعه داده شده است، اما ما در این آموزش می‌خواهیم از VSCode استفاده نماییم. این کد ادیتور نیز حاوی یک پلاگین به نام Flutter است.
VSCode را اجرا کرده و از منو View روی Command Palette کلیک کنید. Install را تایپ کرده و گزینه Extension را انتخاب کنید. حال flutter را سرچ کرده و پلاگین Flutter را نصب کنید. بعد از اینکار VS Code را بسته و مجددا باز کنید.
حال آمادگی لازم برای توسعه پروژه‌مان را در اختیار داریم. از طریق Command Palette گزینه Flutter: New Project را پیدا بکنید. نامی برای پروژه‌تان انتخاب کرده و در نهایت آن را ذخیره بکنید.
۴. راه‌اندازی دستگاه‌های مجازی
برای تست کردن پروژه، ما به یک شبیه‌ساز نیاز داریم تا محیط دستگاه و پلتفرم موبایلی را روی دسکتاپ پیاده‌سازی بکند. در سمت راست گوشه ادیتور VSCode روی نوار آبی چیزی تحت عنوان No Devices نوشته شده است. اگر قبلا با استفاده از این ادیتور اپلیکیشنی را توسعه داده باشید، می‌توانید لیست دستگاه‌های آن را از اینجا مشاهده بکنید. می‌توانید دستگاه‌های فعال را نیز از طریق Command Palette مشاهده بکنید.
اگر هیچ شبیه‌سازی در اختیار ندارید، دستور زیر را در ترمینال اجرا بکنید تا شبیه‌ساز iOS برای شما نمایان شود:
open -a simulator
بعد از آن می‌توانید با بستن و مجددا باز کردن VS Code شبیه ساز iOS را در محل گفته شده مشاهده بکنید.
حال اگر روی No Devices کلیک بکنید می‌توانید دستگاه‌های شبیه‌سازی فعال را مشاهده بکنید و یکی از آن‌ها را انتخاب نمایید. با گزینه iPhone X simulator شروع بکنید.
۴. اپلیکیشن اولیه‌تان را تست بکنید
حال که شبیه ساز به خوبی نصب شده است، تنها کافی‌ست که روی f5 کلیک بکنید و یا از گزینه Start Debugging در منو Debug استفاده بکنید. بعد از آن اپلیکیشن در شبیه ساز بارگذاری شده و شما می‌توانید با آن تعامل برقرار کنید. اگر این اتفاق سریعا نمی‌افتد نیاز است که کمی صبوری پیشه بکنید، چون ممکن است بیلد کردن اپلیکیشن کمی طول بکشد.
قبل از اینکه بتوانیم چنین کارهایی را روی دستگاه آندرویدی انجام دهیم، نیاز داریم که gradle را نصب بکنیم. برای اینکار به دایرکتوری ریشه پروژه‌تان مراجعه بکنید و دستور زیر را اجرا نمایید:
android/gradlew
بعد از این می‌توانید شبیه ساز آندروید را باز کرده و پروژه‌تان را دیباگ کنید.
یکی از ویژگی‌های بسیار خوب Flutter این است که از hot reloading پشتیبانی می‌کند، به این مفهوم که می‌توانید بدون بیلد کردن مجدد اپلیکیشن، تغییرات را به صورت سریع مشاهده بکنید.
حال در داخل فایل main.dart بیایید چند تغییر اساسی را به کلاس MyApp اعمال بکنیم. این در حالی انجام می‌شود که پروژه در شبیه ساز در حال اجرا شدن است.
primarySwatch: Colors.green,
home: new MyHomePage(title: 'Recipe Book'),=
حال پروژه را ذخیره کرده و منتظر اعمال تغییرات در شبیه‌ساز باشید.
5. آشنایی با سیستم ویجت Flutter
چیزی که تا به اینجای کار از آن صحبت نکرده‌ایم، زبانی است که Flutter از آن استفاده می‌کند. این زبان Dart نام دارد. Dart یک زبان برنامه‌نویسی به سبک C و البته شئ گرا است که توسط گوگل توسعه داده شده و در تمام روند توسعه اپلیکیشن توسط Flutter استفاده می‌شود. اگر تا به حال با زبان‌های برنامه‌نویسی برای توسعه وب یا اپلیکیشن موبایل آشنایی داشته باشید، کار با این زبان برای‌تان سخت نخواهد بود.
همه چیزها در Flutter براساس ویجت‌ها کار می‌کنند. ویجت‌ها را می‌توان بلاک‌هایی دانست که برای یک اپلیکیشن ساخته شده و شما در روند توسعه از آن‌ها استفاده می‌کنید. اگر با ری‌اکت نیتیو کار کرده باشید چنین فلسفه‌ای را می‌توانیم با نام کامپوننت‌ها مشاهده بکنیم. به صورت کلی اپلیکیشن شما در یک ساختار سلسله مراتبی از ویجت‌ها ایجاد می‌شود.
ما با کلاس MyApp آشنا شدیم. MyApp یک ویجت StatelessWidget (تغییرناپذیر) است. متد build() که ما آن را override کردیم به Flutter می‌گوید که چگونه ویجت باید رندر شود. این درست شبیه به تابع render() در ری‌اکت است.
این متد یک ویجت MaterialApp را برگشت می‌دهد که نشان می‌دهد اپلیکیشن در حال استفاده از طراحی متریال گوگل است. این متد در بازگشت چندین مشخصه یا property دارد که از جمله آن‌ها می‌شود ThemeData برای تعیین استایل بصری و شخصی‌سازی را نام برد.
۷. ویرایش محتوا
MyHomePage یکی دیگر از ویجت‌های Flutter است که که برعکس MyApp قابلیت تغییر را دارد و برای تعیین استایل کلی صفحه اول اپلیکیشن از آن استفاده می‌شود. رفتار و کارکرد این ویجت توسط کلاس _MyHomePageStata تعیین می‌شود. از این جا می‌توانید کنش‌ها و تعاملات اپلیکیشن را تعیین بکنید.
در حال حاضر اگر به آن دقت بکنید می‌بینید که ویجت‌های بسیاری از Flutter در این قسمت قرار گرفته است. بیایید تغییراتی در این کلاس ایجاد کنیم و آن را در اپلیکیشن‌مان نمایش دهیم.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
decoration: new BoxDecoration(color: Colors.brown[100]),
child: new RecipeWidget()
)
);
}
}
در کدهای بالا ما محتوای موجود را کنار گذاشتیم و یک ویجت کانتینتر قهوه‌ای را در جای‌ش گذاشتیم. اما ما نیاز داریم که یک ویجت سفارشی نیز ایجاد کنیم. در کدهای زیر شما ویجت RecipeWidget را می‌توانید مشاهده نمایید:
class RecipeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<Widget> widgets = new List<Widget>();
return new ListView(children: widgets);
}
}
۸. بارگذاری چند فایل جانبی
بعد از این کار قصد داریم که چند فایل جانبی، شامل چند تصویر را در یک ListView قرار دهیم. فایل‌های استاتیک در Flutter از طریق فایل pubspec.yaml در زیر قسمت flutter تعیین می‌شوند:
assets:
- img/breakfast.jpg
- img/curry.jpg
- img/pasta.jpg
همچنین در اینجا نیاز است که یک ساختار داده‌ای ساده را در main.dart ایجاد کنیم و تصاویر را در آن قرار دهیم:
var recipes = {
'breakfast.jpg': 'Start the day right with this nutritious breakfast.',
'pasta.jpg': 'Wow your friends by making your own fresh pasta.',
'curry.jpg': 'Show off your culinary skills with a rich curry.',
};
۹. در پایان
در نهایت، بیایید RecipeWidget را برای ایجاد یک لیست از ویجت‌هایی که نمایش داده می‌شود بروزرسانی کنیم. ما از image.asset برای بارگذاری فایل‌های جانبی داخل pubspec.yaml استفاده می‌کنیم.
recipes.forEach((thumb,caption) => widgets.add(
new Container(child:
new Padding(padding:
new EdgeInsets.all(16.0), child:
new ListTile(
leading: Image.asset('img/' + thumb, width:80.0),
title: Text(caption)
)
),
decoration:
new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: Colors.brown)
),
color: Colors.brown[200]
)
)
)
);
این تنها یک آموزش ساده و مقدماتی برای شروع کار با Flutter بود، ما در راکت یک آموزش کامل از Flutter را تهیه کرده‌ایم که با مراجعه به این لینک می‌توانید آن را مشاهده نمایید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید