مهارت‌ها و تکنولوژی‌هایی که باید در Flutter یاد بگیرید

تو این مقاله به مهارت ها و نیازمندی های که میتونه تو مسیر Flutter بهتون کمک کنه اشاره میکنیم و برای هر کدوم چندلینک آموزش خوب رو به اشتراک میزاریم. این مقاله میتونه به کسانی که جویای کار در زمینه Flutter هستن کمک کنه که مفاهیم و مواردی که در Flutter مهم هست رو شناسایی کنن و اون هارو یاد بگیرن. همچنین شرکت ها و کسب کارهایی که نیازمند یک توسعه دهنده Flutter هستن میتونن با توجه به این مقاله آگهی بهتری رو ارائه بدن.پ.ن: متاسفانه آگهی هایی که در سایت Jobinja برای توسعه دهنده Flutter ثبت شده کیفیت مناسیبی ندارن و امید وارم این مقاله بتونه به دوستان کارفرما کمک کنه آگهی های با کیفیت تری رو تولید کنند.پ.ن: سعی میشه این مقاله تا حد امکان به روز بمونه بنابراین اگر نظر یا پیشنهادی دارید که باعث بهبود این مقاله میشه و یا لینک و منبع مفیدی دارید اون رو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید. توانمندی های مقدماتیدر این قسمت به تاپیک هایی اشاره میکنیم که یک توسعه دهنده Flutter میبایست اون ها رو به خوبی بلد باشه و این توانمندی ها خیلی به شما کمک میکنه که بتونید در یک شرکت استخدام بشید و معمولا این توانمندی ها به عنوان پیشنیاز و یا مهارت های مورد نیاز در یک آگهی مطرح میشن.آشنایی با زبان Dartوقتی داریم با Flutter کار میکنیم مهم ترین چیز اینه که زبان دارت که زبان توسعه اون هست رو خوب بشناسیم و تغییراتش رو دنبال کنیم. خوشبختانه از اونجایی که روند استفاده Flutter خیلی خوب بوده تیم Dart هم داره خیلی خوب زبان رو نسبت به نیاز های جدید آپدیت میکنه .زبان Dart خیلی به زبان های خانواده C و Java شبیه و یادگیریش برای کسانی که این طیف زبان هارو بلدن خیلی راحته.پ.ن: پیشنهاد میشه حتما درموردقابلیت Extension Method در دارت مطالعه کنید.A tour of the Dart languageEffective DartDart Extension MethodsA simplified introduction to Dart and Flutterشناخت ویجت های StateLess و StateFullاین دو نوع Widget در Flutter جزء اولین مفاهیمی هستند که تو آموزش ها و به اون ها میپردازن و خیلی مهمه که نحوه کار کردنشون رو درک کنیم.Flutter in focus Widget seriesMedium: Stateful vs Stateless Widgetflutterclutter: StatelessWidget vs. StatefulWidgetLifecycle of Widgets.آشنایی Widget های پیشفرض Flutterفلاتر برخلاف اندروید تعداد خیلی زیاد تری از کامپوننت ها و یا Widget هارو به صورت پیشفرض ارائه کرده. شناخت این ویجت ها میتونه خیلی به طراحی و ساخت UI های مختلف کمک کنه. خوشبختانه تیم Flutter یه مجموعه ای رو با نام Widget of the Week معرفی کرده که توی اون هر هفته (تغریبا) یک Widget رو معرفی میکنه. Widget Of the WeekFlutter Widget LivebookMedium : Flutter Widgetمفهوم طراحی Declarative در Flutterطبق گفته دایکیومنت های Flutter :Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app فلاتر طراحی UI رو به صورت Declarative پیاده سازی کرده و ما هم برای طراحی نیاز داریم که این مفهوم رو درک کنیم و فرقش رو با طراحی imperative بدونیم. لینک های زیر به بهتر درک کردن این مفهوم کمک میکنن.Introduction to declarative UIStart thinking declarativelyMedium: Intro to Declarative UI with FlutterDeclarative UI Patterns (Google I/O)مفهوم State Management تو فریم ورک های Declarative که طراحی با استفاده از State ها پیاده سازی میشن State Management ها به ما کمک میکنن که State های مختلف رو مدیریت کنیم و بتونیم با کاربر ارتباط برقرار کنیم. مدیریت State پیشفرض Flutter با استفاده از متد SetState است که داخل کلاس StatefulWidget تعبیه شده. اما زمانی که Scale پروژه ها بزرگ میشه کار کردن با SetState خیلی سخت میشه برای همین الگو ها و کتابخونه های فراوانی برای راحت تر شدن مدیریت State توسعه داده شدن که ما تو این مقاله به دوتا از معروف ترین های اون ها اشاره میکنیم. لینک های زیر صرفا برای درک State Managment و نحوه کار با SetState قرار داده شده اند.Flutter State-ManagementIntroduction to State Management in Flutterزبان طراحی Material Designزبان طراحی Material Design توسط گوگل توسعه داده شده و به عنوان زبان طراحی اصلی اندروید هم معرفی میشه. باز هم خوشبختانه تیم Flutter مجموعه ای از Widget ها رو توسعه دادن که مطابق Material Design هستند. میتونید این Widget هارو از طریق import کردن فایل material.dart مورد استفاده قرار بدید. علاوه بر این تیم Flutter مجموعه ای از Widget هایی که مربوط میشه به زبان طراحی Cupertino (که زبان طراحی پیشفرض IOS هستش) هم توسعه دادن. Using Material Design with FlutterMaterial Components widgetsMaterial.ioکار با Theme هاوقتی از Theme ها استفاده میکنیم درواقع داریم قابلیت های مقیاس پذیری،نگهداری و خوانایی پروژمون رو بالا میبریم. کار کردن با Api های Theme تو Flutter خیلی آسونه و به راحتی میتونید از اون ها تو پروژتون استفاده کنید. به عنوان مثال فرض کنید که تو یک پروژه تمام طرح هارو پیاده کردید و بعد از طراحی ها کارفرما بهتون میگه که من با رنگ اصلی پروژه مشکل دارم رنگ اصلی رو تغییر بده. اگه از Theme ها استفاده کرده باشید خیلی راحت با تغییر چندتا خط رنگ رو عوض کنید. اما اگه به صورت Inline به طرحاتون رنگ داده باشید این تغییر بسیار دشوار خواهد بود.Use themes to share colors and font stylesFlutter Interact: Material Theming with Flutter Medium: Flutter ThemesThemes in Flutterنحوه Navigation و Routing(مسیریابی) در Flutter درواقع Navigation در Flutter راه کاریه برای پیمایش بین صفحات. و ما با استفاده از ویجت Navigator میتونیم صفحه جدیدی رو باز کنیم، به عقب برگردیم و ... Flutter NavigationMedium: Push, Pop, PushClean Navigation in Flutter Using Generated RoutesFlutter in action: Flutter routing in depthاتصال به سرور (Restfull)در اکثر پروژه ها کار با سرور جزء خواسته های اصلی پروژه‌هاست. تو Flutter دو تا پکیج مشهور برای این کار وجود داره. پکیج http که توسط تیم Dart توسعه داده شدن و به عنوان پکیج پیشفرض Flutter شناخته میشه. و پکیج Dio که یه کتاب خونه خیلی خوب برای اینکار محصوب میشه. قابلیت های Dio نسبت به http بیشتر هستن و معمولا کار رو برای ما راحت تر میکنن.http package:Fetch data from the internetJSON and serializationdio package:Handling Network Calls and Exceptions in FlutterMedium: dio in flutterUpload Image to Server using DioDio Interceptors in Flutterپکیج های Bloc و Provider از مهمترین پکیج های State Management در Flutter میتونیم به Bloc و Provider اشاره کنیم. این دوتا پکیج خیلی محبوب هستند و تو پروژه های مختلف نصبت به Scale پروژه یکدوم از اون هارو انتخاب میکنیم. پکیج Provider پکیج Provider با استفاده از قابلیت های Context و InheritedWidget به ما کمک میکنه بتونیم State های برناممون رو مدیریت کنیم. کار کردن با Provider خیلی سادست و معمولا از اون در پروژه هایی استفاده میشه که Scale پروژه زیاد نیست. خیلی محبوبه و منابع زیادی براش وجود داره.Simple app state managementPragmatic State Management in Flutter (Google I/O 19)Making sense of all those Flutter ProvidersCodeWithAndrea - flutter ProviderState Management With Providerپکیج Blocبا استفاده از پکیج Bloc که در واقع برای پیاده سازی راحت تر Bloc Pattern تولید شده، خیلی راحت میتونیم Business Logic رو از سایر کد جدا کنیم. این پکیج از Stream ها برای پترن خودش استفاده میکنه. و همونطور که میدونید وقتی داریم از Stream ها استفاده میکنیم میتونیم بریم به سراغ Reactive Programing و از پکیج RxDart استفاده کنیم. Bloc برای پروژه های با Scale متوسط و بزرگ خیلی خوبه و میتونه تو توسعه خیلی مفید باشه. Flutter Bloc Library DocumentArchitect your Flutter project using BLOC patternBLoC, Reactive Programming, Streams - Practical use casesUnderstanding Flutter Bloc PatternGetting Started with the BLoC PatternFlutter Bloc &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Cubit Tutorialفریم ورک Animation در Flutterیکی از نقاط قوت و قابلیت های خفن Flutter، انیمیشن ها هستن. پیاده سازی Animation های خیلی سخت توی Flutter خیلی آسونه. Flutter شامل دو نوع Animation میشه. implicit animations و explicit animations که برای هر دوشون کلی کلاس از پیش تعریف شده وجود داره. پیشنهاد میکنم برای درک کامل انیمیشن ها در Flutter حتما سری Flutter in focus مربوط به انیمیشن هارو ببینید.Introduction to animationsHow to choose which Flutter Animation Widget is right for you?Flutter in focusFlutter animations: The basicsAnimations in Flutter - Easy Guideذخیره سازی (Persistence) معمولا ذخیره سازی در فلاتر به سه بخش تقسیم میشه: ذخیره سازی در دیتابیس (Database)ذخیره سازی در فایل(File)ذخیره سازی در ساختار Key : Valueهرکدوم از این موارد بسته به شرایط و نیاز تو پروژه ها استفاده میشن. ولی تسلط کامل به هر سه مورد میتونه یه مزیت محصوب بشه.Flutter PersistenceData Persistence on FlutterStep by step to persist data in FlutterChoosing the right database for your Flutter appپ.ن: تو این بخش نمیخوایم در مورد دیتابیس های فلاتر صحبت کنیم و معمولا همین که کسی بتونه با دیتابیس پیشفرض فلاتر (Sqflite) کار کنه میتونه کافی باشه. اما اگه با انواع دیتابیس ها و پکیج ها آشنا باشید مزیت خیلی خوبیه به عنوان مثال پیشنهاد میکنم در مورد Hive هم کمی مطالعه کنید. بومی سازی (Localization)از اون جایی که اکثر اپلیکشن های ما به زبان فارسی نوشته میشن نیازمند بومی سازی نیز هستند. خود فریمورک فلاتر برای این فرایند یکسری ابزار توسعه داده. وقتی یک اپ رو با استفاده از ابزار Localization توسعه میدیم احتمالا برای کاربر اون منطقه جذاب تر میشه. مثلا وقتی ما زبان برناممون رو فارسی انتخاب میکنیم همه نوشته های دیفالت فلاتر به فارسی در میان و جهت صفحه از LTR به RTL تبدیل میشه. این میتونه به تجربه کاربری کمک کنه.Internationalizing Flutter appsInternationalizing and Localizing Your Flutter AppFlutter: internationalization tutorialsتا اینجا راجع به مهارت های اولیه که یک توسعه دهنده فلاتر نیاز داره تا بتونه کارهای خودش رو پیش ببره و یا بتونه برای یک موقعیت شغلی اقدام کنه، صحبت کردیم. در ادامه مقاله میریم سراغ مهارت های عمیق تری که دونستن اون ها باعث میشه شما درک عمیق تری نسبت به فلاتر داشته باشید و نیازمندی های بیشتری رو حل کنید.توانمندی های پیشرفتهتو این بخش به موضوعات و مفاهیمی اشاره میکنیم که نیاز به نگاه عمیق تر داره. این مفاهیم میتونه به ما در توسعه اپلیکیشن ها بزرگتر و کاراتر کمک کنه.طراحی واکنش گرا (Responsive UI design)از اونجایی که فلاتر داره به سمتی میره که بتونه برای پلتفرم های دیگه مثل Web و سیستم عامل های Desktop هم خروجی بده خیلی، طراحی واکنش گرا جزو نیازمندی هایی حساب میشه که خیلی میتونن به پروژه های مولتی پلتفرم کمک کنن.Creating responsive appsThe Best Flutter Responsive UI PatternFlutter web — getting started with responsive designکد نویسی غیر همزمان در دارت (asynchronous coding in Dart)از مفاهیم مهم هر زبان دارت کدنویسی غیر همزمانه. از قابلیت های مهمی که زبان Dart تو این زمینه داره میشه به Futures, Streams, background tasks, isolates, event loops, Async/Await و ... اشاره کرد. و باز هم خوشبختنانه تیم Flutter یه سری ویدیو دیگه درمورد همین موضوع تولید کرده که خیلی راحت میشه این مفاهیم نصبتا سخت رو توش درک کرد. پیشنهاد میکنم حتما این سری ویدیو هارو ببینید.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Flutter in focus: asynchronous coding in dartAsynchronous programming: futures, async, awaitDart asynchronous programming: Isolates and event loopsDart asynchronous programming: Futuresکلاس های Widgets, RenderObjects, Elements در Flutterوقتی در مورد این سه تا کلاس صحبت میکنیم در واقع داریم در حوزه Render کردن Widget ها توسط Flutter صحبت میکنیم. این که بدونیم فلاتر زیر کاپوت (Under the hood) داره چطور ویجت هارو میسازه و نمایش میده و یا اونهارو اپدیت و یا جایگزین میکنه خیلی میتونه به ما کمک کنه که برنامه بهینه تری بنویسیم. How Flutter renders WidgetsFlutter Europe : Flutter, what are Widgets, RenderObjects and Elements? Medium: How Flutter Renders Widgets?Flutter Rendering: Under the Hoodتست نویسی در Flutterتست نویسی جزء مهم ترین وظایف یک توسعه دهنده است. مخصوصا تو پروژه های بزرگ این فرایند خیلی جاها باعث جلوگیری از هدر رفتن زمان میشه. اگه تست خوبی نوشته باشیم و تو پروژه تغییری انجام میدیم میتونیم ببینیم که این تغییر رو چه قسمت های دیگه ای تاثیر داشته. تو فلاتر تست ها به سه دسته تقسیم میشن: Unit Test, Widget Test , Integration Test .پ.ن: متاسفانه خیلی از کارفرما ها حاضر نیستن هزینه تست نویسی رو قبول کنن و به همین دلیل معمولا خیلی از پروژه ها تستی براشون نوشته نشده. Testing Flutter appsThe Boring Show: Testing Flutter Apps CodeLab: How to test a Flutter appUnit Testing With Flutter: Getting StartedWidget Testing With Flutter: Getting Startedکار با Flutter Webقابلیت خروجی گرفتن پروژه روی Web چند وقتی میشه که توسط Flutter معرفی شده. این قابلیت خیلی میتونه توی خیلی از پروژه ها مفید باشه. اما نکته ای که وجود داره این که این قابلیت هنوز با چنل Stable مرج نشده و اگر کسی میخواد از اون استفاده کنه باید از چنل Beta استفاده کنه (در حال حاظر آخرین ورژن ارائه شده توسط فلاتر نسخه 1.22.1 هستش). خب همین که یه قابلیت توی فریم ورک Stable نشده، میتونه نشون دهنده این باشه که کار کردن باهاش میتونه ریسک بالایی داشته باشه. علاوه بر اون خیلی از پلاگین ها و پکیج هایی که در حال حاضر برای پلتفرم های موبایل قابل استفاده هستن هنوز برای نسخه Web در دسترس نیستن. Flutter Interact 19 : Designing for the Web with FlutterBuilding a web application with FlutterWrite your first Flutter app on the webIns and Outs of Flutter WebGoing deeper with Flutter’s web supportتوسعه Package و Plugin در فلاتراگر نیاز دارید که کدهاتون به صورت یک کتابخونه در بیارید و اون ها رو با دیگران به اشتراک بگذارید میتونید از Package و یا Plugin استفاده کنید. Package درواقع مجموعه ای از کدهای دارت هست که نیازمندی به کد های پلتفرم نداره. در عوض Plugin معمولا از کد های پلتفرم ها تشکیل شده. Developing packages and pluginsCode Lab: How to write a Flutter pluginModern Flutter Plugin DevelopmentHow to Create, Publish and Manage Flutter Packagesکار با ویجت CustomPainterاگه با اندروید کار کرده باشید CustomPainter خیلی شبیه به CustomView هست. از این widget زمانی استفاده میشه که میخوایم یک Widget رو خودمون طراحی کنیم. شما با استفاده از canvas و paint تقریبا میتونید هر چیزی رو طراحی کنید و بکشید. Flutter Widget of the Week: CustomPaint Flutter In Focus: Custom painting in Flutter How to draw and animate designs with Flutter CustomPaint WidgetDrawing Custom Shapes With CustomPainter in Flutterتوسعه کد مخصوص پلتفرم (Platform-specific code)این ویژگی فلاتر زمانی استفاده میشه که ما نیاز داریم که به هر نحوی کدی که مربوط به پلتفرم هستش رو اجرا کنید. مثلا فرض کنین که میخوایم میزان روشنایی صفحرو در قالب درصد به دست بیاریم و همچنین چون هنوز پلاگینی برای این مثال درست نشده ما باید خودمون این مقادیر رو از پلتفرم ها دریافت کنیم. در این موقعیت باید هم برای Android و هم برای IOS کد نیتیو بزنیم و مقادیر رو از Api های پلتفرم ها دریافت کنیم و در کد Dart استفاده کنیم. Writing custom platform-specific codeHow to access native(Android/IOS) code in the flutter using MethodChannel.How to develop a platform channel in Flutter between Dart and Native Codeکار با DevToolsابزار DevTools مجموعه ای از ابزارهای عملکردی (Performance) و رفع اشکال (Debugging) برای دارت و فلاتر است. DevTools در حال حاضر در نسخه بتا ارائه شده، اما روند توسعه آن بسیار فعال میباشد. DevTools خیلی میتونه تو اشکال زدایی برنامه کمک کنه و اگر کسی نیاز داره که برنامش رو بهینه ترکنه DevTools خیلی میتونه موسر باشه. از کار هایی که DevTools میتونه انجام بده میشه به موارد زیر اشاره کرد:Inspect the UI layout and state of a Flutter app.Diagnose UI jank performance issues in a Flutter app.CPU profiling for a Flutter or Dart app.Network profiling for a Flutter app.Source-level debugging of a Flutter or Dart app.Debug memory issues in a Flutter or Dart command-line app.Analyze code and app size.برای آشنایی بیشتر با DevTools میتونید به از لینک های زیر استفاده کنید.DevTools OverviewFlutter Day: Dart DevToolsMedium: Dart DevToolsافزایش کارایی (Performance)یکی از فاکتور های مهم برای یک اپلیکیشن کاریی و یا Performance اونه. اپلیکیشنی که Performance خوبی نداشته باشه میتونه روی تجربه کاربری هم تاثیر بگذاره. خوشبختانه تیم فلاتر برای این موضوع هم دایکیومنت ها و محتوا های خوبی ارائه داده. Flutter performance profilingFlutter Europe: Optimizing your Flutter AppPerformance best practicesFlutter in Focus: Flutter performance tips لینک های بیشترلینک هایی که در زیر به اشتراک میزاریم مجموعه ای از منابع و سایت هایی هستن که خودشون آموزش های فلاتر تولید میکنن و یا مجموعه ای از آموزش ها رو درون خودشون قرار دادن. اگر این منابع رو به صورت پیوسته دنبال کنید میتونید آموزش های خوبی رو ببینید.کانال Youtube مربوط به Flutter.دوره کامل آموزش Flutter که توسط همکاری Google و Udacity تولید شده.سایت FilledStack یه سایت برای آموزش توسعه موبایله که آموزش های خیلی مفیدی داره.سایت raywenderlich یکی از سایت های عالیه هست که توزمینه Android, iOS و Flutter منابع فوق العاده ای داره. خیلی از لینک های این مقاله از این سایت گرفته شده.سایت codewithandrea هم یکی دیگه از سایت های خوبه که تو زمینه توسعه Flutter کار میکنه.سایت Codelabs گوگل که دیگه نیاز به معرفی نداره. این سایت شامل مجموعه از آموزش های خیلی خفنه گام به گام که میتونید به صورت رایگان ازشون استفاده کنید.کانال MTECHVIRAL که توسط دوست هندیمون Pawan Kumar درست شده.سایت Flutter Widget Livebook مجموعه از Widget ها که به صورت Live در اختیار ما میزاره.مجموعه از کد ها خیلی خوب که تو Codelab قرار داده شده و میتونید باهاشون بازی کنید و تغییرشون بدید.و انتشارات Flutter Community در سایت Medium که واقعا میتونید مقاله های فوق العاده ای توش پیدا کنید.خوب امیدوارم این مقاله براتون مفید بوده باشه، لطفا اگر انتقاد یا پیشنهادی دارید که میتونه به بهتر شدن مقاله کمک کنه حتما اون هارو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید. دیگر مقالات من در ویرگول: https://virgool.io/@payam-zahedi/git-pull-vs-fetch-teskevifk9hn https://virgool.io/flutter-community/flutter-learning-abstract-zcj0phhevl5v