آموزش فلاتر (Flutter)

دسته بندی: برنامه نویسی موبایل

آموزش فلاتر

در این صفحه می خوانید:

معرفی فلاتر (Flutter)

فلاتر (Flutter)  یک کیت توسعه نرم افزار UI اوپن سورس است که توسط گوگل ساخته شده است. جهت توسعه برنامه های کاربردی برای Android، iOS، Windows، Mac، Linux، Google Fuchsia و وب استفاده می شود. نسخه اول Flutter با نام رمزگذاری شده "Sky" شناخته شد و روی سیستم عامل اندروید اجرا شد. این برنامه در اجلاس برنامه نویس Dart 2015 رونمایی شد، با هدف اعلام شده که قادر به ارائه مداوم با سرعت 120 فریم در ثانیه است.

همچنین فلاتر (Flutter) یک فریمورک اوپن است که در سال 2017 توسط گوگل معرفی شد و به کمک آن می توانید اپلیکیشن های نیتیو (Native) برای اندروید و iOS بسازید. شما به کمک فلاتر می توانید با یک بار کدنویسی یک اپلیکیشن زیبا و نیتیو طراحی کنید که روی اندروید و iOS قابل اجرا است. همچنین شما میتوانید طراحی رابط کاربری اپلیکیشن های Native که با کاتلین، جاوا و یا سوئیفت می نویسید را نیز با Flutter انجام دهید.

تاریخچه فلاتر (Flutter)

اولین نسخه فلاتر به نام Sky برای سیستم عامل اندروید ارائه شد. این برنامه در نشست توسعه دهندگان دارت سال 2015 معرفی شد. گوگل در نشست توسعه دهندگان Google در شانگهای در تاریخ 4 دسامبر 2018 اعلام کرد در رویدادی به نام Flutter Live نسخه اول فلاتر را معرفی خواهد کرد. در خلال اصلی روزهای توسعه دهنده Google در شانگهای، Google اعلام کرد انتشار پیش نمایش 2 Flutter که آخرین نسخه بزرگ قبل از Flutter 1.0 است. در تاریخ 4 دسامبر 2018، Flutter 1.0 در رویداد Flutter Live منتشر شد و اولین نسخه "پایدار" Framework را نشان داد. در 11 دسامبر سال 2019، Flutter 1.12 در رویداد Flutter Interactive منتشر شد، اعلام شد که Flutter اولین پلتفرم UI است که برای محاسبات محیطی طراحی شده است. در رویداد Flutter Live اولین نسخه پایدار این فریمورک معرفی و منتشر شد.

ویژگی های فلاتر (Flutter)

فلاتر اوپن سورس است. شما می توانید مستندات Flutter را در گیت هاب در این صفحه ببینید. فلاتر چندسکویی است. شما با یک بار نوشتن کد می توانید دو خروجی برای اندروید و iOS بگیرید. خروجی فلاتر نیتیو (Native) است. این ویژگی باعث افزایش فوق العاده کارایی اپلیکیشن ها به نسبت سایر تکنولوژی های چندسکویی می شود.

Hot Reload

ویژگی Hot Reload Flutter به شما کمک می کند تا به سرعت و به راحتی آزمایش کنید، رابط کاربر را ایجاد کنید، ویژگی های خود را اضافه کنید و اشکالات را برطرف کنید. Hot Reload با تزریق فایل های کد منبع به روز شده در دستگاه در حال اجرا Dart Virtual (VM) کار می کند. بعد از اینکه کلاس های VM با نسخه های جدید زمینه ها و توابع به روزرسانی می کنند، فریمورک Flutter بطور خودکار درخت ویجت را مجدداً بازسازی می کند و به شما امکان می دهد تا به سرعت اثرات تغییرات خود را مشاهده کنید.

آموزش جامع فلاتر

این ویژگی سرعت برنامه نویسی اپلیکیشن ها را افزایش می دهد. به این صورت که هر بار که کد برنامه را تغییر می دهید نیاز نیست منتظر بمانید تا برنامه از نو کامپایل شود و خیلی سریع می توانید تغییرات را ببینید.

توسعه کراس پلتفرم

CPD باعث صرفه جویی در وقت، انرژی و پول می شود. با استفاده از Flutter، شما باید یک بار کد را بنویسید، آن را برای دو برنامه حفظ و استفاده کنید. نیاز به تهیه کد متفاوتی برای یک بستر متفاوت است. با استفاده از Flutter، می توانید برای پلتفرم Fuchsia که یک سیستم عامل آزمایشی است که در Google انجام می شود، تلاش کنید.

ویژگی های قابل دسترس نیتیو و SDK ها

روند توسعه برنامه شما از طریق کدهای نیتیو Flutter، ادغام های شخص ثالث و API های سیستم عامل آسان و لذت بخش می شود. بنابراین، شما می توانید به راحتی به ویژگی های نیتیو و SDK ها در هر دو سیستم عامل اندروید و iOS دسترسی پیدا کرده و از زبان های برنامه نویسی پرکاربرد مانند Kotlin و Swift استفاده مجدد کنید.

کد مینیمال

فلاتر با استفاده از زبان برنامه نویسی دارت توسعه یافته است. دارت از ترکیب JIT و AOT استفاده می کند که به بهبود زمان کلی راه اندازی، عملکرد و سرعت بخشیدن به عملکرد کمک می کند. JIT سیستم عملکرد را با عملکرد Hot Reload بهبود می بخشد. این نرم افزار UI را بدون تلاش برای ساختن یک محصول جدید، تازه می کند.

فلاتر و دارت (Dart)

دارت (Dart) یک زبان برنامه نویسی بهینه شده برای برنامه های سریع در سیستم عامل های مختلف است. دارت توسط گوگل توسعه یافته و برای ساختن برنامه های موبایل، دسکتاپ و وب مورد استفاده قرار می گیرد. شرکت گوگل زبان برنامه نویسی دارت (Dart) را طراحی کرد تا جاوااسکریپت که زبان داخلی مرورگرهای وب است را توسط کامپایلر dart2js با آن جایگزین کند. کد نوشته شده در Dart می تواند در بعضی موارد سریعتر از کد معادل با استفاده از اسکریپت های جاوااسکریپت اجرا شود. نحو Dart براساس جاوااسکریپت است و برپایه کلاس، وراثت یگانه و شی گرایی تعریف شده که شبیه زبان C می باشد. برنامه های Flutter را می توان با زبان برنامه نویسی Dart نوشت.

کاربرد فلاتر (Flutter)

روش های بی شماری برای توسعه برنامه های کاربردی موبایل cross-platform وجود دارد. واضح ترین کاربردهای بومی، مبتنی بر ابزاری است که به طور خاص برای پلتفرم مربوطه ساخته شده است (Google و Apple). با این حال، آنها شما را مجبور می کنند یک برنامه جداگانه و در عین حال یکسان را با کدی متفاوت و غیر قابل حمل دوباره ایجاد کنید، که این موضوع را به یک پیشنهاد گران قیمت تبدیل می کند. سپس روشهای مختلفی از کار با یک کدبانوی واحد وجود دارد که هرکدام مزایا و اشکالاتی دارند.

در تاریخ 27 فوریه، گوگل اولین نسخه بتا Flutter را منتشر کرد. در 4 دسامبر، این رویداد ویژه ای را در موزه علوم لندن با نام "Flutter Live" ترتیب داد تا نسخه 1.0 SDK خود را به سبک اجرا کند. به نظر می رسد گوگل امید جدیدی برای آخرین debutante خود دارد.

فلاتر بر اساس زبان برنامه نویسی Dart است، که بطور خاص برای توسعه تلفن همراه ساخته شده است. Flutter از موتور رندر مخصوص خود براساس كتابخانه گرافیکی 2D Skia كه توسط گوگل در سال 2005 خریداری شده بود، استفاده كرد و متعاقبا تحت مجوز BSD اصلاح شده در دسترس قرار گرفت و هم اکنون توسط سیستم عامل های Chrome و Google Chrome استفاده می شود و این زمانی است که شما می توانید تفاوت قابل توجهی را بین این و یک برنامه کاملاً نیتیو مشاهده کنید.

Flutter به جای استفاده از اجزای گرافیکی سیستم، همه چیز را از جمله بازتولید های کامل به پیکسل در عناصر رابط iOS و اجزای طراحی Material برای Android ترسیم می کند.

فلاتر برای توسعه اندروید و آی او اس (iOS)

دانش و مهارت مجموعه اندروید و آی او اس (iOS) شما هنگام ساختن با Flutter بسیار ارزشمند است زیرا Flutter برای قابلیت ها و تنظیمات بی شماری به سیستم عامل تلفن همراه اعتماد دارد. Flutter روشی جدید برای ساخت UI موبایل دارد، اما برای ارتباط با Android و iOS برای کارهای غیر از UI دارای یک سیستم افزونه است.

فلاتر برای توسعه وب

علاوه بر برنامه های تلفن همراه، Flutter از تولید محتوای وب ارائه شده با استفاده از فناوری های وب مبتنی بر استانداردها پشتیبانی می کند: HTML، CSS و JavaScript. با پشتیبانی از وب، می توانید کدهای Flutter موجود در Dart را در یک تجربه مشتری که می تواند در مرورگر تعبیه شده و در هر سرور وب مستقر شود، کامپایل کنید. می توانید از تمام ویژگی های Flutter استفاده کنید، و نیازی به افزونه مرورگر ندارید.

معماری فلاتر (Flutter)

معماری فلاتر

اجزای اصلی فلاتر عبارتند از:

پلتفرم دارت

برنامه های Flutter به زبان دارت نوشته شده اند و از بسیاری از ویژگی های پیشرفته این زبان استفاده می کنند. در ویندوز، macOS و لینوکس از طریق پروژه جاسازی نیمه رسمی Flutter Desktop، Flutter در دستگاه مجازی Dart اجرا می شود که دارای یک موتور کامپایل Just In Time است. در هنگام نوشتن و اشکال زدایی برنامه، Flutter از Just In Time استفاده می کند و امکان Hot Reload را فراهم می کند، که با استفاده از آن می توانید تغییرات در فایل های منبع را به یک برنامه در حال اجرا تزریق کنید.

فلاتر با پشتیبانی از Hot Reload، این امر را گسترش می دهد، جایی که در بیشتر موارد تغییر در سورس کد می تواند بلافاصله در برنامه در حال اجرا بدون نیاز به راه اندازی مجدد یا از بین رفتن حالت منعکس شود. این ویژگی که در فلاتر اجرا شده است ستایش گسترده ای را به دست آورده است. نسخه های منتشر شده از برنامه های Flutter با AOT در Android و iOS گردآوری شده است و باعث عملکرد عالی Flutter در دستگاه های تلفن همراه می شود.

موتور فلاتر

موتور Flutter، که در درجه اول در سی پلاس پلاس نوشته شده است، با استفاده از کتابخانه گرافیکی Skia Google، پشتیبانی رندر سطح پایین را ارائه می دهد. علاوه بر این، آن را با SDK های خاص برای سیستم عامل مانند برنامه های ارائه شده توسط Android و iOS واسط برقرار می کند. Flutter Engine یک ران تایم قابل حمل برای میزبانی از برنامه های Flutter است. این کتابخانه کتابخانه های اصلی Flutter، از جمله انیمیشن و گرافیک، فایل و شبکه I / O، پشتیبانی از قابلیت دسترسی، معماری افزونه و یک ابزار ران تایم و کامپایل Dart را پیاده سازی می کند. بیشتر توسعه دهندگان با Flutter از طریق Flutter Framework تعامل می کنند، که یک فریمورک رسپانسیو مدرن و مجموعه غنی از ویجت های پلتفرم، چیدمان و پایه را فراهم می کند.

کتابخانه Foundation

کتابخانه Foundation، که در دارت نوشته شده است، کلاس ها و کارکردهای اساسی را ارائه می دهد که برای ساخت برنامه های کاربردی با استفاده از Flutter، مانند API برای ارتباط با موتور استفاده می شود.

ویجت ها

طراحی UI در Flutter شامل استفاده از ترکیب برای جمع آوری / ایجاد "ویجت" از سایر ویجت ها است. ترفند درک این موضوع این است که بدانیم هر درخت از اجزای سازنده (ویجت) که تحت یک روش واحد ()build ساخته می شود نیز به عنوان یک ویجت واحد گفته می شود. این بدان دلیل است که آن ویجت های کوچکتر نیز از ویجت های حتی کوچکتر ساخته شده اند و هرکدام یک روش ()build ساخت خاص خود را دارند. اینگونه است که فلاتر از ترکیب استفاده می کند.

اسناد می گویند: "ویجت توضیحات تغییرناپذیر بخشی از رابط کاربری است." یک انسان به شما خواهد گفت که این یک طرح است، که یک روش بسیار ساده تر برای فکر کردن در مورد آن است. با این وجود، باید به خاطر داشته باشید که انواع مختلف ویجت ها در Flutter وجود دارد، و شما نمی توانید همه آنها را ببینید یا لمس کنید. متن یک ویجت است، اما TextStyle آن نیز وجود دارد که مواردی مانند اندازه، رنگ، خانواده فونت و وزن را تعریف می کند. ویجت هایی وجود دارند که چیزهایی را نمایان می کنند، ویژگی هایی را نشان می دهند (مانند TextStyle) و حتی دیگران که کارهایی را انجام می دهند مانند FutureBuilder و StreamBuilder.

ویجت های پیچیده را می توان با ترکیب بسیاری از ساده ترها ایجاد کرد، و یک اپلیکیشن در واقع فقط بزرگترین ویجت همه آنها (که اغلب "MyApp" نامیده می شود) است. ویجت MyApp شامل همه ویجت های دیگر است، که می توانند حاوی ویجت های کوچکتر نیز باشند، و در کنار هم برنامه شما را تشکیل می دهند.

با این وجود استفاده از ویجت برای ساخت برنامه های Flutter کاملاً لازم نیست. یک گزینه جایگزین، معمولاً فقط توسط افرادی که دوست دارند هر پیکسلی را که روی بوم کنترل می شود، کنترل کنند، استفاده از روش های مستقیم کتابخانه بنیاد است. از این روش ها می توان برای ترسیم اشکال، متن و تصاویر به طور مستقیم به بوم استفاده کرد. از این توانایی Flutter در چند فریمورک مانند موتور بازی اوپن سورس Flame استفاده شده است.

ویجت های مخصوص طراحی

فریمورک Flutter شامل دو مجموعه ویجت است که با زبان های طراحی خاص مطابقت دارد. ویجت های Design Material زبان طراحی گوگل را با همین نام پیاده سازی می کنند، و ویجت های Cupertino دستورالعمل های رابط انسانی در iOS را طراحی می کنند.

مثال های فلاتر (Flutter)

Hello World در فلاتر چنین است:

import 'package:flutter/material.dart';
void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello World App', home: Scaffold( appBar: AppBar( title: Text('Hello World App'), ), body: Center( child: Text('Hello World'), ), ), ); } }

آیا این نوشته را دوست داشتید؟
pluralsight-creating-layouts-with-flutter

آموزش ایجاد طرح بندی با Flutter


شما در این دوره، توانایی استفاده از ویجت های Flutter را به دست می آورید تا بتوانید طرح های حرفه ای ایجاد کنید. ابتدا یاد می گیرید که چگونه از Containe...

1399/06/19 460 بازدید زیرنویس دارد
linkedin-flutter-part-09-dart-cupertino-and-widgets

آموزش Dart, Cupertino :Flutter و ویجت ها - قسمت 9


مدرس Angela Yu، همچنین نشان می دهد که چگونه سیستم عامل کاربر خود را تشخیص دهید و رابط برنامه خود را به صورت پویا به روز کنید تا با این سیستم عامل مطاب...

1399/04/29 748 بازدید
linkedin-flutter-part-08-powering-your-app-with-live-web-data

آموزش Flutter: با داده های زنده وب به برنامه خود قدرت دهید - قسمت 8


مدرس Angela Yu شما را با فرآیند دسترسی و درخواست داده های زنده از طریق متدهای برنامه نویسی غیرهمزمان در Dart آشنا می کند. او نحوه مدیریت خطاها، دسترسی...

1399/04/29 610 بازدید
linkedin-flutter-part-07-building-the-ui-or-flutter-part-07-building-uis

آموزش Flutter: ساخت UI - قسمت 7


این دوره به شما نحوه استفاده از سازنده های سطح متوسط Dart مانند enums، اپراتورها و مسیریابها برای شخصی سازی برنامه های Flutter را می آموزد. مدرس Angel...

1399/04/29 1401 بازدید
linkedin-flutter-part-06-modularizing-and-organizing-flutter-code

آموزش Flutter: ماژول سازی و سازماندهی کد Flutter - قسمت 6


این دوره به شما می آموزد که چگونه پایه کد Flutter خود را سازماندهی کنید در نتیجه نگهداری و بهبود آن با گذشت زمان آسان تر خواهد بود. مدرس  Angela Yu، ن...

1399/04/29 483 بازدید
linkedin-flutter-part-05-flutter-and-dart-packages

آمزش Flutter: پکیج های Flutter و Dart - قسمت 5


این دوره تکنیک های سطح متوسط توسعه برنامه را با استفاده از پلاگین های تخصصی پکیج ها معرفی می کند که حتی سرعت توسعه Flutter شما را افزایش می دهد. مدرس ...

1399/04/29 633 بازدید
packtpub-flutter-in-7-days

آموزش فلاتر در 7 روز


به کمک این دوره شما اعتماد به نفس لازم برای ساخت رابط کاربری سفارش سازی شده را برای پروژه های خود با استفاده از فلاتر بدست خواهید آورد. شما در 7 روز، ...

1398/07/24 15370 بازدید
packtpub-mastering-flutter

آموزش تسلط بر فلاتر


در این دوره شما اپلیکیشن های جدید را با استفاده از ویژگی های مختلف Flutter ایجاد خواهید کرد. شما تنها با یک codebase برای اندروید و iOS اپلیکیشن ایجاد...

1398/07/15 5605 بازدید
packtpub-dart-2-in-7-days

آموزش دارت 2 در هفت روز


این دوره با آماده سازی محیطی برای توسعه Dart و Flutter شروع می شود تا در این محیط اولین اپلیکیشن خود را بسازید. سپس نحوه ایجاد متغیرها، انجام عملیات و...

1398/02/29 10865 بازدید
packtpub-flutter-app-development-for-beginners

توسعه اپلیکیشن با فلاتر برای تازه کاران


این دوره مقدمات زبان دارت را به شما آموزش می دهد و پس از آن نحوه نصب و راه اندازی فلاتر و ساخت اپلیکیشن با ویجت ها و امکانات آن را به شما می آموزد. فل...

1398/02/23 13868 بازدید
linkedin-learning-google-firebase-for-flutter

آموزش Google Firebase برای فلاتر


به کمک این دوره می توانید اپلیکیشنی با استفاده از Flutter در سمت موبایل، Firebase در بک اند و Cloud Firestore برای ذخیره داده ایجاد کنید....

1398/02/12 5691 بازدید
skillshare-flutter-zero-to-professional-cross-platform-development-for-ios-android

فلاتر (Flutter) صفر تا حرفه ای: ابزار توسعه چندسکویی برای اندروید و iOS


فلاتر یک کیت توسعهٔ نرم‌افزار (SDK)، برای برنامه کاربردی موبایل، مکمل چارچوب، ابزارک ها (widgets) و ابزارها می باشد، که به توسعه دهندگان یک روش موثر ب...

1398/02/07 35286 بازدید
packtpub-real-world-projects-with-flutter

پروژه های دنیای واقعی با استفاده از فلاتر (Flutter)


این دوره برای توسعه دهندگانی است که فلاتر (Flutter) را تاکنون مطالعه کرده اند، اما در مراحل بعدی توسعه خود به برخی موانع برخورد کرده اند. این بدین منظ...

1398/02/05 9731 بازدید
packtpub-learning-dart-build-your-first-app-with-flutter

یادگیری دارت (Dart) - ایجاد اولین برنامه کاربردی با فلاتر (Flutter)


شما با فلاتر (Flutter) و دارت، برنامه های کاربردی برای هر Play Store و App Store توسعه خواهید داد. برنامه های کاربردی ساخته شده با فلاتر، بسیار سریع ه...

1398/02/05 5437 بازدید
pluralsight-flutter-the-big-picture

دوره Flutter The Big Picture


این دوره به آموزش ساخت اپلیکیشن برای iOS و Android با Flutter و ابزارهای آن می پردازد. همچنین استفاده از Android Studio / IntelliJ و ویژوال استودیو کد...

1398/01/28 4568 بازدید
pluralsight-flutter-getting-started

آموزش شروع کار با Flutter


Flutter یک پلتفرم جدید تلفن همراه است که توسط گوگل پشتیبانی می شود. در این دوره با ساخت اپلیکیشن ها با Flutter، ساخت یک برنامه Hello World با Flutter،...

1397/07/01 7169 بازدید زیرنویس دارد