Шумо аз маънои рендеринг чӣ фаҳмед?

Flutter-да рендеринг — бу виджетлар ағашын (widget tree) элементлар ағашына (element tree), андан соң рендер ағашына (render tree) айландыру процеси, ва охирги натижада экранда кўрсатилади.

Асосий қадамлар:

1. Widget ағаши: Фойдаланувчи интерфейсининг декларатив тасviri.
2. Элементлар ағаши: Widget ағашининг талқини, унда widget нусхаларига ва widget ҳолатига (масалан, StatefulWidget) ҳаволалар мавжуд. Элементлар ағаши widget ағаши ва render ағаши орасида кўприк вазифасини бажаради.
3. Render ағаши: RenderObject объектларини ўз ичига олади, улар ўзларини қандай чизмаслик (paint) ва ўлчам ва позицияни қандай аниқлаш (layout)ни билишади. Бу платформага боғлиқ бўлмаган абстракт дарахт.
4. Чизиш ва композиция: GPU-га боғлиқ бўлмаган чизиш буйруқлари Skia (Flutter график муҳарроти) га юборилади, у уларни GPU-га боғлиқ буйруқларга айлантиради.
5. Rasterизация: GPU буйруқларни экран пикселларига чизади.
6. Кўрсатиш: Пикселлар қурилма экранига кўрсатилади.

Рендер ва макет қуриш цикли ҳолат ўзгариши ёки Scheduler орқали рамка фаоллаштирилганда юз беради. Scheduler функцияларни бажаришни режалаштиради, жумладан build (элементлар дарахтини қуриш учун) ва layout / paint (render дарахти учун).

// Оддий виджет мисоли
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Ҳар бир виджет фойдаланувчи интерфейсининг бир қисмини тасвирлайди.
    // Flutter бу тасвирни элементларга ва render объектларига айлантиради.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}