آموزش فلاتر رایگان
به کاملترین آموزش فلاتر flutter خوش آمدید، یکی از مزیت های دیدن آموزش برنامه نویسی با فلاتر این هست که شما با یک بار کد زدن برای طراحی اپلیکیشن میتوانید هم خروجی اندروید و هم ios رو با هم داشته باشید همچنین به تازگی گرفتن خروجی برای وب هم با فلاتر ممکن شده و آموزش فلاتر وب در حال فراگیر شدن است یک خبر خوب هم براتون دارم که در اخر این مقاله یک کتاب آموزش فلاتر pdf رو میتونید دانلود کنید که در واقع یک آموزش فلاتر فارسی رایگان هست.
برای دوستانی که برنامه نویس اندروید هستند یک خبر خوب داریم که یک گام از دیگر بینندگان این مطلب جلوتر هستند چون در این مقاله به آموزش فلاتر در اندروید استودیو میپردازیم(نکته: همچنین امکان برنامه نویسی فلاتر در ویژوال استودیو هم هست به زودی یک آموزش نصب فلاتر در vscode هم نیز براتون میذاریم).
ما در این پست به صورت یک آموزش فلاتر پروژه محور در خدمت شما عزیزان هستیم هدف ما این هست که بی هیچ پیشنازی به شما کمک کنیم تا اولین خروجی رو در فلاتر بگیرید، که امیدواریم لذت استفاده از یک زبان برنامه نویسی کراس پلتفرم رو ببرید.
نکاتی که قبل از شروع آموزش فلاتر پیشرفته بهتر هست بدانیم
بریم برای آموزش فلاتر
نصب فلاتر در ویندوز
1- آموزش نصب Flutter در ویندوز برای برنامه نویسی اندروید
وبسایت flutter سندهای آموزشی برای انواع سیستم‌عامل‌ها را آماده کرده است. ما در این آموزش فلاتر فرض می‌کنیم تمامی روال نصب و … روی سیستم‌عامل ویندوز می‌باشد.
1-1- نیازهای سیستم برای شروع آموزش فلاتر
برای نصب و اجرای Flutter، محیط توسعه شما باید این حداقل شرایط را داشته باشد:
- سیستم‌عامل: Windows 7 SP1 یا بالاتر (64 بیتی)، مبتنی بر x86-64
- فضای حافظه: 1.32 گیگابایت (فضای دیسک برای IDE/Tools را شامل نمی شود).
- ابزار (Tools): Flutter به در دسترس بودن این ابزارها در محیط شما بستگی دارد.
- Windows PowerShell 5.0 یا جدیدتر (این از قبل به همراه ویندوز 10 نصب شده است).
- Git برای ویندوز x، با گزینه Use Git from the Windows Command Prompt.
اگر Git برای ویندوز از قبل نصب شده باشد، مطمئن شوید که می توانید دستورات git را از خط فرمان یا PowerShell اجرا کنید.
2-1- دانلود Flutter SDK
1- بسته نرم‌افزاری زیر را بارگیری کنید تا آخرین نسخه پایدار Flutter SDK را دریافت کنید:
برای سایر کانال‌های انتشار و ساخته‌های قدیمی‌تر، به صفحه نسخه‌های SDK رجوع کنید.
2- فایل zip را استخراج کرده و پوشه Flutter موجود را در محل نصب مورد نظر Flutter SDK قرار دهید (به عنوان مثال C:\src\flutter).
هشدار: Flutter را در دایرکتوری مانند C:\Program Files\ که به امتیازات بالاتر نیاز دارد نصب نکنید.
اگر نمی‌خواهید نسخه ثابت بسته نرم‌افزاری را نصب کنید، می توانید از مراحل 1 و 2 صرف نظر کنید، درعوض کد منبع را از repo Flutter در GitHub دریافت کنید و در صورت لزوم شاخه‌ها یا برچسب‌ها را تغییر دهید. مثلا:
اکنون آماده اجرای دستورات Flutter در کنسول Flutter هستید
C:\src>git clone https://github.com/flutter/flutter.git -b stable
3-1- بهروزرسانی مسیر
اگر می‌خواهید دستورات Flutter را در کنسول معمولی ویندوز اجرا کنید، این مراحل را برای اضافه کردن Flutter به متغیر محیط PATH (PATH environment variable) انجام دهید:
- از نوار جستجوی شروع، “env” را وارد کرده و ویرایش متغیرهای محیط
(Edit environment variables for your account) را برای حساب خود انتخاب کنید. - در بخش متغیرهای کاربر (User variables)، چک کنید که آیا ورودی‌ای به نام Path وجود دارد یا نه:
- اگر ورودی وجود دارد، مسیر کامل flutter\bin را با استفاده از ; به عنوان جداکننده از مقادیر موجود اضافه کنید.
- اگر ورودی وجود ندارد، یک متغیر کاربر جدید با نام Path با مسیر کامل flutter\bin به عنوان مقدار ایجاد کنید.
برای اینکه این تغییرات اعمال شود باید پنجره‌های کنسول موجود را ببندید و دوباره باز کنید.
یک نکته در آموزش فلاتر یادداشت : از انتشار نسخه 1.19.0 برنامه Flutter، Flutter SDK حاوی دستور dart در کنار دستور flutter است تا بتوانید برنامه های خط فرمان Dart را با سهولت بیشتری اجرا کنید. بارگیری Flutter SDK همچنین نسخه سازگار Dart را بارگیری میکند، اما اگر Dart SDK را به طور جداگانه بارگیری کرده‌اید، مطمئن شوید که نسخه Flutter دارت در اول مسیر یا path شما قرار دارد، زیرا ممکن است این دو نسخه با هم سازگار نباشند. دستور زیر (در macOS، linux و chrome OS) به شما می‌گوید که آیا دستورات flutter و dart از همان شاخه bin منشا می‌گیرند و بنابراین سازگار هستند. (بعضی از نسخه‌های ویندوز از دستور مشابهی پشتیبانی می‌کنند.)
همانطور که در بالا نشان داده شده است، این دو دستور از یک دایرکتوری bin نیستند. مسیر خود را به روز کنید تا از دستورات path-to-flutter-sdk/bin/ قبل از دستورات از usr/local/bin/ استفاده کنید (در این حالت). پس از بهروزرسانی shell خود برای اعمال تغییر، با اجرای دستور which یا where دوباره باید نشان دهید که دستورات flutter و دارت اکنون از همان دایرکتوری آمده‌اند.
برای کسب اطلاعات بیشتر در مورد دستور dart، از خط فرمان dart -h را اجرا کنید.
4-1- اجرای flutter doctor
از پنجره کنسولی که فهرست Flutter در آن قرار دارد (به بالا مراجعه کنید)، دستور زیر را اجرا کنید تا ببینید آیا برای تکمیل تنظیمات به سیستم عامل وابستگی دارید یا خیر:
C:\src\flutter>flutter doctor
این دستور محیط شما را بررسی میکند و گزارشی از وضعیت نصب Flutter را نمایش می‌دهد
هشدار : ابزار flutter از Google Analytics برای گزارش ناشناس آمار استفاده از ویژگی‌ها و گزارش های خرابی اساسی استفاده میکند. این داده ها برای کمک به بهبود ابزارهای Flutter در طول زمان استفاده می‌شوند.
تجزیه و تحلیل ابزار Flutter در اولین بار ارسال نمی‌شود. برای غیرفعال کردن گزارش،
flutter config –no-analytics را تایپ کنید. برای نمایش تنظیمات فعلی، config flutter را تایپ کنید. در صورت انصراف از تجزیه و تحلیل، یک رویداد انصراف ارسال می‌شود و سپس هیچ اطلاعات دیگری توسط ابزار Flutter ارسال نمی‌شود. با بارگیری Flutter SDK، شما با شرایط خدمات Google موافقت می‌کنید.توجه: خط مشی رازداری Google نحوه کار با داده در این سرویس را توصیف میکند. علاوه بر این، Flutter شامل Dart SDK است که ممکن است معیارهای استفاده و گزارش خرابی را به Google ارسال کند.
نصب اندروید استودیو در ویندوز برای زبان فلاتر
5-1- راه‌اندازی Android
1-5-1- نصب Android Studio
1- Android Studio را بارگیری و نصب کنید.
2- Android Studio را شروع کرده و از «Android Studio Setup Wizard» استفاده کنید. با این کار جدیدترین Android SDK ، Android SDK Command-line Tools و
Android SDK Build-Tools نصب می شود، که هنگام توسعه برای Android مورد نیاز Flutter هستند.
2-5-1- دستگاه Android خود را تنظیم کنید
یادداشت: Flutter برای تأمین وابستگی‌های سیستم‌عامل Android خود به نصب کامل Android Studio متکی است. با این حال، میتوانید برنامه‌های Flutter خود را در بسیاری از ویراستارهای دیگر بنویسید.
همچنین میتوانید برای بررسی بیشتر اندروید استودیو به مطلب آموزش اندروید استودیو بروید
ادامه آموزش فلاتر:
برای آماده‌سازی اجرا و آزمایش برنامه Flutter خود در دستگاه Android، به دستگاه Android مجهز به Android نسخه 4.1 (سطح API 16) یا بالاتر نیاز دارید.
1- گزینه‌های برنامه‌نویس (developer options) و اشکال زدایی USB (USB debugging) را در دستگاه خود فعال کنید. دستورالعمل‌های دقیق در اسناد Android موجود است.
2- فقط در Windows: درایور USB Google را نصب کنید.
3- با استفاده از کابل USB، تلفن خود را به رایانه وصل کنید. اگر دستگاه شما اجازه دسترسی خواست، به رایانه خود اجازه دسترسی به دستگاه خود را بدهید.
4- در ترمینال، دستور flutter devices را اجرا کنید تا بررسی کنید Flutter دستگاه Android متصل شما را تشخیص می‌دهد. به طور پیشفرض، Flutter از نسخه Android SDK که در آن ابزار adb شما مستقر است استفاده
میکند. اگر می‌خواهید Flutter از نصب دیگری از Android SDK استفاده کند، باید متغیر محیط ANDROID_SDK_ROOT را در آن فهرست نصب تنظیم کنید.
3-5-1- در ادامه روند آموزش فلاتر شبیه‌ساز Android را تنظیم کنید
برای آماده‌سازی اجرا و آزمایش برنامه Flutter خود بر روی شبیه‌ساز Android، این مراحل را دنبال کنید:
1- شتاب VM (VM acceleration) را روی دستگاه خود فعال کنید.
2- Android Studio را راه‌اندازی کنید، روی نماد AVD Manager کلیک کنید و ایجاد دستگاه مجازی (Create Virtual Device) را انتخاب کنید.
- در نسخه های قدیمی Android Studio، باید در عوض
Android Studio>Tools>Android>AVD Manager را انتخاب کرده و ایجاد دستگاه مجازی را انتخاب کنید. (زیر منوی Android فقط وقتی در داخل یک پروژه Android هستیم، وجود دارد). - اگر پروژه‌ای باز ندارید، میتوانید Configure>AVD Manager را انتخاب کرده و
Create Virtual Device را انتخاب کنید.
3- تعریف دستگاه را انتخاب کرده و گزینه Next را انتخاب کنید.
4- برای نسخه‌های Android که می‌خواهید شبیه‌سازی کنید، یک یا چند تصویر (image) سیستم را انتخاب کنید و گزینه Next را انتخاب کنید. تصویر x86 یا x86_64 توصیه می شود.
5- در بخش Emulated Performance، گزینه Hardware – GLES 2.0 را برای فعال کردن شتاب سخت‌افزاری انتخاب کنید.
6- تأیید کنید که پیکربندی AVD صحیح است و Finish را انتخاب کنید.
7- در Android Virtual Device Manager، روی run در نوار ابزار کلیک کنید. شبیه‌ساز راه‌اندازی شده و canvas پیشفرض نسخه و سیستم عامل انتخابی شما را نمایش می‌دهد.
گام سوم در آموزش فلاتر
2- تنظیم ویرایشگر
با استفاده از هر ویرایشگر متنی که با ابزارهای خط فرمان ما ترکیب شده است میتوانید با Flutter برنامه بنویسید و آموزش فلاتر ببینید. با این حال، توصیه می‌کنیم برای تجربه‌ای بهتر از یکی از افزونه‌های ویرایشگر ما استفاده کنید. این افزونه‌ها تکمیل کد، برجسته‌سازی نحو (syntax highlighting)، کمک‌های ویرایش ویجت، پشتیبانی از اجرا و رفع اشکال و موارد دیگر را برای شما فراهم می‌کنند. مراحل زیر را برای افزودن یک افزونه ویرایشگر برای
Android Studio و IntelliJ دنبال کنید.
1-2- نصب Android
Android Studio یک تجربه کامل و یکپارچه IDE را برای Flutter ارائه می‌دهد.
- Android Studio، نسخه 3.0 یا بالاتر
همچنین می توانید کد زدن و ادامه آموزش فلاتر از IntelliJ استفاده کنید:
- IntelliJ IDEA Community، نسخه 2017.1 یا بالاتر
- IntelliJ IDEA Ultimate، نسخه 2017.1 یا بالاتر
نصب فلاتر و افزونه دارت
2-2- نصب flutter و افزونه Dart
برای نصب این موارد:
- Android Studio را باز و آموزش فلاتر را شروع کنید.
- plugin preferences را باز کنید (Configure>Plugins از 6.3.0 یا بالاتر).
- Flutter plugin را انتخاب کرده و روی Install کلیک کنید.
- در صورت درخواست نصب Dart plugin، بله را کلیک کنید.
- وقتی از شما خواسته شد، روی Restart کلیک کنید
یادداشت: قبل از نسخه v3.6.3.0، دسترسی به تنظیمات plugin به صورت زیر بود:
1- plugin preferences را باز کنید (در MacOS به بخش Preferences>Plugins بروید؛
در Windows & Linux به File>Settings>Plugins بروید).2- Marketplace را انتخاب کنید، Flutter plugin را انتخاب کنید و روی Install کلیک کنید.
گام پنجم در آموزش فلاتر
3- آزمون و خطا
در این صفحه نحوه ایجاد یک برنامه Flutter جدید از الگوها، اجرای آن و تجربه “بارگیری مجدد داغ”
(hot reload) پس از ایجاد تغییر در برنامه، توضیح داده شده است.
1-3- ساخت application
1- IDE را باز کرده و یک پروژه جدید Flutter بسازید.
2- Flutter application را به عنوان نوع پروژه انتخاب کنید. سپس روی Next کلیک کنید.
3- تأیید کنید که مسیر Flutter SDK موقعیت SDK را مشخص میکند (اگر قسمت متن خالی است،
Install SDK را انتخاب کنید).
4- نام پروژه را وارد کنید (به عنوان مثال، myapp). سپس روی Next کلیک کنید.
5- روی finish کلیک کنید.
6- منتظر بمانید تا Android Studio، SDK را نصب کرده و پروژه را ایجاد کند.
یادداشت: هنگام ایجاد یک برنامه Flutter جدید، برخی از افزونه‌های Flutter IDE یک نام دامنه شرکت را به ترتیب معکوس درخواست می‌کنند، چیزی مانند com.example. هنگام انتشار برنامه، نام دامنه شرکت و نام پروژه به عنوان نام بسته (package) برای Android (Bundle ID برای iOS) استفاده می‌شود. اگر فکر می‌کنید ممکن است برنامه منتشر شود، بهتر است اکنون نام بسته را مشخص کنید. پس از انتشار برنامه نمی‌توان نام بسته را تغییر داد، بنابراین نام را منحصر به فرد انتخاب کنید.
دستورات بالا یک دایرکتوری پروژه Flutter به نام myapp ایجاد می‌کنند که شامل یک برنامه آزمایشی ساده است که از Material componentsاستفاده میکند.
2-3- اجرای application
– نوار ابزار اصلی (main toolbar) Android Studio را بیابید:
نکته: کد برنامه شما در lib/main.dart قرار دارد. برای توصیف سطح بالا (high-level) درباره آنچه هر بلوک کد انجام می‌دهد، به نظرات (comments) بالای آن فایل مراجعه کنید.
2- در انتخاب‌گر هدف (target selector)، دستگاه Android را برای اجرای برنامه انتخاب کنید. اگر هیچ دستگاهی موجود نباشد، Tools>Android>AVD Manager را انتخاب کرده و یکی را در آن‌جا ایجاد کنید. برای جزئیات بیشتر، به مدیریت AVDها مراجعه کنید.
هشدار: هنگام راه‌اندازی برنامه خود در سیستم‌عامل Mac، اگر این خطا را مشاهده کردید: نمی توانید به Lockdownd متصل شوید ، کد خطا -17. مطمئن شوید که رایانه خود را به فهرست دستگاه‌های مورد اعتماد اضافه کرده‌اید.
3- روی نماد اجرا (Run icon) در نوار ابزار کلیک کنید، یا مورد منو Run>Run را انتخاب کنید.
در ادامه آموزش فلاتر پس از اتمام ساخت برنامه، برنامه شروع‌کننده (starter) را در دستگاه خود مشاهده خواهید کرد.
3-3- hot reload را امتحان کنید
Flutter یک چرخه توسعه سریع (fast development cycle) با Stateful Hot Reload را ارائه می‌دهد که توانایی بارگیری مجدد کد یک برنامه زنده در حال اجرا بدون راه‌اندازی مجدد یا از دست دادن حالت برنامه می‌باشد. تغییر در منبع برنامه، به IDE یا ابزار خط فرمان خود بگویید که می‌خواهید hot reload انجام شود و تغییر در شبیه‌ساز یا دستگاه خود را مشاهده کنید.
1- lib/main.dart را باز کنید.
2- این رشته را تغییر دهید.
‘You have pushed the button this many times’
به
‘You have clicked the button this many times’
3- تغییرات خود را ذخیره کنید: Save All را فراخوانی کنید یا بر روی Hot Reload کلیک کنید.
هشدار: برنامه خود را متوقف نکنید. اجازه دهید برنامه شما اجرا شود.
رشته به روز شده را بلافاصله در برنامه در حال اجرا مشاهده خواهید کرد.
ساخت اولین برنامه با Flutter
این قسمت راهنمای ایجاد اولین برنامه Flutter شما است. اگر با کدنویسی شی‌گرا و مفاهیم اساسی برنامه‌نویسی مانند متغیرها، حلقه‌ها و شرط‌ها آشنا هستید، میتوانید ادامه این آموزش فلاتر را کامل متوجه شوید. شما به تجربه قبلی پیرامون برنامه‌نویسی دارت، موبایل یا وب نیاز ندارید.
1-4- مثال اول: ساخت برنامه Hello World!
با استفاده از دستورالعمل‌های شروع به کار با اولین برنامه Flutter، یک برنامه Flutter ساده و الگوی ایجاد شده ایجاد کنید. نام پروژه را startup_namer بگذارید (به جای flutter_app).
نکته: اگر “New Flutter Project” را به عنوان گزینه‌ای در IDE خود نمی‌بینید، مطمئن شوید که افزونه‌های Flutter و Dart را نصب کرده‌اید.
شما باید ابتدا فایل lib/main.dart را ویرایش کنید، جایی که کد دارت در آن موجود است.
1- محتوای فایل lib/main.dart را با کد زیر جایگزین کنید. همه کدها موجود در lib/main.dart را حذف کنید و با کد زیر جایگزین کنید. این کد عبارت “Hello World” را در مرکز صفحه نمایش می‌دهد.
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
2- برنامه را به روشی که IDE توصیف میکند، اجرا کنید. بسته به دستگاه خود، بایدAndroid ، iOS یا خروجی وب را ببینید.
نکته: اولین باری که برنامه را روی دستگاه فیزیکی اجرا می‌کنید، بارگیری آن مدتی طول می‌کشد. پس از آن، میتوانید برای بهروزرسانی سریع از hot reload استفاده کنید. اگر برنامه در حال اجرا باشد، ذخیره‌سازی نیز عمل hot reload را انجام می‌دهد. هنگام اجرای برنامه به صورت مستقیم از کنسول با استفاده از flutter run، r را وارد کنید تا بارگیری مجدد انجام شود.
– مشاهدات
- این آموزش فلاتر یک برنامه Material ایجاد میکند. Material یک زبان طراحی بصری است که به صورت استاندارد در موبایل و وب وجود دارد. Flutter مجموعه‌ای غنی از ویجت‌های Material را ارائه می‌دهد. ایده خوبی است که از عبارت “Material-Material-Design: true” در قسمت flutter فایل yaml استفاده کنید. این مورد به شما این امکان را می‌دهد که از ویژگی‌های Material بیشتر استفاده کنید، مانند مجموعه آیکن‌های از پیش تعریف شده آن.
- متد main() از نماد پیکان (=>) استفاده میکند. برای توابع یا متدهای یک خطی (one-line) از این نماد استفاده کنید.
- این برنامه کلاس StatelessWidget را گسترش (extend) می‌دهد، که باعث می‌شود برنامه به صورت ویجت ساخته شود. در Flutter، تقریباً همه چیز یک ویجت است، از جمله ترازبندی (alignment)، لایه‌گذاری (padding) و طرح‌بندی (layout).
- ویجت Scaffold، از کتابخانه Material، یک نوار برنامه (app bar) پیشفرض و یک ویژگی بدنه
(body property) را ارائه می‌دهد که درخت ویجت (widget tree) را برای صفحه اصلی نگه می‌دارد. زیرشاخه ویجت می تواند کاملاً پیچیده باشد. - وظیفه اصلی ویجت ارائه متد build() است که نحوه نمایش ویجت را از نظر سایر ویجت‌های سطح پایین‌تر توصیف میکند.
- بدنه برای این مثال از یک ویجت Center شامل یک ویجت فرزند (child) Text تشکیل شده است. ویجت Center زیردرخت کوچک ویجت خود را در مرکز صفحه هماهنگ میکند.
کمی فراتر با آموزش فلاتر
5- مثال دوم: استفاده از یک بسته خارجی (external package)
در این مرحله، شما شروع به استفاده از یک بسته منبع باز (open source) به نام english_words می‌کنید که شامل چند هزار کلمه انگلیسی پرکاربرد به علاوه برخی از توابع سودمند است. شما میتوانید بسته english_words و همچنین بسیاری از بسته‌های منبع باز دیگر را در وبسایت pub.dev پیدا کنید.
- فایل yaml دارایی‌ها (assets) و وابستگی‌های (dependencies) یک برنامه Flutter را مدیریت میکند. درpubspec.yaml ، بسته english_words (3.1.5 یا بالاتر) را مانند کد زیر به لیست وابستگی‌ها اضافه کنید:
2- هنگام مشاهده فایل pubspec.yaml در نمای ویرایشگر Android Studio، روی Pub get کلیک کنید. این گزینه بسته را وارد (pull) پروژه شما میکند. موارد زیر را باید در کنسول مشاهده کنید:
3- در فایل lib/main.dart، بسته جدید را وارد کنید:
آموزش فلاتر
هنگان تایپ، Android Studio به شما پیشنهاد می‌دهد تا کتابخانه‌هایی را وارد پروژه کنید. سپس رشته واردات (import) را به رنگ خاکستری نشان می‌دهد تا به شما اطلاع دهد که کتابخانه وارداتی استفاده نشده است (تاکنون).
یادداشت: “pascal case” (همچنین به عنوان “upper camel case” نیز شناخته می‌شود)، به این معنی است که هر کلمه در رشته، از جمله کلمه اول، با یک حرف بزرگ شروع می‌شود. بنابراین، “uppercamelcase” به “UpperCamelCase” تبدیل می‌شود.
4- به جای استفاده از رشته “Hello World” از بسته کلمات انگلیسی برای تولید متن استفاده کنید:
5- اگر برنامه در حال اجرا است، برای بهروزرسانی برنامه از hot reload استفاده کنید. هر بار که روی
hot reload کلیک می‌کنید یا پروژه را ذخیره می‌کنید، باید یک جفت کلمه متفاوت را که به طور تصادفی انتخاب شده است، در برنامه در حال اجرا مشاهده کنید. این به این دلیل است که تولید جفت کلمات در داخل متد build ایجاد می‌شود، که هر بار که MaterialApp به رندر نیاز دارد، یا هنگام تغییر پلتفرم در Flutter Inspector اجرا می‌شود.
ادامه آموزش فلاتر
5- یک ویجت Stateful اضافه کنید
ویجت‌های stateless غیرقابل تغییر (immutable) هستند، به این معنی که ویژگی‌های آن‌ها نمی‌توانند تغییر کنند و همه مقادیر نهایی (final) هستند. ویدجت‌های statefull حالتی را حفظ می‌کنند که ممکن است در طول عمر ویجت تغییر کند. پیاده‌سازی یک ویجت stateful حداقل به دو کلاس نیاز دارد: 1) کلاس StatefulWidget که نمونه‌ای از آن می‌سازیم. 2) کلاس State. کلاس StatefulWidget به خودی خود تغییرناپذیر است و می‌توان آن را دور ریخت و دوباره تولید کرد، اما کلاس State در طول عمر ویجت پابرجاست. در این مرحله، یک ویجت statefull را اضافه خواهیم کرد. RandomWords که کلاس State خود را ایجاد می کند تحت نام _RandomWordsState. سپس از RandomWords به عنوان یک child در داخل ویجت stateless MyApp موجود استفاده خواهید کرد.
1- کد boilerplate را برای یک ویجت مناسب ایجاد کنید. در فایل lib/main.dart، مکان نما را بعد از همه کدها قرار دهید، چند بار enter را وارد کنید تا از یک خط تازه شروع شود. در IDE خود، شروع به تایپ کلمه stful کنید. editor از شما می‌پرسد که آیا می‌خواهید یک ویجت Stateful ایجاد کنید. دکمه enter را فشار دهید تا قبول شود. کدboilerplate برای دو کلاس ظاهر می‌شود و مکان‌نما برای شما قرار می‌گیرد تا نام ویجتstateful خود را وارد کنید.
2- RandomWords را به عنوان نام ویجت خود وارد کنید. ویجت RandomWords در کنار ایجاد کلاس State خود کار کوچک دیگری انجام می‌دهد. هنگامی که RandomWords را به عنوان ویجت stateful وارد کردید، IDE به طور خودکار کلاس State همراهش را به‌روز میکند و نام آن را _RandomWordsState می‌گذارد. به طور پیشفرض، نام کلاس State با یک پیشوند “_” قرار می‌گیرد. IDE همچنین به طور خودکار کلاس State را برای گسترش (extend) از State<RandomWords> به روز میکند، که نشان می‌دهد که شما از یک کلاس State عمومی (Generic) استفاده می‌کنید که مخصوص استفاده با RandomWords است. بیشتر منطق برنامه در اینجا وجود دارد، این حالت (state) را برای ویجت RandomWords حفظ میکند. این کلاس لیستی از جفت کلمات ایجاد شده را ذخیره میکند که با پیمایش کاربر بی‌نهایت رشد میکند.
class RandomWords extends StatefulWidget { @override _RandomWordsState createState() => _RandomWordsState();} class _RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { return Container(); }}
3- متد build() در _RandomWordsState را به روز کنید:
class _RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final wordPair = WordPair.random(); return Text(wordPair.asPascalCase); } }
4- با ایجاد تغییراتی که در کد زیر نشان داده شده، کد تولید کلمه را از MyApp حذف کنید:
5- برنامه را دوباره راه‌اندازی کنید. برنامه باید مانند گذشته رفتار کند و هر بار که برنامه را بارگیری مجدد یا ذخیره می‌کنید، یک جفت کلمه را به کاربر نشان دهد.
امیدواریم از این آموزش فلاتر لذت برده باشید در ادامه کتاب آموزش فلاتر که قولش رو داده بودیم رو براتون قرار میدهیم.
البته در این مینی بوک یا کتاب کوچک فقط به آموزش فلاتر نپرداختیم و شما میتوانید با دیدن و خواندن این کتاب علاوه بر flutter به دیگر زبان های برنامه نویسی اندروید هم مسلط بشوید.
یادگیری برنامه‌نویسی مبتنی بر شئ گرایی:
یک برنامه‌نویس فضای فلاتر باید به مفهوم شئ گرایی و چگونگی تبعیت از این الگوی برنامه‌نویسی آشنایی یابد. چراکه این مفهوم یکی از کلیدی‌ترین مفاهیم در توسعه برنامه‌های کاربردی است. بر این مبنا از برنامه‌نویسان مبتدی خواسته شده تا به حل مسائل موجود در سناریو‌های واقعی از پیش تعیین شده به مدد کدها بپردازند. بدین ترتیب
این مهارت را پس از تکرار و تمرین‌های عملی فراوان و در سایه‌ی راهنمایی‌های یک برنامه‌نویس زبده ارتقا بخشند. با این تمهید است که در یادگیری مفاهیم شئ گرایی به توانایی‌های لازم دست یافته و ازاین‌پس قادر هستند، برنامه‌هایی بر این مبنا را تولید نمایند.
آموزش زبان برنامه‌نویسی دارت:
با توجه به وابستگی‌های فراوان بین فریم ورک فلاتر و زبان برنامه‌نویسی دارت مهم است که برنامه‌نویسان قبل از شروع آموزش فلاتر به دارت و ویژگی‌های آن نگاه عمیقی نمایند. در واقع فلاتر یک جعبه ابزار است که از زبان دارت به منظور کدنویسی و پدید آوردن برنامه‌های مختلف کمک می‌گیرد.
با این توصیف اهمیت مبانی دارت به منظور موفقیت در فلاتر غیر قابل اجتناب است. در این مسیر انواع آموزش‌های متنی، ویدیوئی، کلاس‌های آنلاین و بسیاری موارد دیگر وجود دارد که برنامه‌نویسان را به‌منظور یادگیری بهتر زبان دارت یاری می‌رسانند.
آشنایی با یکی از فریم ورک‌های ساخت اپلیکیشن موبایل:
بهتر است برنامه‌نویسان علاقه‌مند به فضای فلاتر حداقل به یکی از فریم ورک‌های ساخت اپلیکیشن موجود در این فضا آشنایی داشته باشند. بدین ترتیب برای آنکه بخواهند به‌منظور توسعه اپلیکیشن‌های چند پلتفرمی به فریم ورک توانمندی چون فلاتر هجرت نمایند، مسیر راحت‌تری را در پیش خواهند داشت. چراکه به راستی مجهز بودن به دانش و تجربه کافی موفقیت برنامه‌نویسان تازه کار را در مسیر توسعه آپ‌های موبایلی با فلاتر تضمین می‌سازد.
همچنین سایت رسمی فلاتر برای توسعه‌دهندگان دیگر پلتفرم‌ها آموزش‌های جالب توجهی را جهت ورود به بستر فلاتر در نظر گرفته است. این آموزش‌ها مخصوص کسانی است که حداقل به یک فریم ورک آشنایی کامل دارند.
آموزش رابط کاربری اعلانی:
یکی دیگر از مباحث مهمی که باید توسعه‌دهندگان فلاتر با آن آشنایی کاملی داشته باشند، آموزش مفهوم رابط کاربری اعلانی است. چراکه فلاتر بر خلاف دیگر فریم ورک‌های رایج که از روش دستوری برای این منظور استفاده می‌کنند، از شیوه‌ی اعلانی به منظور برنامه‌نویسی و طراحی رابط کاربری برنامه‌های خود کمک می‌گیرد.
در شیوه دستوری برنامه‌نویسان به نوشتن دستی عناصر رابط کاربردی و عملکرد کامل آن‌ها می‌پردازند. این در حالی است که در فلاتر توسعه‌دهندگان فقط موظف به نگارش کد‌های وضعیت فعلی UI هستند. بدین ترتیب به منظور سادگی، کوتاهی و سرعت بخشیدن به فرآیند‌ها، کار انتقال عناصر UI به فلاتر واگذار می‌شود. به همین دلیل است که ادعا می‌شود، برنامه‌نویسان مبتدی باید آموزش‌های لازم مربوط به رابط کاربری اعلانی را فراگرفته تا نحوه‌ی دستکاری و نگارش آن‌ها را بدانند.
یادگیری نحوه معماری اپلیکیشن فلاتر:
با اعمال یک معماری اصولی بر اپلیکیشن‌های فلاتر می‌توان در نگهداری، آزمایش و مقیاس‌دهی به توفیقات قابل توجهی در زمان توسعه پروژه‌ها دست یافت. بدین ترتیب یادگیری و نحوه‌ی تدوین یک ساختار معماری برای برنامه‌های کاربردی از اهمیت بالایی برخوردار است.
در این راستا الگوی Bloc به برنامه‌نویسان فلاتر جهت مدیریت حالت و ایجاد دسترسی به داده‌ها با هدف اعمال یک معماری بی‌نقص بر برنامه‌ها از یک موقعیت مرکزی، کمک شایانی می‌نماید. به واقع استفاده از Bloc از سوی توسعه‌دهندگان گوگل به دلیل سهولت بخشی به فرآیند ساخت معماری اپلیکیشن‌ها توصیه شده است.
آموزش قابلیت‌های راهبری به منظور مسیریابی و تعویض صفحات:
توابع و قابلیت‌های راهبری Navigator Functions که فلاتر برای توسعه‌دهندگان اپلیکیشن‌های موبایلی عرضه میکند. توانایی‌های عالی را به این قشر جهت تعویض و مسیریابی صفحات ارائه می‌نماید. نسخه‌های جدید فلاتر که بر مبنای رویکرد اعلانی پیاده‌سازی شده‌اند، این قابلیت را فراهم ساخته که پیاده‌سازی پیوند عمیق و استفاده از راهبر چندگانه میسر گردد. این امر در نسخه‌هایی که از رویکرد دستوری تبعیت می‌نمودند، قابل دستیابی نیست. بدین ترتیب در سازوکار جدید یکی از مباحث مهم در توسعه برنامه‌های کاربردی چون مسیریابی صفحات، متحول شده است.
یادگیری مباحث مربوط به بین‌المللی‌سازی(بومی‌سازی):
بومی‌سازی، بین‌المللی‌سازی و سفارشی‌سازی سه مبحث مهم با هدف افزایش کاربری اپلیکیشن‌ها است. توسعه برنامه‌های کاربردی به گونه‌ای که برای تمامی زبان‌ها و مناطق مختلف جغرافیایی مورد استفاده باشند، یکی دیگر از مفاهیم مهم و حیاتی است. تمامی اپلیکیشن‌ها بر اساس زبان پیشفرض طراحی شده، سپس بین‌المللی‌سازی می‌شوند. در آموزش فلاتر باید مباحث مربوط به بین‌المللی‌سازی نیز آموزش داده شود.
از زیر مجموعه‌های این مبحث می‌توان به نحوه ردنگاری منطقه جغرافیایی، مدیریت مقادیر مختص منطقه و نحوه‌ی تعریف منطقه جغرافیایی نام برد. در واقع اپلیکیشن ارائه شده، باید توانایی پشتیبانی از این رویکرد‌ها را داشته باشد.
آشنایی با api یا کلاینت HTTP:
سازوکار خدمات گیرنده HTTP در واقع ارسال درخواست‌ها و دریافت پاسخ آن‌ها از سمت سرور در قالب متنی با ماهیت HTTP است. برای برنامه‌نویسان یادگیری این خدمات و نحوه راه‌اندازی کلاینت HTTP و چگونگی استفاده از این ابزارها بسیار مهم است. چراکه انواع کلاینت‌ها چون Dio، Chopper و… از جداساز‌ها، فرم داده‌ها، لغو درخواست‌ها، دانلود فایل، زمان پایان و بسیاری آپشن‌های دیگر پشتیبانی می‌کنند که برای ساخت یک برنامه پرقدرت ضروری هستند. در غیر اینصورت پروژه فلاتر بازده و کارایی مد نظر را از خود نشان نمی‌دهد.
شرح مراحل کلی مورد نیاز برای آموزش فلاتر:
همان طور که گفتیم در انتهای این مطلب یک کتاب کوچک جهت آموزش بیشتر باب فلاتر برای شما تدارک دیده‌ایم. مبانی و منابع متفاوتی در سطح وب جهت آموزش فلاتر وجود دارد که علاقه‌مندان متناسب با نیاز خود می‌توانند یک یا چندین نمونه را انتخاب نمایند.
ولی بهتر است در ابتدا با دسته‌بندی‌ها یا بهتر بگوییم گام‌های مهمی که در مسیر یادگیری فلاتر در پیش دارید، آشنا شوید. بدین گونه به صورت ساماندهی شده و منظم‌تر میتوانید، مفاهیم مربوط به این فریم ورک محبوب را در ذهن خود چیدمان نمایید.
ساخت طرح‌بندی‌ها در فلاتر:
هنگامی که یک برنامه‌نویس به دنیای فلاتر قدم می‌گذارد در گام اول باید به نحوه‌ی ایجاد و ساخت طرح‌بندی و چگونگی چیدمان اجزا آشنا شود. اینکه با چه تمهیدی فلاتر به مدد ویجت‌ها به ساخت و پیاده‌سازی اجزای برنامه‌ها می‌پردازد و چگونه آن‌ها را با هم مرتبط می‌نماید، مسأله مهمی است.
درک محدوده‌ها در فلاتر:
چگونگی تنظیم موقعیت‌ها توسط ویجت‌های والد و آگاهی از نحوه جریان محدوده‌ها و اندازه‌ها و درک کامل از مفهوم طرح‌بندی، دومین گامی است که یک برنامه‌نویس به‌منظور رسیدن به تبحر کافی در فلاتر باید آن‌ها را سپری نماید.
توسعه تعاملی اپلیکیشن با فلاتر:
در این مرحله به برنامه‌نویسان روش افزودن یک ویجت حالتمند، جهت توسعه اپلیکیشن‌های ساخته شده بر پایه فلاتر آن هم به صورت تعاملی، آموزش داده می‌شود. بدین ترتیب برنامه‌نویسان به خوبی نحوه اضافه کردن ویجت‌های Stateful یا همان حالتمند را فرا می‌گیرند.
آموختن فریم ورک واکنش گرای فلاتر:
دیگر در این بخش به همان مبحث ابتدایی مطلب که نصب و راه‌اندازی فلاتر و پیاده‌سازی یک برنامه «Hello World» است، می‌رسیم. با آموزش مباحث گفته شده که گویی پیش نیازهای فلاتر است، دیدتان را در مورد مراحل آموزش این فریم ورک ارتقا داده‌ایم. از این مرحله به بعد شما آمادگی کاملی جهت یادگیری مباحث بسیار پیشرفته‌تر را دارید.
حتی شما از این پس قادرید تا اپلیکیشن‌های خود را بر اساس سناریو‌های واقعی پیاده‌سازی نمایید. برای تست آن‌ها نیز میتوانید از برنامه‌نویسان حرفه‌ای یا روش‌های تست که کدها و صحت عملکرد آن‌ها را آزمایش می‌کنند، استفاده نمایید. باهدف آشنایی بیشتر شما از تست‌های مختلف سنجش بخش های گوناگون اپلیکیشن فلاتر نیز در ادامه یاد می‌کنیم.
روش‌های مختلف تست اپلیکیشن‌های فلاتر:
پس از طراحی اپلیکیشن‌های فلاتر به‌منظور سنجش صحت عملکرد و کارایی می‌توان از تست‌های خودکار فلاتر که هر یک بخشی را مورد ارزیابی قرار می‌دهند، استفاده نمود. تست یونیت، تست ویجت و تست پکپارچه‌سازی هر یک کمک می‌کنند تا معایب احتمالی را کشف و برای رفع آن‌ها اقدامات لازم را صورت دهیم. در ادامه علاوه بر معرفی هر تست اهداف آن را نیز برایتان ذکر می‌کنیم.
آشنایی بیشتر با تست یونیت:
تست‌های یونیت آمده‌اند تا بر یک تابع، کلاس یا متد واحد تمرکز نموده و به آزمایش آن‌ها بپردازند. این تست‌ها بخش مهمی از تست‌های فلاتر را تشکیل داده و توسط پوشش کد، ردیابی می‌شوند. بدین ترتیب هرگاه به تأیید رفتار، تابع یا یک روش و کلاس نیاز باشد، می‌توان از تست‌های یونیت کمک گرفت. با این تفاسیر از مزایای استفاده از تست‌های یونیت می‌توان به این موارد اشاره نمود:
۱. تأیید نتایج مورد انتظار متد تحت آزمایش بر اساس ورودی داده شده
۲. امکان نگارش کد‌های قابل نگهداری و قابل آزمایش
۳. اجرای تست‌های خودکار از طریق افزونه‌های فلاتر برای Intellij و VSCode
۴. پشتیبانی از تست‌های در حال اجرا
۵. ارائه حلقه فیدبک سریع‌تر
۶. تنظیم نقاط وقفه Breakpoint
آشنایی بیشتر با تست ویجت:
تست‌های ویجت که به عنوان تست‌های عناصر در دیگر فریم ورک‌ها شناخته می‌شوند، توانایی آزمایش نحوه‌ی کارایی یک ویجت واحد را دارند. بدین ترتیب همانند تست‌های یونیت بخش مهمی از تست‌های فلاتر را به خود اختصاص می‌دهند. در واقع این تست به بررسی UI در هنگام پاسخگویی به تعاملات می‌پردازد. بدین ترتیب مشخص میکند که ویجت UI همان طور که انتظار می‌رود، عمل میکند یا نه. با توجه به ساختار این تست‌ها متوجه می‌شویم به نسبت تست‌های یونیت از جامعیت بیشتری برخوردارند.
چراکه چندین کلاس مختلف را مورد سنجش و راست آزمایی قرار می‌دهند. با این توضیحات بررسی وجود یا عدم وجود شرایط مناسب چرخه عمر ویجت و نیازهای ضروری جهت بهبود این چرخه، توسط این تست مشخص می‌گردد. کاربران فلاتر تست‌های ویجت را برای تمامی ویجت‌های معمولی اپلیکیشن‌های خود می‌نویسند. ولی این پروسه کاری به دلیل پیاده‌سازی بسیار ساده‌تر به نسبت یک سیستم UI توسعه یافته، چندان سخت و نگران کننده نیست.
آشنایی بیشتر با تست یکپارچه‌سازی:
زمانی که نیاز داریم تا یک بخش بزرگ یا تمامی قسمت‌های اپلیکیشن را به صورت واحد مورد آزمایش قرار دهیم از تست‌های یکپارچه‌سازی بر روی یک سری دستگاه‌های حقیقی یا مجازی(امولیتور‌ها، سیمولیتورها) کمک می‌گیریم. این تست قابلیت بررسی موارد بسیار مهمی را در قالب دو بخش به کارگیری اپلیکیشن تحت آزمایش بر روی دستگاه و هدایت برنامه از یک مجموعه تست‌های مجزا در اپلیکیشن‌ها دارد.
بدین ترتیب به مانند تست‌های پیشین به یک بخش خاص و کوچک اختصاص نداشته، بلکه کل برنامه را بازرسی و ارزیابی می‌نماید. با این توضیحات می‌توان گفت تست‌های یکپارچه‌سازی توانایی بررسی مبانی این چنینی را دارند:
۱. تأیید عملکرد اپلیکیشن‌ها
۲. سنجش کیفیت کارکرد تمامی ویجت‌ها و سرویس‌های تحت آزمایش
۳. بررسی رابطه ویجت‌های موجود در برنامه با هم
۴. ارزیابی درصد برآورده شدن انتظارات در یک سیستم به هم پیوسته
دلیل محبوبیت بالای آموزش فلاتر برای علاقه‌مندان این حوزه:
تمامی کسانی که به یادگیری فلاتر علاقه‌مند باشند، با کمی پشتکار، تمرین و تکرار به سهولت می‌توانند، به این فریم ورک آشنایی کاملی بیابند. یکی از بزرگترین مزایای فلاتر توانایی عالی آن در رساندن برنامه‌نویسان به درآمد‌های مالی قابل قبول است. این مزیت را نیز مدیون قابلیت خروجی چند منظوره‌ای بوده که ارائه می‌نمایند. یعنی فقط با یکبار کدنویسی، اپلیکیشن شما برای تمامی سیستم عامل‌های اندروید، مک، لینوکس و ISO قابل اجرا است.
حداقل رساندن زمان برنامه‌نویسی، بهینه بودن برنامه و پشتیبانی عالی از دیگر مزایای است که سبب شده، مبحث آموزش فلاتر به یکی از پر متقاضی‌ترین مفاهیم دنیای کنونی بدل شود. از طرفی نگهداری آسان‌تر حتی در طولانی مدت سبب شده، دارندگان و توسعه‌دهندگان اپلیکیشن‌های فلاتر دغدغه کمتری از این باب داشته و با خیال آسوده‌تری به سراغ این فریم ورک توانا بروند.
کلام آخر باب آموزش فلاتر:
اگر قبل از رفتن به سراغ فلاتر، دارت را فراگیرید آموزش فلاتر نه تنها سخت نیست، بلکه لذت بخش نیز خواهد بود. این امر را می‌توان در سرعت بالای پیاده‌سازی این فریم ورک به نسبت دیگر زبان‌ها مانند جاوا، ری اکت و دیگر زبان‌های این حوزه، به عینه مشاهده نمود. اگر شرایط زندگی و مشغله‌های کاری به شما اجازه دهد به سرعت میتوانید، به خیل وسیع برنامه‌نویسان فلاتر بپیوندید.
