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


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

  • این مقاله میتونه به کسانی که جویای کار در زمینه Flutter هستن کمک کنه که مفاهیم و مواردی که در Flutter مهم هست رو شناسایی کنن و اون هارو یاد بگیرن.
  • همچنین شرکت ها و کسب کارهایی که نیازمند یک توسعه دهنده Flutter هستن میتونن با توجه به این مقاله آگهی بهتری رو ارائه بدن.

پ.ن: متاسفانه آگهی هایی که در سایت Jobinja برای توسعه دهنده Flutter ثبت شده کیفیت مناسیبی ندارن و امید وارم این مقاله بتونه به دوستان کارفرما کمک کنه آگهی های با کیفیت تری رو تولید کنند.

پ.ن: سعی میشه این مقاله تا حد امکان به روز بمونه بنابراین اگر نظر یا پیشنهادی دارید که باعث بهبود این مقاله میشه و یا لینک و منبع مفیدی دارید اون رو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید.


توانمندی های مقدماتی

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

آشنایی با زبان Dart

وقتی داریم با Flutter کار میکنیم مهم ترین چیز اینه که زبان دارت که زبان توسعه اون هست رو خوب بشناسیم و تغییراتش رو دنبال کنیم. خوشبختانه از اونجایی که روند استفاده Flutter خیلی خوب بوده تیم Dart هم داره خیلی خوب زبان رو نسبت به نیاز های جدید آپدیت میکنه .زبان Dart خیلی به زبان های خانواده C و Java شبیه و یادگیریش برای کسانی که این طیف زبان هارو بلدن خیلی راحته.

پ.ن: پیشنهاد میشه حتما درموردقابلیت Extension Method در دارت مطالعه کنید.


شناخت ویجت های StateLess و StateFull

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


آشنایی Widget های پیشفرض Flutter

فلاتر برخلاف اندروید تعداد خیلی زیاد تری از کامپوننت ها و یا Widget هارو به صورت پیشفرض ارائه کرده. شناخت این ویجت ها میتونه خیلی به طراحی و ساخت UI های مختلف کمک کنه. خوشبختانه تیم Flutter یه مجموعه ای رو با نام Widget of the Week معرفی کرده که توی اون هر هفته (تغریبا) یک 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 بدونیم. لینک های زیر به بهتر درک کردن این مفهوم کمک میکنن.

مفهوم State Management

تو فریم ورک های Declarative که طراحی با استفاده از State ها پیاده سازی میشن State Management ها به ما کمک میکنن که State های مختلف رو مدیریت کنیم و بتونیم با کاربر ارتباط برقرار کنیم. مدیریت State پیشفرض Flutter با استفاده از متد SetState است که داخل کلاس StatefulWidget تعبیه شده. اما زمانی که Scale پروژه ها بزرگ میشه کار کردن با SetState خیلی سخت میشه برای همین الگو ها و کتابخونه های فراوانی برای راحت تر شدن مدیریت State توسعه داده شدن که ما تو این مقاله به دوتا از معروف ترین های اون ها اشاره میکنیم. لینک های زیر صرفا برای درک State Managment و نحوه کار با SetState قرار داده شده اند.


زبان طراحی Material Design

زبان طراحی Material Design توسط گوگل توسعه داده شده و به عنوان زبان طراحی اصلی اندروید هم معرفی میشه. باز هم خوشبختانه تیم Flutter مجموعه ای از Widget ها رو توسعه دادن که مطابق Material Design هستند. میتونید این Widget هارو از طریق import کردن فایل material.dart مورد استفاده قرار بدید. علاوه بر این تیم Flutter مجموعه ای از Widget هایی که مربوط میشه به زبان طراحی Cupertino (که زبان طراحی پیشفرض IOS هستش) هم توسعه دادن.


کار با Theme ها


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


نحوه Navigation و Routing(مسیریابی) در Flutter

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

اتصال به سرور (Restfull)

در اکثر پروژه ها کار با سرور جزء خواسته های اصلی پروژه‌هاست. تو Flutter دو تا پکیج مشهور برای این کار وجود داره. پکیج http که توسط تیم Dart توسعه داده شدن و به عنوان پکیج پیشفرض Flutter شناخته میشه. و پکیج Dio که یه کتاب خونه خیلی خوب برای اینکار محصوب میشه. قابلیت های Dio نسبت به http بیشتر هستن و معمولا کار رو برای ما راحت تر میکنن.

http package:

dio package:


پکیج های Bloc و Provider

از مهمترین پکیج های State Management در Flutter میتونیم به Bloc و Provider اشاره کنیم. این دوتا پکیج خیلی محبوب هستند و تو پروژه های مختلف نصبت به Scale پروژه یکدوم از اون هارو انتخاب میکنیم.

پکیج Provider

پکیج Provider با استفاده از قابلیت های Context و InheritedWidget به ما کمک میکنه بتونیم State های برناممون رو مدیریت کنیم. کار کردن با Provider خیلی سادست و معمولا از اون در پروژه هایی استفاده میشه که Scale پروژه زیاد نیست. خیلی محبوبه و منابع زیادی براش وجود داره.

پکیج Bloc

با استفاده از پکیج Bloc که در واقع برای پیاده سازی راحت تر Bloc Pattern تولید شده، خیلی راحت میتونیم Business Logic رو از سایر کد جدا کنیم. این پکیج از Stream ها برای پترن خودش استفاده میکنه. و همونطور که میدونید وقتی داریم از Stream ها استفاده میکنیم میتونیم بریم به سراغ Reactive Programing و از پکیج RxDart استفاده کنیم. Bloc برای پروژه های با Scale متوسط و بزرگ خیلی خوبه و میتونه تو توسعه خیلی مفید باشه.


فریم ورک Animation در Flutter

یکی از نقاط قوت و قابلیت های خفن Flutter، انیمیشن ها هستن. پیاده سازی Animation های خیلی سخت توی Flutter خیلی آسونه. Flutter شامل دو نوع Animation میشه. implicit animations و explicit animations که برای هر دوشون کلی کلاس از پیش تعریف شده وجود داره. پیشنهاد میکنم برای درک کامل انیمیشن ها در Flutter حتما سری Flutter in focus مربوط به انیمیشن هارو ببینید.

ذخیره سازی (Persistence)

معمولا ذخیره سازی در فلاتر به سه بخش تقسیم میشه:

  1. ذخیره سازی در دیتابیس (Database)
  2. ذخیره سازی در فایل(File)
  3. ذخیره سازی در ساختار Key : Value

هرکدوم از این موارد بسته به شرایط و نیاز تو پروژه ها استفاده میشن. ولی تسلط کامل به هر سه مورد میتونه یه مزیت محصوب بشه.

پ.ن: تو این بخش نمیخوایم در مورد دیتابیس های فلاتر صحبت کنیم و معمولا همین که کسی بتونه با دیتابیس پیشفرض فلاتر (Sqflite) کار کنه میتونه کافی باشه. اما اگه با انواع دیتابیس ها و پکیج ها آشنا باشید مزیت خیلی خوبیه به عنوان مثال پیشنهاد میکنم در مورد Hive هم کمی مطالعه کنید.


بومی سازی (Localization)

از اون جایی که اکثر اپلیکشن های ما به زبان فارسی نوشته میشن نیازمند بومی سازی نیز هستند. خود فریمورک فلاتر برای این فرایند یکسری ابزار توسعه داده. وقتی یک اپ رو با استفاده از ابزار Localization توسعه میدیم احتمالا برای کاربر اون منطقه جذاب تر میشه. مثلا وقتی ما زبان برناممون رو فارسی انتخاب میکنیم همه نوشته های دیفالت فلاتر به فارسی در میان و جهت صفحه از LTR به RTL تبدیل میشه. این میتونه به تجربه کاربری کمک کنه.

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

توانمندی های پیشرفته

تو این بخش به موضوعات و مفاهیمی اشاره میکنیم که نیاز به نگاه عمیق تر داره. این مفاهیم میتونه به ما در توسعه اپلیکیشن ها بزرگتر و کاراتر کمک کنه.

طراحی واکنش گرا (Responsive UI design)

از اونجایی که فلاتر داره به سمتی میره که بتونه برای پلتفرم های دیگه مثل Web و سیستم عامل های Desktop هم خروجی بده خیلی، طراحی واکنش گرا جزو نیازمندی هایی حساب میشه که خیلی میتونن به پروژه های مولتی پلتفرم کمک کنن.


کد نویسی غیر همزمان در دارت (asynchronous coding in Dart)

از مفاهیم مهم هر زبان دارت کدنویسی غیر همزمانه. از قابلیت های مهمی که زبان Dart تو این زمینه داره میشه به Futures, Streams, background tasks, isolates, event loops, Async/Await و ... اشاره کرد. و باز هم خوشبختنانه تیم Flutter یه سری ویدیو دیگه درمورد همین موضوع تولید کرده که خیلی راحت میشه این مفاهیم نصبتا سخت رو توش درک کرد. پیشنهاد میکنم حتما این سری ویدیو هارو ببینید.<br/>


کلاس های Widgets, RenderObjects, Elements در Flutter

وقتی در مورد این سه تا کلاس صحبت میکنیم در واقع داریم در حوزه Render کردن Widget ها توسط Flutter صحبت میکنیم. این که بدونیم فلاتر زیر کاپوت (Under the hood) داره چطور ویجت هارو میسازه و نمایش میده و یا اونهارو اپدیت و یا جایگزین میکنه خیلی میتونه به ما کمک کنه که برنامه بهینه تری بنویسیم.



تست نویسی در Flutter

تست نویسی جزء مهم ترین وظایف یک توسعه دهنده است. مخصوصا تو پروژه های بزرگ این فرایند خیلی جاها باعث جلوگیری از هدر رفتن زمان میشه. اگه تست خوبی نوشته باشیم و تو پروژه تغییری انجام میدیم میتونیم ببینیم که این تغییر رو چه قسمت های دیگه ای تاثیر داشته. تو فلاتر تست ها به سه دسته تقسیم میشن: Unit Test, Widget Test , Integration Test .

پ.ن: متاسفانه خیلی از کارفرما ها حاضر نیستن هزینه تست نویسی رو قبول کنن و به همین دلیل معمولا خیلی از پروژه ها تستی براشون نوشته نشده.

کار با Flutter Web

قابلیت خروجی گرفتن پروژه روی Web چند وقتی میشه که توسط Flutter معرفی شده. این قابلیت خیلی میتونه توی خیلی از پروژه ها مفید باشه. اما نکته ای که وجود داره این که این قابلیت هنوز با چنل Stable مرج نشده و اگر کسی میخواد از اون استفاده کنه باید از چنل Beta استفاده کنه (در حال حاظر آخرین ورژن ارائه شده توسط فلاتر نسخه 1.22.1 هستش). خب همین که یه قابلیت توی فریم ورک Stable نشده، میتونه نشون دهنده این باشه که کار کردن باهاش میتونه ریسک بالایی داشته باشه. علاوه بر اون خیلی از پلاگین ها و پکیج هایی که در حال حاضر برای پلتفرم های موبایل قابل استفاده هستن هنوز برای نسخه Web در دسترس نیستن.


توسعه Package و Plugin در فلاتر

اگر نیاز دارید که کدهاتون به صورت یک کتابخونه در بیارید و اون ها رو با دیگران به اشتراک بگذارید میتونید از Package و یا Plugin استفاده کنید. Package درواقع مجموعه ای از کدهای دارت هست که نیازمندی به کد های پلتفرم نداره. در عوض Plugin معمولا از کد های پلتفرم ها تشکیل شده.


کار با ویجت CustomPainter

اگه با اندروید کار کرده باشید CustomPainter خیلی شبیه به CustomView هست. از این widget زمانی استفاده میشه که میخوایم یک Widget رو خودمون طراحی کنیم. شما با استفاده از canvas و paint تقریبا میتونید هر چیزی رو طراحی کنید و بکشید.



توسعه کد مخصوص پلتفرم (Platform-specific code)

این ویژگی فلاتر زمانی استفاده میشه که ما نیاز داریم که به هر نحوی کدی که مربوط به پلتفرم هستش رو اجرا کنید. مثلا فرض کنین که میخوایم میزان روشنایی صفحرو در قالب درصد به دست بیاریم و همچنین چون هنوز پلاگینی برای این مثال درست نشده ما باید خودمون این مقادیر رو از پلتفرم ها دریافت کنیم. در این موقعیت باید هم برای Android و هم برای IOS کد نیتیو بزنیم و مقادیر رو از Api های پلتفرم ها دریافت کنیم و در کد Dart استفاده کنیم.


کار با 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 میتونید به از لینک های زیر استفاده کنید.

افزایش کارایی (Performance)

یکی از فاکتور های مهم برای یک اپلیکیشن کاریی و یا Performance اونه. اپلیکیشنی که Performance خوبی نداشته باشه میتونه روی تجربه کاربری هم تاثیر بگذاره. خوشبختانه تیم فلاتر برای این موضوع هم دایکیومنت ها و محتوا های خوبی ارائه داده.



لینک های بیشتر

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


خوب امیدوارم این مقاله براتون مفید بوده باشه، لطفا اگر انتقاد یا پیشنهادی دارید که میتونه به بهتر شدن مقاله کمک کنه حتما اون هارو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید.


دیگر مقالات من در ویرگول:

https://virgool.io/@payam-zahedi/git-pull-vs-fetch-teskevifk9hn
https://virgool.io/flutter-community/flutter-learning-abstract-zcj0phhevl5v