برای دوستانی که برنامه نویس اندروید هستند یک خبر خوب داریم که یک گام از دیگر بینندگان این مطلب جلوتر هستند چون در این مقاله به آموزش فلاتر در اندروید استودیو میپردازیم(نکته: همچنین امکان برنامه نویسی فلاتر در ویژوال استودیو هم هست به زودی یک آموزش نصب فلاتر در vscode هم نیز براتون میذاریم).
ما در این پست به صورت یک آموزش فلاتر پروژه محور در خدمت شما عزیزان هستیم هدف ما این هست که بی هیچ پیشنازی به شما کمک کنیم تا اولین خروجی رو در فلاتر بگیرید، که امیدواریم لذت استفاده از
1- آموزش نصب Flutter در ویندوز برای برنامه نآموزش فلاتر رایگان
ویسی اندروید
وب‌سایت flutter سندهای آموزشی برای انواع سیستم‌عامل‌ها را آماده کرده است. ما در این آموزش فلاتر فرض می‌کنیم تمامی روال نصب و … روی سیستم‌عامل ویندوز می‌باشد.
1–1- نیازهای سیستم برای شروع آموزش فلاتر
برای نصب و اجرای Flutter، محیط توسعه شما باید این حداقل شرایط را داشته باشد:
اگر Git برای ویندوز از قبل نصب شده باشد، مطمئن شوید که می توانید دستورات git را از خط فرمان یا PowerShell اجرا کنید.
2–1- دانلود Flutter SDK
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_1.22.6-stable.zip
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) انجام دهید:
برای اینکه این تغییرات اعمال شود باید پنجره‌های کنسول موجود را ببندید و دوباره باز کنید.
یک نکته در آموزش فلاتر یادداشت : از انتشار نسخه 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) را انتخاب کنید.
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 ارائه می‌دهد.
همچنین می توانید کد زدن و ادامه آموزش فلاتر از IntelliJ استفاده کنید:
2–2- نصب flutter و افزونه Dart
برای نصب این موارد:
یادداشت: قبل از نسخه 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 را وارد کنید تا بارگیری مجدد انجام شود.
– مشاهدات
