آموزش فلاتر

برای دوستانی که برنامه نویس اندروید هستند یک خبر خوب داریم که یک گام از دیگر بینندگان این مطلب جلوتر هستند چون در این مقاله به آموزش فلاتر در اندروید استودیو میپردازیم(نکته: همچنین امکان برنامه نویسی فلاتر در ویژوال استودیو هم هست به زودی یک آموزش نصب فلاتر در 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 SDKhttps://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_1.22.6-stable.zip1- بسته نرم‌افزاری زیر را بارگیری کنید تا آخرین نسخه پایدار 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 stable3–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- راه‌اندازی Android1–5–1- نصب Android Studio1- 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- نصب AndroidAndroid 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- ساخت application1- 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 زیردرخت کوچک ویجت خود را در مرکز صفحه هماهنگ می‌کند.آموزش فلاتر