فلاتر چیست؟ | به زبان ساده + نمونه پروژه Flutter

فلاتر چیست ؟

Flutter از دو بخش مهم تشکیل شده که در ادامه آمده است.

• SDK (بسته توسعه نرم‌افزار |‌ Software Development Kit): مجموعه‌ای از ابزارها که به توسعه اپلیکیشن کمک می‌کنند.
• چارچوب نرم‌افزاری (واسط مبتنی بر ویجت‌ها): مجموعه‌ای از اجزای رابط‌ کاربری که ‌می‌توان آن‌ها را براساس نیاز، شخصی‌سازی کرد. به عنوان مثال، می‌توان دکمه‌ها، ورودی‌های متنی، اسلایدرها و سایر عناصر در اپلیکیشن‌ها را نمونه‌هایی از ویجت‌های Flutter دانست.

ویجت در فلاتر چیست ؟

فیلم آموزش طراحی اپلیکیشن To-Do List با Flutter در فرادرس

کلیک کنید

Dart چیست ؟

فیلم آموزش برنامه‌نویسی دارت در فرادرس

کلیک کنید

چرا در فلاتر از دارت استفاده می‌شود؟

فیلم آموزش پروژه محور فلاتر با دارت – اپلیکیشن فروشگاه اینترنتی با فریم ورک Flutter در Dart + گواهینامه در فرادرس

کلیک کنید

تاریخچه فلاتر

فلاتر چرا ساخته شد؟

ایده نام فلاتر از کجا شکل گرفت؟

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی + گواهینامه در فرادرس

کلیک کنید

آیا دارت برای استفاده در فلاتر تغییر داده شده؟

کاربردهای فلاتر چه هستند؟

فیلم آموزش فریم‌ورک Google Flutter در فرادرس

کلیک کنید

پشتیبانی وب برای فلاتر

چه نوع اپلیکیشن‌هایی با فلاتر توسعه داده می‌شوند؟

• برای مقاصد مختلف خرده‌فروشی برخط، از جمله برنامه‌های وفاداری مشتریان (Loyalty Program)‌، کاتالوگ‌ها و فروشگاه‌های آنلاین
• بانکداری و فناوری‌های مالی (فین‌تک | Fintech)‌ که حتی با کسب‌وکارهای کوچک نیز سازگاری دارد.
• عرضه‌کننده‌ها و دارندگان حق امتیاز
• کسب‌وکارهای بزرگی مثل مراکز تماس، پیک و جابجایی بسته و سایر کسب‌وکارهای با مقیاس بزرگ

چرا باید فلاتر را آموخت ؟

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

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی + گواهینامه در فرادرس

کلیک کنید

یک مثال قابل توجه در این خصوص، اپلیکیشن Xianyu است که توسط تیم Alibaba ساخته شده و در حال حاضر بیش از ۵۰ میلیون کاربر از آن استفاده می‌کنند. در این بخش از مطلب «Flutter چیست»، هر یک از دلایل برتری فلاتر نسبت به سایر رقبایش مورد بررسی قرار گرفته‌اند.

سادگی یادگیری و استفاده از فلاتر

فیلم آموزش برنامه‌نویسی iOS با Swift در فرادرس

کلیک کنید

می‌توان گفت، بسیاری از توسعه‌دهندگان نرم‌افزار پیش از Flutter علاقه چندانی به توسعه برنامه‌های کاربردی بر بستر دستگاه‌های همراه نداشته‌اند و تنها بعد از ورود Flutter‌ به عرصه توسعه موبایلی به این مهم روی آورده‌اند. در فلاتر، به میزان زیادی از حجم کدنویسی کاسته شده است.

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

در این حین، اپلیکیشن کماکان در حال اجرا است و نیازی به شروع مجدد آن نیست. تنها در برخی عملیات ویرایشی خاص است که برنامه‌نویس‌ها وادار به بارگذاری مجدد اپلیکیشن می‌شوند. حتی در این صورت نیز، بارگذاری مجدد اپلیکیشن در زمان بسیار کمی انجام می‌شود. اما در صورتی که تغییرات تنها در حد تغییر اندازه یک عنصر باشد، این تغییرات به صورت بلادرنگ انجام می‌شوند. چنین قابلیتی موجب می‌شود که روال اضافه کردن یک ویژگی جدید و رفع خطاها ساده‌تر شوند.

سرعت اجرا و عملکرد مناسب فلاتر

یکی دیگر از دلایل عملکرد قابل قبول فلاتر، استفاده این فریم‌ورک از دارت است چرا که، همان‌طور که توضیح داده شد، Dart ترجمه به کد بومی را به روش AoT انجام می‌دهد. همچنین، فلاتر از ویجت‌های مختص به خودش استفاده می‌کند و بنابراین نیازی به استفاده از  ویجت‌های OEM وجود ندارد.

به همین دلیل، تعامل و مکاتبه کم‌تری میان اپلیکشین و پلتفرم مربوطه وجود خواهد داشت که این مسئله منجر به بهبود عملکرد و سرعت برنامه کاربردی توسعه داده شده با Flutter می‌شود.

سازگاری بالا در فلاتر

استفاده فلاتر از ویجت‌های اختصاصی، منجر به بروز مشکلات سازش‌پذیری (Compatibility) کم‌تری می‌شود. با استفاده از Flutter توسعه‌دهندگان با مشکلات کم‌تری در نسخه‌های مختلف سیستم‌عامل‌ها مواجه خواهند شد و می‌توانند زمان کم‌تری را برای آزمایش برنامه کاربردی روی نسخه‌های قدیمی‌تر صرف کنند. همچنین، می‌توان اطمینان داشت که برنامه‌های توسعه داده شده با فلاتر با نسخه‌های سیستم‌عامل آتی نیز سازش‌پذیر خواهند بود.

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

صرفه‌جویی در وقت و هزینه با فلاتر

متن‌باز بودن فلاتر

سازگاری فلاتر با استارتاپ‌های MVP

فیلم آموزش آشنایی با استارتاپ‌ها و محصول MVP در فرادرس

کلیک کنید

چهار دلیل توجیه‌پذیری استفاده از فلاتر برای توسعه اپ توسط یک MVP در ادامه فهرست شده‌اند.

• توسعه یک اپلیکیشن موبایل با استفاده از فلاتر ارزان‌تر است. این کاهش هزینه به این دلیل رخ می‌دهد که دیگر نیازی به تولید و نگهداری دو اپلیکیشن مجزا (یکی برای اندروید و دیگری برای iOS) وجود نخواهد داشت.
• تنها یک توسعه‌دهنده برای تولید MVP کافی است.
• میزان کارایی بالا خواهد بود. به این معنا که، تفاوتی میان یک اپلیکیشن بومی و یک اپلیکیشن Flutter (فلاتر اپ | Flutter App) وجود نخواهد داشت.
• زیبایی بصری قابل ملاحظه است. یعنی به راحتی می‌توان با استفاده از ویجت‌هایی (widget | ابزاره) که فلاتر در اختیار برنامه‌نویسان قرار می‌دهد،‌ یک رابط کاربری زیبا و ارزشمند برای مشتریان تولید کرد.

نمونه‌ای از رابط کاربری یک اپلیکیشن توسعه داده شده با استفاده از Flutter در ادامه ملاحظه می‌شود.

برخورداری از مستندات کامل

برای یک فناوری نوین، داشتن مستندات مناسب بسیار دارای اهمیت است. آموزه‌های بسیاری را می‌توان از مستندات فلاتر کسب کرد. همه چیز با جزئیات کامل و با مثال‌های ساده برای موارد کاربردی و ابتدایی ارائه شده است. هر زمان کاربر در فرآیند توسعه اپلیکیشن خود با مشکلی در خصوص هر یک از ویجت‌ها مواجه شود، می‌تواند مستندات فلاتر را بررسی کند و به پاسخ سئوال خود برسد.

جامعه در حال رشد فلاتر

فلاتر دارای اجتماعی (Community) قدرتمند است و با گذشت زمان این اجتماع قوی‌تر هم می‌شود. بسیاری از توسعه‌دهندگان و برنامه‌نویسان فلاتر علاقه بسیاری به شراکت در تولید محتوای کارآمد دارند و از پتانسیل بالا و تعداد زیاد کاربران Flutter مطلع هستند.

با یک جستجوی ساده می‌توان دریافت که تعداد اجتماعات قابل ملاحظه‌ای برای تبادل اطلاعات در زمینه Flutter در سراسر اینترنت وجود دارد. در ادامه، برخی از این مراکز اجتماع به عنوان نمونه فهرست شده‌اند.

• Awesome Flutter : یک مخزن گیت‌هاب (GitHub) است با لیستی از مقاله‌ها، ویدئوها، قطعه‌های نرم‌افزاری (Component)،‌ برنامه‌های سودمند (Utility) و سایر امکانات و تسهیلات مورد نیاز در خصوص فلاتر
• !It's All Widgets: دارای فهرستی از برنامه‌های کاربردی متن‌باز توسعه داده شده با فلاتر است.
• Flutter Community: اجتماع فلاتر یک نشریه اشتراکی (Medium Publication) است. که در آن می‌توان مقالات، آموزش‌ها و سایر محتوای سودمند را در خصوص Flutter یافت.

پشتیبانی اندروید استودیو و VS Code از فلاتر

سازگاری فلاتر با فریلنسینگ

نقاط ضعف فلاتر چه هستند ؟

همچون سایر ابزارهای توسعه، فلاتر نیز دارای برخی کاستی‌ها است. Flutter یک فناوری نوپا است و هنوز به میزان بسیار زیادی جای رشد دارد. به همین سبب، برخی کاستی‌ها در آن دیده می‌شود که انتظار می‌رود در آینده برطرف شوند. در ادامه مطلب «فلاتر چیست»، برخی از این کمبودها بیان شده است. لازم به ذکر است که این کاستی‌ها در زمان تدوین این مطلب وجود داشته‌اند و ممکن است در آینده برطرف شوند.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی + گواهینامه در فرادرس

کلیک کنید

اندازه بزرگ فایل اپلیکیشن

کمبود کتابخانه های شخص ثالث در فلاتر

برخی مشکلات فلاتر با iOS

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

یکی از به‌روزرسانی‌های اخیر در Flutter برای iOS، ویژگی ظاهری با بهترین تراکم پیکسلی است. همچنین، تنظیمات آیفون در فریم‌ورک فلاتر برای فراهم کردن ویجت‌های اپل ایجاد شده است. به علاوه، برای جدیدترین نسخه‌های iOS، با کمی تأخیر ویژگی‌هایی به‌روزرسانی و اضافه شده‌اند. بنابراین در خصوص سازگاری فلاتر با iOS می‌توان به این نتیجه رسید که چندان جای نگرانی وجود ندارد.

مشکلات مربوط به دارت در فلاتر

بازار کار فلاتر

با توجه به سادگی یادگیری فلاتر و ویژگی‌های بسیاری که در اختیار توسعه‌دهندگان قرار می‌دهد، آینده روشنی در انتظار وضعیت بازار کار این ابزار توسعه برنامه‌های کاربردی است. فلاتر و به طور کلی توسعه اپلیکشین به روش چندپلتفرمی، یک فناوری نوظهور به حساب می‌آید. در بازار کار توسعه اپلیکیشن‌های موبایل و خصوصا در حوزه توسعه چندپلتفرمی، فلاتر به عنوان رقیب سرسختی برای React Native شناخته می‌شود.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی + گواهینامه در فرادرس

کلیک کنید

فلاتر بعد از React معرفی و ارائه شده و React جایگاه خود را در بازار کار توسعه اپلیکیشن‌های چندپلتفرمی تثبیت کرده است. اما Flutter به واسطه برتری‌هایی که دارد، رفته رفته در حال ربودن گوی رقابت از React است. در نتیجه، با وجود اینکه در حال حاضر میزان تقاضا برای موقعیت‌های شغلی مرتبط با Flutter نسبت به React کم‌تر است، می‌توان در آینده افزایش سطح تقاضا و حتی بیش‌تر شدن موقعیت‌های شغلی در حیطه توسعه‌دهنده فلاتر را نسبت به React انتظار داشت.

وضعیت بازار کار فلاتر در ایران چگونه است؟

میزان درآمد یک توسعه‌دهنده فلاتر چقدر است؟

آینده فلاتر چطور پیش‌بینی می‌شود؟

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

فیلم آموزش فلاتر Flutter برای اپلیکیشن آب‌و‌هوا در فرادرس

کلیک کنید

با فلاتر می‌توان حتی پروژه‌های گسترده‌ را به راحتی پیاده‌سازی کرد. در اکثر منابع، فلاتر به عنوان یکی از بهترین فناوری‌های توسعه اپلیکیشن موبایل معرفی شده و حتی در برخی از مقالات، به عنوان آینده توسعه برنامه‌های کاربردی همراه شناخته شده است. حتی اگر این چنین نباشد، قطعاً می‌توان Flutter را به عنوان یک گام در مسیر درست دانست. یکی از دلایل آینده روشن Flutter را می‌توان در حضور گوگل به عنوان یک پشتوانه مستحکم جستجو کرد.

اگر توسعه‌دهنده‌ای به دنبال رهایی از قید و بندها و استانداردهای اجزاء رابط کاربری اندروید و iOS‌ باشد و نیاز چندانی به ویژگی‌های SDK بومی نداشته باشد، Flutter گزینه مناسبی محسوب می‌شود. چرا که، فلاتر چاچوب فوق‌العاده‌ای برای توسعه اپلیکیشن‌های سریع و با ظاهر زیبا ارائه می‌دهد. اگرچه، در صورتی که یک اپلیکیشن موبایل با ظاهری رایج و مرسوم مدنظر باشد که از ویژگی‌های بومی بیش‌تری بهره می‌برد یا نیاز به هم‌پیوندی‌های شخص ثالث (3rd party integration) خاصی وجود داشته باشد، ممکن است بهتر باشد قبل از توسعه اولین اپلیکیشن فلاتر کمی بیش‌تر صبر کرد.

پروژه های شناخته شده فلاتر

چشم‌انداز توسعه چندپلتفرمی همواره در حال تحول است. فلاتر رقابت نزدیکی با سایر فریم‌ورک‌های توسعه اپلیکیشن چندپلتفرمی به ویژه React Native دارد و به سرعت در حال پیشی گرفتن و کسب جایگاه نخست در رقابت تنگاتگ بهترین ابزار توسعه چندپلتفرمی است.

در آستانه سال ۱۴۰۰، صدها توسعه‌دهنده در حال ساخت اپلیکیشن‌های میزبان با استفاده از Flutter هستند و همگی با هدف رسیدن به بالاترین جایگاه در جدول بهترین اپلیکیشن‌ها، نهایت تلاش خود را به کار می‌گیرند. بنابراین، در این بخش از مطلب «فلاتر چیست»، پنج برنامه کاربردی برتر موبایل ساخته شده با فلاتر در ادامه معرفی می‌شوند.

اپلیکیشن InKino

inKino یک اپلیکیشن خرید بلیت سینما است که به مشتریان فنلاندی در انتخاب فیلم دلخواه در سریع‌ترین زمان ممکن کمک می‌کند. این امکان به سبب رابط کاربری پویا و شفاف inKino فراهم شده است. با کد مبنایی که ۴۰ درصد میان فلاتر و وب مشترک است، inKino مثال خوبی از یک پروژه دارت چندپلتفرمی محسوب می‌شود. اپلیکیشن‌های اندروید و iOS در InKino با استفاده از کد مبنای یکسانی ساخته شده‌اند.

اپلیکیشن Music Tutor

Music Tutor یک اپلیکیشن آموزش موسیقی است. در این اپلیکیشن، امکانات بسیاری از جمله تسهیل در خواندن نُت‌های موسیقی وجود دارد. توسعه‌دهندگان برنامه کاربردی Music Tutor با مسئله دشواری خواندن نُت‌های موسیقی مواجه شدند و تصمیم گرفتند این نیاز را با کمک فلاتر برطرف کنند. این اپلیکیشن به واسطه داشتن ظاهر و حس بومی پلتفرم iOS در حال رسیدن به رتبه‌های بالا در فروشگاه اپلیکیشن اپل است.

اپلیکیشن Topline

اپلیکیشن Topline، برای سازندگان موسیقی ساخته شده است. با کمک این اپلیکیشن سازندگان موسیقی می‌توانند ایده‌های ساخت یک آهنگ را در هر کجا و هر زمان ضبط کنند. سازندگان Topline متوجه این خلأ شدند و اپلیکیشنی را مختص ضبط ایده‌های خلق موسیقی ارائه کردند.

فیلم آموزش پروژه محور فلاتر با دارت – اپلیکیشن فروشگاه اینترنتی با فریم ورک Flutter در Dart + گواهینامه در فرادرس

کلیک کنید

ساخت این اپلیکیشن با استفاده از فلاتر، تنها در ده هفته انجام شده است که به لحاظ سرعت توسعه اپلیکیشن تجاری یک رکورد محسوب می‌شود. اپلیکیشن Topline امکان ضبط موسیقی، اضافه کردن متن شعر و همچنین اشتراک‌گذاری و ذخیره فایل‌ها را در فضای ابری فراهم کرده است. این اپلیکیشن در خصوص سرعت و دقت، عملکرد بسیار قابل قبولی را از خود نشان می‌دهد.

اپلیکیشن Xianyu

اپلیکیشن Google Ads

وقتی فهرستی از بهترین اپلیکیشن‌های توسعه داده شده با فلاتر در حال تهیه است، نمی‌توان Google Ads را از قلم انداخت. استفاده از پلتفرم تبلیغاتی گوگل بسیار آسان است و به هر کسی اجازه می‌دهد کمپین‌های بازاریابی دیجیتال خود را بدون هیچ دردسری راه بیندازد. این اپلیکیشن برای افرادی که به عنوان بازاریاب دیجیتال فعالیت می‌کنند، بسیار کاربردی و مفید است.

Google Ads امکان مشاهده آمار بسیار مهمی را در مورد یک اپلیکیشن ارائه می‌دهد. این آمار می‌تواند شامل بازخوردها، کلیک‌ها و مکالمات باشد. همچنین، این اپلیکیشن با پشتیبانی بی‌درنگ گوگل همراه است. با توجه به اینکه این اپلیکیشن توسط گوگل ساخته شده، استفاده از آن بسیار ساده است و همچنین درک نحوه کارکرد این اپلیکیشن نیز بسیار آسان است.

مسیر یادگیری فلاتر به چه صورت است؟

در این بخش از مطلب «فلاتر چیست»، مسیر یادگیری فلاتر شرح داده شده است. در ابتدا پیش‌نیازهای آموزش فلاتر معرفی شده‌اند و پس از آن نیز، به مباحث و موضوعات مهم در آموزش Flutter، پرداخته شده است.

اولین مبحث مورد نیاز که در توسعه اپلیکیشن بسیار اهمیت دارد، یادگیری شیٔ‌گرایی است که در ادامه به این موضوع پرداخته شده است.

یادگیری شیٔ‌گرایی

فیلم آموزش برنامه‌نویسی شی‌گرا در Java در فرادرس

کلیک کنید

یادگیری Dart

آشنایی با توسعه اپلیکیشن موبایل

برای شروع یادگیری فلاتر، داشتن دانش و تجربه کافی در زمینه توسعه اپلیکیشن‌های موبایل دارای اهمیت است. بهتر است فرد آشنایی کافی با یکی از فریم‌ورک‌های توسعه موبایل را داشته باشد.

فیلم آموزش ری‌اکت‌نیتیو – مقدماتی

کلیک کنید

برخی از مهم‌ترین فریم‌ورک‌های ساخت اپلیکیشن موبایل در ادامه فهرست شده‌اند.

• اندروید
• iOS Native
• React Native
• Xamarin
• Ironic
• Swift

در صورتی که یک توسعه‌دهنده، تجربه کار با هر یک از فریم‌ورک‌های بیان شده را داشته باشد و بخواهد برای توسعه اپلیکیشن‌های چندپلتفرمی به فلاتر مهاجرت کند، می‌تواند راهنمای فلاتر برای توسعه‌دهندگان اندروید، iOS، وب، React Native و Xamarin.Forms را در سایت رسمی فلاتر مطالعه کند.

رابط کاربری اعلانی چیست؟

فیلم آموزش Jetpack Compose برای اندروید – مقدماتی در فرادرس

کلیک کنید

چگونه می‌توان فلاتر را یاد گرفت؟

پس از آموزش دارت، نوبت به یادگیری فلاتر می‌رسد. می‌توان Flutter را با دیدن فیلم‌های آموزشی، مستندات فلاتر، دوره‌های آنلاین و مقالات آموزشی در مورد Flutter یاد گرفت. آموختن فلاتر نسبتاً‌ ساده است و برای افراد مبتدی، پیشنهاد می‌شود از فیلم‌های آموزش فلاتر استفاده کنند.

در سایت رسمی Flutter نیز چند ویدئو برای آشنایی با فلاتر به زبان انگلیسی ارائه شده است. همچنین، مطالعه مستندات فلاتر نیز می‌تواند بهترین منبع یادگیری باشد. به طور کلی می‌توان موضوعات اصلی که در Flutter باید فرا گرفته شوند را به چهار دسته کلی تقسیم کرد. این چهار قدم برای یادگیری Flutter در ادامه فهرست شده‌اند.

• ساخت طرح‌بندی‌ها (Layout) : نحوه ایجاد طرح‌بندی‌ها و چیدمان اجزاء؛ در فلاتر همه چیز از ویجت‌ها تشکیل می‌شود.
• درک محدوده‌ها (Constraints): ابتدا باید درکی از این مسئله داشت که: «محدوده‌ها به سمت پایین و اندازه‌ها (Size) به سمت بالا جریان دارند و همچنین، والدین موقعیت‌ها را تنظیم می‌کنند.» سپس، باید درکی از مفهوم «مدل طرح‌بندی» (Layout Model) صورت گیرد.
• توسعه اپلیکیشن فلاتر به صورت تعاملی: در این مرحله، نحوه افزودن یک ویجت حالت‌مند (Stateful) به اپلیکیشن فرا گرفته می‌شود.
• مروری بر فریم‌وروک ویجت در فلاتر: آموختن فریم‌ورک واکنش‌گرا (React-Style) فلاتر

پس از یادگیری پیش‌نیازهای لازم برای شروع آموزش فلاتر، ابتدا باید نصب و راه‌اندازی Flutter را آموخت و انجام داد. سپس، طبق معمول یک برنامه «Hello World» را پیاده‌سازی کرد. پس از آن یک پروژه کوچک را انجام داد. ‌در ادامه نیز می‌توان به یادگیری مباحث پیشرفته‌تر پرداخت. به این موارد در بخش‌های بعدی پرداخته خواهد شد. قبل از آن، سایر مواردی که یادگیری آن‌ها برای توسعه اپلیکیشن در Flutter اهمیت دارد معرفی شده‌اند.

• برای دیدن فیلم آموزش فریم ورک Google Flutter برای طراحی اپلیکیشن های موبایل + اینجا کلیک کنید.

یادگیری رویکرد مدیریت حالت — BLoC

یادگیری مسیریابی صفحه

نحوه تعویض صفحات یکی از مباحث مهم در توسعه برنامه‌های کاربردی است. Flutter، توابع و قابلیت‌‌های راهبری (Navigator Functions) را برای تعویض صفحات ارائه می‌کند. نسخه اولیه فلاتر (۱.۰) از یک رویکرد دستوری استفاده می‌کند. در مقابل، نسخه به‌روزرسانی شده فلاتر (۲.۰) یک رویکرد اعلانی را به کار می‌گیرد.

در مورد رویکردهای اعلانی و دستوری در قسمت رابط کاربری اعلانی توضیحاتی ارائه شد. باید در نظر داشت که در ساز و کار جدید، چندان تحول اساسی صورت نگرفته است و می‌توان در صورت تمایل از رویکرد اولیه در نسخه ۱.۰ استفاده کرد. اما، در صورتی که قصد پیاده‌سازی پیوند عمیق (Deep Linking) یا استفاده از راهبر چندگانه (Multiple Navigator) وجود داشته باشد، باید نسخه ۲.۰ را آموخت.

یادگیری بومی‌سازی

• نحوه ردنگاری منطقه جغرافیایی (Locale) کاربر برای تعیین زبان دلخواه
• نحوه مدیریت مقادیر مختص منطقه جغرافیایی اپلیکیشن (Locale-Specific App Values)
• نحوه تعریف منطقه‌های جغرافیایی که یک اپلیکیشن پشتیبانی می‌کند

یادگیری خدمات گیرنده HTTP

یک روش دیگر برای راه‌‌اندازی کلاینت HTTP‌ در پروژه فلاتر، استفاده از Chopper است که از source_gen استفاده می‌کند و برای توسعه آن از Retrofit الهام گرفته شده است. برای یادگیری نحوه استفاده از این ابزارها می‌توان به صفحه مربوط به هر یک در گیت‌هاب مراجعه کرد.

نصب و راه‌اندازی فلاتر

نصب فلاتر در ویندوز

مشخصات سیستم مورد نیاز

در این بخش از مطلب «فلاتر چیست»، مشخصات سیستم مورد نیاز برای نصب و استفاده از Flutter در ویندوز فهرست شده است.

• سیستم عامل مورد نیاز: ویندوز ۷ با بسته خدمات یک (SP1) یا بالاتر بر پایه ۳۲ یا ۶۴ بیت
• فضای ذخیره‌سازی: یک گیگ و ۳۲۰ مگابایت (شامل فضای مورد نیاز برای ابزارها و IDE نمی‌شود)
• ابزارها: فلاتر به این ابزارها که در محیط توسعه در دسترس هستند وابسته است:‌ windows PowerShell 5.0 و یا جدیدتر (این ابزار به همراه ویندوز ۱۰ نصب شده است) و همچنین، نسخه ۲ به بالا گیت (Git) برای ویندوز

دانلود بسته توسعه نرم‌افزاری فلاتر

ابتدا، باید بسته نصب فلاتر را که حاوی آخرین نسخه پایدار منتشر شده از SDK فلاتر است، از صفحه دانلود سایت فلاتر دریافت کرد. سپس، فایل فشرده‌سازی شده را از حالت فشرده خارج کرده و فایلی که به نام Flutter در داخل آن قرار دارد را به محل نصب مورد نظر انتقال داد (برای مثال، در C:\src\flutter).

به‌روزرسانی متغیر محیطی مسیر

در صورتی که قصد اجرای دستورات در کنسول معمولی مربوط به ویندوز وجود داشته باشد، این اقدامات را برای افزودن فلاتر به متغیر محیطی PATH باید انجام داد:

• ابتدا لازم است در قسمت جستجوی منو Start، عبارت «env» جستجو شود و سپس، باید گزینه «Edit environment variables for your account» را انتخاب کرد.
• در قسمت «User Variables» باید بررسی شود که گزینه‌ای به نام «Path» وجود داشته باشد. اگر وجود داشت، مسیر کامل تا «flutter\bin» با استفاده از یک سمیکالن «;» از مقادیر کنونی جدا و به Path‌ اضافه شود. اگر گزینه ورودی وجود نداشته باشد، باید یک متغیر کاربر (User Variable) جدید با نام «Path» به همراه مسیر کامل منتهی به «flutter\bin» به عنوان مقدار متغیر ساخته شود.

اجرای Flutter Doctor

از یک پنجره کنسول که شاخه Flutter را در مسیر خودش دارد (در بخش قبل توضیح داده شد)، برای اینکه مشخص شود آیا وابستگی‌های پلتفرمی برای تکمیل نصب فلاتر وجود دارد یا خیر، دستور زیر را باید اجرا کرد:

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

راه‌اندازی اندروید استودیو برای توسعه با فلاتر

نصب اندروید استودیو

1. اندروید استودیو دانلود و نصب شود.
2. اندروید استودیو اجرا شود و مراحل «Android Studio Setup Wizard» طی شود. در این مراحل راه‌اندازی، آخرین SDK‌های اندروید، ابزارهای خط فرمان SDK اندروید و همچنین ابزارهای ساخت SDK اندروید نصب خواهند شد. این موارد برای توسعه اپلیکیشن اندرویدی با فلاتر مورد نیاز است.

راه‌اندازی دستگاه اندرویدی

برای آماده‌سازی، اجرا و آزمایش اپلیکیشن توسعه داده شده با فلاتر، یک دستگاه اندرویدی با نسخه اندروید 4.1 به بالا (API سطح ۱۶)‌ یا بیش‌تر مورد نیاز است.

1. امکانات توسعه‌دهنده (Developer options) و USB debugging باید روی دستگاه فعال شوند.
2. نصب درایور USB گوگل
3. استفاده از یک کابل USB،‌ اتصال گوشی به کامپیوتر
4. دستور «flutter devices» اجرا شود تا مشخص شود آیا فلاتر دستگاه اندرویدی متصل شده را می‌شناسد یا خیر.

 راه‌اندازی همانندساز اندرویدی

1. فعال‌سازی «VM acceleration» روی دستگاه.
2. اجرای Android Studio، کلیک روی آیکن AVD Manager و انتخاب گزینه «Create Virtual Device»
3. انتخاب یک Device Definition و رفتن به مرحله بعدی
4. انتخاب یک یا بیش از یک System Image برای نسخه‌های اندرویدی که قصد همانندسازی آن‌ها وجود دارد و رفتن به مرحله بعدی
5. باید در قسمت «Emulated Performance»، گزینه «Hardware - GLES 2.0» برای فعال‌سازی Hardware Acceleration انتخاب شود.
6. باید از صحیح بودن پیکربندی AVD‌ اطمینان حاصل شود و باید دکمه «Finish» را زد.
7. باید در Device Manager مجازی، روی «Run» در نوار ابزار کلیک شود. همانندساز اجرا می‌شود و محیط پیش‌فرض نسخه اندروید و دستگاهی که انتخاب شده ظاهر می‌شود.

راه‌اندازی وب

فلاتر اخیرا از توسعه اپلیکیشن‌های تحت وب با استفاده از کانال بتای فلاتر (Beta Channel of Flutter)‌ نیز پشتیبانی می‌کند. برای افزودن پشتیبانی توسعه وب در ویندوز، پس از انجام مراحل ذکر شده تا اینجا، می‌توان برای ادامه مراحل نصب، به مستندات مربوطه مراجعه کرد.

راه‌اندازی یک ویرایش‌گر

ایجاد اولین اپلیکیشن فلاتر

در این بخش از مطلب «فلاتر چیست»، نحوه ایجاد یک اپلیکیشن Flutter جدید از قالب‌ها (Template)، اجرای اپلیکیشن و تجربه بارگذاری سریع «Hot Reload» پس از اعمال تغییرات در اپلیکیشن شرح داده می‌شود. همان‌طور که در بخش قبل توضیح داده شد، بهتر است از یکی از ویرایش‌گرهای اندروید استودیو، VS Code یا IntelliJ استفاده شود که افزونه ویرایش‌گر فلاتر برای آن‌ها موجود است. در این جا نحوه ایجاد اپلیکیشن در اندروید استودیو آموزش داده شده است.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی + گواهینامه در فرادرس

کلیک کنید

ایجاد اپلیکیشن

در این بخش از مطلب «فلاتر چیست»، مراحل ایجاد یک اپلیکیشن Flutter در ویرایش‌گر اندروید استودیو فهرست شده است.

1. باید محیط یکپارچه توسعه نرم‌افزار (IDE)‌ اندروید استودیو را باز کرد و گزینه «Start a new Flutter project» را انتخاب کرد.
2. باید گزینه «Flutter Application» را به عنوان نوع پروژه (Project Type) انتخاب کرد.
3. باید از صحیح بودن مسیر SDK فلاتر اطمینان حاصل کرد. در صورتی که محل ورود متن خالی باشد، باید گزینه «…Install SDK» انتخاب شود.
4. باید نام پروژه انتخاب و وارد شود (برای مثال نام myapp وارد شود) و سپس کلید Next را زده و به مرحله بعد رفت.
5. باید گزینه Finish‌ را کلیک کرد.
6. باید منتظر ماند تا اندروید استودیو SDK را نصب و پروژه را ایجاد کند.

اجرای اپلیکیشن

در این بخش از مطلب «فلاتر چیست»، اپلیکیشن آزمایشی ایجاد شده در مرحله قبل اجرا می‌شود. مراحل اجرای اپلیکیشن آزمایشی در ادامه شرح داده شده است.

ابتدا باید محل نوار ابزار اصلی اندروید استودیو را یافت:

سپس، باید در قسمت «target selector»، یک دستگاه اندرویدی برای اجرای اپلیکیشن انتخاب شود. اگر هیچ‌کدام به عنوان «در دسترس» (Available) فهرست نشده باشند، باید Tools> Android > AVD Manager انتخاب شود و یک دستگاه اندرویدی ایجاد شود. سپس باید آیکن «Run» در نوار ابزار را کلیک کرد. پس از اینکه پروسه ساخت اپلیکیشن به اتمام رسید، اپلیکیشن اولیه روی دستگاه اندروید (شبیه‌ساز اندروید) باز می‌شود. تصویر صفحه نخست اپلیکیشن مربوطه در ادامه ملاحظه می‌شود.

استفاده از Hot Reload

به عنوان مثال، در اپلیکیشن آزمایشی اجرا شده در مرحله قبل، ابتدا می‌توان فایل «lib/main.dart» را باز کرد و کد زیر را تغییر داد.

در کد بالا، به عنوان مثال، کلمه «Pushed» تغییر داده می‌شود:

حالا پس از ذخیره تغییرات، با کلیک روی گزینه Hot Reload، بلافاصله تغییر ایجاد شده در متن روی اپلیکیشن در حال اجرا اعمال می‌شود.

معرفی مطالب پروژه محور فلاتر

در این بخش از مطلب «فلاتر چیست»، برخی از مطالب و مقالات پروژه محور فلاتر معرفی شده است. با مطالعه این مطالب، می‌توان درک بهتر و آشنایی بیش‌تری نسبت به نحوه توسعه و تولید اپلیکیشن با فلاتر پیدا کرد.

در ادامه، این مطالب همراه با لینک مربوطه فهرست شده‌اند.

• ساخت اپلیکیشن یادداشت با فلاتر و دارت — از صفر تا صد: در این مطلب، به عنوان یک پروژه برای شروع یادگیری Flutter، نحوه ساخت اپلیکیشن یادداشت با Flutter و دارت ارائه شده است. برای مطالعه مطلب «ساخت اپلیکیشن یادداشت با فلاتر و دارت — از صفر تا صد» + کلیک کنید.
• ساخت اپلیکیشن ماشین حساب با فلاتر — از صفر تا صد: در این مطلب، به بررسی شیوه طراحی و ساخت یک برنامه کاربردی موبایل ماشین حساب ساده با استفاده از Flutter و Dart پرداخته شده است. برای مطالعه مطلب «ساخت اپلیکیشن ماشین حساب با فلاتر — از صفر تا صد» + کلیک کنید.
• ساخت اپلیکیشن فلاتر ToDo با SQLite — از صفر تا صد: در این مطلب مراحل ساخت اپلیکیشن فلاتر ToDo با استفاده از پایگاه داده محلی SQLite شرح داده شده است. برای مطالعه مطلب «ساخت اپلیکیشن فلاتر ToDo با SQLite — از صفر تا صد» + کلیک کنید.
• ساخت بازی پازل با فلاتر — از صفر تا صد: در این مطلب، پیاده‌سازی بازی پازل با فلاتر انجام شده است. این بازی روی دستگاه‌های مجهز به سیستم عامل iOS و همچنین اندروید قابل اجرا است. برای مطالعه مطلب «ساخت بازی پازل با فلاتر — از صفر تا صد» + کلیک کنید.
• استفاده از احراز هویت فایربیس با فلاتر — از صفر تا صد: در این راهنما یک اپلیکیشن ساده فلاتر ساخته شده که کاربر می‌تواند در آن ثبت نام کرده و لاگین کند. همچنین، امکان انجام مواردی از جمله تغییر ایمیل و رمز عبور یا حذف حساب کاربری نیز وجود خواهد داشت. برای مطالعه مطلب «استفاده از احراز هویت فایربیس با فلاتر — از صفر تا صد» + کلیک کنید.
• ایجاد منوهای کشویی (Drawers) در فلاتر (Flutter) — به زبان ساده: در این مطلب، به معرفی روش ایجاد منوهای کشویی در Flutter پرداخته شده است. برای مطالعه مطلب «ایجاد منوهای کشویی (Drawers) در فلاتر (Flutter) — به زبان ساده» + کلیک کنید.
• ایجاد سرویس در اپلیکیشن فلاتر — از صفر تا صد: در این مقاله، در مورد روش ایجاد سرویس در یک اپلیکیشن Flutter توضیحاتی ارائه شده است. هدف از سرویس، جداسازی یک وظیفه و مخفی کردن جزئیات پیاده‌سازی آن از سایر بخش‌های برنامه کاربردی است. برای مطالعه مطلب «ایجاد سرویس در اپلیکیشن فلاتر — از صفر تا صد» + کلیک کنید.
• ایجاد یک فرم لاگین ساده در فلاتر با الگوی BLoC — از صفر تا صد: در این نوشته، روش ساخت یک فرم لاگین ساده در Flutter با بهره‌گیری از الگوی BLoC شرح داده شده است. برای مطالعه مطلب «ایجاد یک فرم لاگین ساده در فلاتر با الگوی BLoC — از صفر تا صد» + کلیک کنید.
• آموزش گوگل فلاتر (Flutter ): ساخت اپلیکیشن دستورهای آشپزی: در این سری از مقالات، نحوه ساخت یک برنامه کاربردی موبایل دستور آشپزی با استفاده از فلاتر (Flutter) و با زبان دارت (Dart) آموزش داده شده است. برای مطالعه مطلب «آموزش گوگل فلاتر (Flutter ): ساخت اپلیکیشن دستورهای آشپزی — (بخش اول)» + کلیک کنید.
• کدنویسی بازی مشهور T-Rex با فلاتر و Flame — به زبان ساده: در این مطلب نحوه ساخت بازی ساده T-Rex با Flutter آموزش داده شده است. برای مطالعه مطلب «کدنویسی بازی مشهور T-Rex با فلاتر و Flame — به زبان ساده» + کلیک کنید.
• معماری اپلیکیشن فلاتر — راهنمای مقدماتی: در این مطلب، مفاهیم معماری اپلیکیشن Flutter به صورت پروژه محور و به همراه کد آموزش داده شده است. برای مطالعه مطلب «معماری اپلیکیشن فلاتر — راهنمای مقدماتی» + کلیک کنید.
• تشخیص چهره با فلاتر — راهنمای کاربردی: در این نوشته، به بررسی مبانی تشخیص چهره (Face Recognition) با Flutter درون یک تصویر با استفاده از ML Kit فایربیس و نمایان ساختن آن به کمک CustomPainter پرداخته شده است. برای مطالعه مطلب «تشخیص چهره با فلاتر — راهنمای کاربردی» + کلیک کنید.
• اپلیکیشن چند پلتفرمی دسته بندی تصاویر با فلاتر و Fastai — از صفر تا صد: در این مقاله، بررسی شیوه استفاده از یک API برای ایجاد اپلیکیشن‌های موبایل چندپلتفرمی انجام شده است که از شبکه عصبی برای دسته‌بندی تصاویر استفاده می‌کند. برای مطالعه مطلب «اپلیکیشن چند پلتفرمی دسته بندی تصاویر با فلاتر و Fastai — از صفر تا صد» + کلیک کنید.
• طراحی و کدنویسی فرم در فلاتر — راهنمای کاربردی: در این مطلب، روش به کارگیری مؤثر فُرم در Flutter شرح داده شده است و همچنین، موضوعات بسیاری مانند اعتبارسنجی، ذخیره‌سازی، جابجایی Cursor به فیلدهای دیگر و ارسال فرم با زدن return روی کیبورد موبایل مطرح می‌شود. برای مطالعه مطلب «طراحی و کدنویسی فرم در فلاتر — راهنمای کاربردی» + کلیک کنید.
• پیاده سازی تکمیل خودکار فهرست جستجو در فلاتر — از صفر تا صد: در این مطلب، نحوه پیاده‌سازی فهرست جستجوی تکمیل خودکار در اپلیکیشن‌های Flutter معرفی شده است. برای مطالعه مطلب «پیاده سازی تکمیل خودکار فهرست جستجو در فلاتر — از صفر تا صد» + کلیک کنید.
• ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد: در این مطلب آموزشی، به شیوه ساخت انیمیشن‌های Scroll سفارشی با استفاده از Flutter SDK پرداخته شده است. برای مطالعه مطلب «ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد» + کلیک کنید.
• ویجت های دسترس پذیری فلاتر برای افراد کم توان — راهنمای پیشرفته: در این مقاله، ویجت‌های دسترس‌پذیری Flutter و شیوه کارکرد آن‌ها معرفی شده‌اند. برای مطالعه مطلب «ویجت های دسترس پذیری فلاتر برای افراد کم توان — راهنمای پیشرفته» + کلیک کنید.
• ایجاد منوهای کشویی (Drawers) در فلاتر  — به زبان ساده: در این مطلب، روش ایجاد منوهای کشویی در Flutter شرح داده شده است. برای مطالعه مطلب «ایجاد منوهای کشویی (Drawers) در فلاتر (Flutter) — به زبان ساده» + کلیک کنید.

جمع‌بندی

در حال حاضر، فلاتر به عنوان یکی از خلاقانه‌ترین فناوری‌های موبایل در بازار محسوب می‌شود. امتیازاتی که Flutter برای تیم‌های توسعه موبایل به ارمغان می‌آورد، آن را تبدیل به یک گزینه انتخابی جدی برای فناوری موبایل در سده ۱۴۰۰ کرده است. بنابراین، برنامه‌نویسان، فعالان و مدیران کسب و کارها در حوزه توسعه برنامه‌های کاربردی دستگاه‌های همراه در ایران، می‌توانند با استفاده از فیلم‌های آموزش فلاتر و دوره‌های ویدئویی Flutter، گام بزرگی در راستای یادگیری و استفاده از آن در راستای ارتقاء موقعیت شغلی و بهبود وضعیت کسب و کار خود و یا آغاز یک مسیر شغلی و کسب و کار جدید گام بردارند.

فیلم مجموعه آموزش برنامه نویسی – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در مطلب «فلاتر (flutter) چیست؟ | به زبان ساده + نمونه پروژه»، می‌توان گفت به طور کامل تمامی موارد مورد نیاز در خصوص فلاتر پوشش داده شد. در مورد این که فلاتر چیست و چه کاربردهایی دارد، مزایا و معایب آن، دلیل توسعه و ارائه فلاتر و تاریخچه آن بحث شد. همچنین، برخی اپلیکیشن‌های محبوب توسعه داده شده با فلاتر معرفی شدند. در خصوص بازار کار، درآمد و آینده Flutter بحث شد. و در انتها نیز، مسیر یادگیری فلاتر، چگونگی نصب، ‌راه‌اندازی و اجرای اولین اپلیکیشن Flutter آموزش داده شد.