How Flutter Is Built: Framework, Engine, EmbedderFlutter چۆن دروست کراوە: فرەیموۆرک، بزوێنەر، Embedder

You can use Flutter without knowing what is inside it. But when an error message mentions "the engine", when a package says it is a "plugin", or when someone says Flutter "paints its own pixels", it helps to know how Flutter is built. The lecture's answer: Flutter is a layered system.

دەتوانیت Flutter بەکار بهێنیت بەبێ ئەوەی بزانیت چی تێدایە. بەڵام کاتێک پەیامێکی هەڵە باسی «بزوێنەر» دەکات، کاتێک پاکێجێک دەڵێت «پاشکۆیە (Plugin)»، یان کاتێک کەسێک دەڵێت Flutter «پیکسڵەکانی (Pixel) خۆی دەکێشێت»، باشە بزانیت Flutter چۆن دروست کراوە. وەڵامی وانەکە: Flutter سیستەمێکی چەندچینە.

At a high level there are three main layers: the framework (on top), the engine (in the middle) and the embedder (at the bottom, next to the operating system). Your own app sits on top of them all. Watch them stack up:

لە ئاستێکی بەرزەوە سێ چینی سەرەکی هەن: فرەیموۆرک (لە سەرەوە)، بزوێنەر (Engine، لە ناوەڕاست) و Embedder (لە خوارەوە، لە تەنیشت سیستەمی وەگەڕخەرەکەوە). ئەپەکەی (App) خۆت لە سەرووی هەموویانەوەیە. سەیر بکە چۆن لەسەر یەک دادەنرێن:

The bottom layer has platform-specific embedders, one for each kind of operating system. An embedder is the native app that hosts Flutter. It provides the entry point (what starts when you open the app) and coordinates with the operating system to use its services: the surface to draw on, input (touches, keys, mouse), accessibility, storage, and the event loop. It also sets up the engine and creates the threads that run the UI and the drawing.

چینی خوارەوە Embedderـی تایبەت بە هەر سەکۆیەک هەیە، یەکێک بۆ هەر جۆرە سیستەمێکی وەگەڕخەر. Embedder ئەو ئەپە ڕەسەنەیە کە Flutter لە خۆی دەگرێت. خاڵی دەستپێکردن دابین دەکات (ئەوەی کاتێک ئەپەکە دەکەیتەوە دەست پێ دەکات) و لەگەڵ سیستەمی وەگەڕخەرەکە هەماهەنگ دەبێت بۆ بەکارهێنانی خزمەتگوزارییەکانی: ڕووی کێشان، نێوخستە (دەستلێدان، کیبۆرد (Keyboard)، ماوس (Mouse))، دەستڕاگەیشتن، خەزنکردن و خولی ڕووداوەکان. هەروەها بزوێنەرەکە ئامادە دەکات و ئەو ڕێڕەوانەی کار ⁦(threads)⁩ دروست دەکات کە ڕووکاری وێنەیی (GUI) و کێشان جێبەجێ دەکەن.

Because the engine does not depend on any one platform, anyone can write a custom embedder: people run Flutter on a Raspberry Pi or inside a car's screen this way.

چونکە بزوێنەرەکە پشت بە هیچ سەکۆیەکی دیاریکراو نابەستێت، هەر کەسێک دەتوانێت Embedderـێکی تایبەت بنووسێت: خەڵک بەم شێوەیە Flutter لەسەر ⁦Raspberry Pi⁩ یان لە ناو شاشەی ئۆتۆمبێلدا کار پێ دەکەن.

The middle layer is the engine, the core of Flutter, written mostly in C and C++. The lecture lists its main jobs:

چینی ناوەڕاست بزوێنەرە ⁦(Engine)⁩، ناوکی Flutter کە زۆربەی بە C و ⁦C++⁩ نووسراوە. وانەکە ئەرکە سەرەکییەکانی ڕیز دەکات:

Your Dart code never calls the C++ engine directly. The engine shows a small Dart face to the framework, a library called dart:ui, with low-level classes for input, graphics and text. The framework is built on top of dart:ui.

کۆدی Dartـەکەت هەرگیز ڕاستەوخۆ بزوێنەرە ⁦C++⁩ـەکە بانگ ناکات. بزوێنەرەکە ڕووێکی بچووکی Dart پیشانی فرەیموۆرکەکە دەدات، کتێبخانەیەک بە ناوی dart:ui، بە کلاسەکانی (Class) ئاستی نزم بۆ نێوخستە، گرافیک و دەق. فرەیموۆرکەکە لەسەر dart:ui بنیات نراوە.

A renderer turns a description of a scene ("a blue rounded box here, this text there") into coloured pixels on the screen, using the phone's graphics processor (GPU). The GPU runs small programs called shaders to draw each shape.

وێناکەر وەسفی وێنەیەک («سندووقێکی شینی گۆشە خڕ لێرە، ئەم دەقە لەوێ») دەکات بە پیکسڵەکانی ڕەنگاوڕەنگ لەسەر شاشەکە، بە بەکارهێنانی یەکەی چارەسەرکردنی وێنەیی (GPU). یەکەی چارەسەرکردنی وێنەیی بەرنامە بچووکەکانی پێی دەوترێت shader جێبەجێ دەکات بۆ کێشانی هەر شێوەیەک.

For years Flutter used the Skia graphics library. Skia sometimes had to prepare (compile) a shader the first time an animation needed it, while the app was running. That caused small stutters, called jank, the first time an animation played. Impeller, Flutter's own renderer, fixes this: it prepares a smaller, simpler set of shaders in advance, when the engine itself is built, so nothing has to be compiled while the user watches. The result is predictable, smooth performance.

بۆ چەند ساڵێک Flutter کتێبخانەی گرافیکی Skiaـی بەکار دەهێنا. Skia هەندێک جار دەبوو یەکەم جار کە ئەنیمەیشنێک پێویستی بە shaderـێک بوو، لە کاتی کارکردنی ئەپەکەدا ئامادەی بکات (کۆمپایلی بکات). ئەمە لەرزینی بچووکی دروست دەکرد کە پێی دەوترێت jank، یەکەم جار کە ئەنیمەیشنێک پیشان دەدرا. Impeller، وێناکەری خودی Flutter، ئەمە چارەسەر دەکات: کۆمەڵێکی بچووکتر و سادەتر لە shader پێشوەختە ئامادە دەکات، لە کاتی بیلدکردنی خودی بزوێنەرەکەدا، بۆیە هیچ شتێک لە کاتێکدا بەکارهێنەر (User) سەیر دەکات کۆمپایل ناکرێت. ئەنجامەکە خێراییەکی پێشبینیکراو و لووسە.

The top layer is the framework. It is the part the developer works with to write Flutter apps. It is written in Dart and comes with ready-made libraries, layouts, widgets and more. The lecture names three main parts (foundation, rendering, widgets). The current documentation describes five levels, from the bottom up:

چینی سەرەوە فرەیموۆرکە. ئەو بەشەیە کە بەرنامەساز (Software developer) کاری لەگەڵ دەکات بۆ نووسینی ئەپەکانی Flutter. بە Dart نووسراوە و کتێبخانەکان، ڕێکخستنی ڕووکار، ویجێتەکان و شتی تری ئامادەی لەگەڵدایە. وانەکە سێ بەشی سەرەکی ناو دەبات (foundation، rendering، widgets). بەڵگەنامەی ئێستا پێنج ئاست وەسف دەکات، لە خوارەوە بۆ سەرەوە:

The framework itself is small on purpose. Extra features such as the camera, web views, HTTP requests or in-app payments come as packages from pub.dev, so an app only carries what it uses.

خودی فرەیموۆرکەکە بە ئەنقەست بچووکە. تایبەتمەندییە زیادەکانی وەک کامێرا، ⁦web view⁩، داواکارییەکانی (Request) HTTP یان پارەدان لە ناو ئەپ وەک پاکێج لە ⁦pub.dev⁩ـەوە دێن، بۆیە ئەپێک تەنها ئەوە هەڵدەگرێت کە بەکاری دەهێنێت.

As the lecture notes, Flutter is open source, so we can check its code and even change it for our needs. The framework is plain Dart code, licensed under BSD 3-Clause. In your editor you can jump from a widget you use, such as Center, straight to its source and read how the Flutter team wrote it.

وەک وانەکە دەڵێت، Flutter کۆدکراوەیە، بۆیە دەتوانین کۆدەکەی بپشکنین و تەنانەت بە پێی پێویستیمان بیگۆڕین. فرەیموۆرکەکە کۆدی سادەی Dartـە، بە مۆڵەتی بەکارهێنانی (Software license) ⁦BSD 3-Clause⁩. لە دەستکاریکەرەکەتدا دەتوانیت لەو ویجێتەی بەکاری دەهێنیت، وەک Center، ڕاستەوخۆ بڕۆیت بۆ کۆدی سەرچاوەکەی (Source code) و بخوێنیتەوە کە تیمی Flutter چۆن نووسیویەتی.

Inside the framework, one short piece of your code becomes three parallel trees. This is only an introduction; later lessons use these words. Here is a tiny widget:

لە ناو فرەیموۆرکەکەدا، پارچەیەکی کورتی کۆدەکەت دەبێتە سێ داری هاوتەریب. ئەمە تەنها ناساندنێکە؛ وانەکانی داهاتوو ئەم وشانە بەکار دەهێنن. ئەمە ویجێتێکی بچووکە:

This is how $\text{UI} = f(\text{state})$ stays fast. When the state changes, your build methods create new, cheap widgets. The framework compares them with the old ones through the long-lived elements, and changes only the render objects that really differ. Note also that the real tree is often deeper than your code: Text builds a RichText widget, and Container with a colour adds a ColoredBox.

ئەمە ئەو ڕێگایەیە کە $\text{UI} = f(\text{state})$ پێی خێرا دەمێنێتەوە. کاتێک دۆخ دەگۆڕێت، میتۆدەکانی (Method) buildـی تۆ ویجێتی نوێ و هەرزان دروست دەکەن. فرەیموۆرکەکە لە ڕێگەی Elementـە تەمەن درێژەکانەوە بەراوردیان دەکات لەگەڵ کۆنەکاندا و تەنها ئەو ئۆبجێکتەکانی وێناکردن دەگۆڕێت کە بە ڕاستی جیاوازن. هەروەها بزانە داری ڕاستەقینە زۆرجار لە کۆدەکەت قووڵترە: Text ویجێتێکی RichText دروست دەکات و Container بە ڕەنگەوە ColoredBoxـێک زیاد دەکات.

Now follow one tap through all the layers. A phone usually redraws its screen 60 to 120 times a second; each new picture is called a frame. Here is what happens when the user taps a + button that adds one to a counter:

ئێستا یەک پەنجەلێدان بە ناو هەموو چینەکاندا بەدوادا بچۆ. مۆبایل زۆرجار چرکەی ٦٠ تا ١٢٠ جار شاشەکەی دووبارە دەکێشێتەوە؛ بە هەر وێنەیەکی نوێ دەوترێت frame. ئەمە ئەوەیە کە ڕوو دەدات کاتێک بەکارهێنەرەکە پەنجە لە دوگمەیەکی + دەدات کە یەک بۆ ژمێرەرێک (Counter) زیاد دەکات: