خب دوره ی جذابمون رو با هم شروع میکنیم.

قبل از شروع بگم که ورژن فعلی فلاتر من 3.13 هست و روی چنل Stable هستم. در طول دوره ممکنه به چنل Master سوییچ کنم ولی نیاز نیست تو این کار رو انجام بدی.

اگه واژه ی Flutter Architecture رو توی گوگل جست و جو کنی, میتونی تصویر زیر رو پیدا کنی:

همون طور که میبینی پروژه ی فلاتر از 3 بخش اصلی تشکیل شده:

• Framework
• Engine
• Embedder

توی این دوره ما قراره که روی بخش Framework تمرکز کنیم. بخش Framework در واقع قسمت High Level داستان هست که توسط یوزر ها که ما باشیم استفاده میشه و به عبارتی user friendly هست. این بخش به طور کامل با زبان دارت توسعه داده شده.

ولی بخش اصلی داستان که توی این دوره واردش نمیشیم و نیاز به دانش C++ داره, Engine هست که کارهای Low Level مثل صحبت کردن با CPU و … رو انجام میده.

اما یه لایه ای به اسم Dart Ui این وسط هست که وظیفش برقرار کردن ارتباط بین Framework و Engine هست که قراره اون رو هم خوب یادش بگیریم.

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

قسمت بالای بالای بالا, اپلیکیشن ما هست که به زبان دارت نوشته میشه و برای این منظور از فریمورک که اون هم با زبان دارت توسعه داده شده استفاده میکنیم. فریمورک هم برای برقراری ارتباط و صحبت کردن با انجین از یه Library به اسم Dart ui استفاده میکنه.

با بقیه بخش بخش ها مثل Embedder کار نداریم و جزو سرفصل های دوره ی ما نیست!!!

حالا طبق داکیومنت فلاتر وظایف هر کدوم از این بخش ها رو به صورت تیتر وار ببینیم:

Dart App

• ترکیب ویجت ها و ساختن UI مورد نظر
• پیاده سازی بیزینس لاجیک اپ مورد نظر

Framework

• فراهم کردن یه High level API برای ساختن اپ (برای مثال widgets, hit-testing, gesture detection, accessibility, text input) (نمیدونی Hit-testing چیه ؟ یا … ؟ در طول دوره میفهمی…)
• Composites the app’s widget tree into a scene (این رو عین جمله ی انگلیسیش رو اوردم چون که نمیخاستم ترجمش کنم و درطول دوره میفهمی. برای مثال Scene رو بخوام ترجمه کنم میشه منظره, ولی نباید ترجمه بشه و یه المانی داخل Dart UI هست)

Engine

• Responsible for rasterizing composited scenes (اینم نمیخام ترجمه کنم)
• Provides low-level implementation of Flutter’s core APIs (for example, graphics, text layout, Dart runtime)
• فانکشنالیتی خودش رو با استفاده از Dart UI در اختیار فریمورک قرار میده.

اگه میخوای بیشتر روی داستان ریز شی و با بقیه قسمت ها مثل Embedder هم اشنا شی, لینک زیر رو بخون:
https://docs.flutter.dev/resources/architectural-overview

همون طور که گفتم توی این دوره قراره روی Framework و Dart Ui متمرکز بشیم. و اما بریم یکم راجب Framework صحبت کنیم:

همون طور که توی تصویر بالا میبینی, فریمورک از یه معماری لایه ای استفاده میکنه (از پایین به بالا نگاه کن)

توی پایین ترین قسمت Foundation قرار داره که چیزای بیسیک که توی همه ی لایه دیگه بهش نیاز هست اینجا قرار داره. برای مثال کلاس ChangeNotifier توی این لایه قرار داره.

توی سطح بعدی لایه های Animation و Painting و Gestures قرار دارن. لایه ی Animation که از اسمش مشخصه که مربوط به چی هست و لایه ی Gestures هم مربوط به ردیابی کلیک های کاربر و این حرفاست, همون Hit-testing که اونجا نفهمیدی چیه!!!

توی لایه بعدی Rendering قرار میگیره که Render Tree و Layer Tree و تمام RenderObject ها اینجا قرار دارن.

لایه بعدی Widgets هست که Element Tree و تمام ویجت های بیسیک مثل Navigator و ListView و … داخلش هستن.

لایه های بعدی کاملن High Level هستن و مربوط به پلتفرم های خاص میشن, مثل Material و Cupertino و … . برای مثال ویجتی مثل AppBar که یه ویجت متریال هست توی لایه متریال قرار میگیره.

همون طور که گفتم از یه معماری لایه ای استفاده شده. یعنی چی؟ یعنی اینکه لایه های پایینی هیچی از لایه های بالا سری خودشون نمیدونن و هیچ رفرنسی بهشون ندارن. برای مثال لایه Foundation هیچ رفرنسی به لایه های دیگه نداره و هیچی ازشون نمیدونه و یا لایه Rendering هیچ رفنسی به لایه Widgets نداره. پس هز چی میریم بالاتر, داستان High Level تر میشه.

حالا هر کدوم این لایه ها یه کلاسی به اسم Binding دارن. برای مثال widgetBiniing یا SchedulerBinding یا … که وظیفش اتصال این لایه با Dart Ui هست و وظیفه ی Dart UI هم که اتصال فریمورک به انجین بود.

البته این که میگم هر کدوم لایه ها یه Binding دارن, کاملن درست نیست و این موضوع فقط تا لایه ی Widgets هست و لایه های بالاتر از لایه ی Widgets دیگه چیزی به اسم Binding ندارن.

حالا میخوام این لایه ها رو توی پروژه ی فلاتری هم بهت نشون بدم. من یه پروژه ی خام فلاتر با VS Code ساختم:

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

پ.ن: یه پوشه به اسم Scheduler هست که توی دیاگرام نبود. اینو در ادامه ی دوره در موردش صحبت میکنیم.

همچنین اگه توی گیتهاب فلاتر هم بری و مسیر سمت چپ توی تصویر پایین رو دنبال کنی, میتونی این پوشه ها رو ببینی:

قبل از پایان جلسه یه سوال آسون ازت بپرسم:

همون طور که میدونی متریال مال گوگله و Cupertino مال اپل. درسته؟

حالا اگه بخوایم برای Microsoft Fluent یه Library درست کنیم توی کدوم لایه و کجا باید قرار بگیره؟