Flutter

Flutter — bitta codebase orqali Android, iOS, web, desktop va boshqa platformalar uchun foydalanuvchi interfeysli application yaratishga mo‘ljallangan ochiq kodli UI toolkit. Flutter applicationlari asosan Dart tilida yoziladi. Framework o‘z widget tizimi, rendering qatlami va development vositalarini taqdim etadi.

Flutter platformaning native UI componentlarini har doim to‘g‘ridan-to‘g‘ri ishlatmaydi; ko‘p interfeysni o‘z rendering engine’i orqali chizadi.

Dart

Flutter uchun asosiy dasturlash tili Dart.

Dart:

• static typing;
• async/await;
• class;
• mixin;
• extension;
• null safety;
• isolate

imkoniyatlarini beradi.

Developmentda JIT, release buildda AOT compilation ishlatilishi mumkin.

Widget

Flutter interfeysining asosiy birligi widget.

Text, padding, layout, theme va butun screen ham widget sifatida ifodalanadi.

Widget immutable configuration.

Framework undan element va render objectlar hierarchy’sini boshqarish uchun foydalanadi.

StatelessWidget

Ichki mutable state talab qilmaydigan component.

Input constructor orqali keladi.

build method joriy propertylar asosida widget tree qaytaradi.

Parent yangi property bersa component qayta build qilinadi.

StatefulWidget

O‘zgaradigan local state kerak bo‘lsa StatefulWidget ishlatiladi.

Widgetning o‘zi immutable, mutable qiymatlar alohida State objectida saqlanadi.

setState state o‘zgarganini frameworkga bildiradi.

Uzun business state alohida architecture qatlamida boshqariladi.

Build method

build tez, deterministic va side-effectlarsiz bo‘lishi kerak.

U network request boshlamasligi yoki databasega yozmasligi kerak.

Framework uni ko‘p marta chaqirishi mumkin.

Og‘ir hisob cache yoki background isolate’ga ko‘chiriladi.

Widget tree

UI nested widgetlardan tashkil topadi:

MaterialApp
→ Scaffold
→ Column
→ Text
→ Button

Composition inheritance’dan ko‘ra keng ishlatiladi.

Juda chuqur tree avtomatik yomon emas, ammo component nomlash va ajratish readability uchun muhim.

Element tree

Element widget instance bilan render object orasidagi persistent bog‘lanishni saqlaydi.

Widget yangilanganda framework type va key bo‘yicha mavjud elementni qayta ishlatishi mumkin.

State qaysi componentga tegishli ekanini element identity belgilaydi.

Key

List reorder yoki bir xil turdagi siblinglarda identity’ni saqlash uchun key ishlatiladi.

Turlari:

• ValueKey;
• ObjectKey;
• UniqueKey;
• GlobalKey.

GlobalKey kuchli, ammo qimmat va ortiqcha ishlatilmasligi kerak.

Layout

Flutter constraint-based layout ishlatadi:

Constraints go down
Sizes go up
Parents set positions

Parent childga minimum va maximum o‘lcham beradi.

Child shu oraliqda o‘lcham tanlaydi.

Unbounded constraint ko‘p layout xatolarining sababidir.

Row va Column

Row elementlarni gorizontal, Column vertikal joylashtiradi.

MainAxis va CrossAxis alignment boshqariladi.

Bo‘sh joy uchun Expanded, Flexible va Spacer ishlatiladi.

Scroll container ichida Expanded noto‘g‘ri constraint olishi mumkin.

Rendering

Widget tree configuration, render object esa layout, paint va hit testingni bajaradi.

Flutter engine grafik API orqali frame chizadi.

Platformaga qarab rendering backend farq qilishi mumkin.

60 yoki undan yuqori frame rate uchun frame budget saqlanadi.

Hot reload

Developmentda source o‘zgarishi running applicationga tez qo‘llanadi.

Ko‘p state saqlanadi.

Class structure yoki native qismdagi ayrim o‘zgarish hot restart talab qiladi.

Hot reload release behaviorni to‘liq almashtirmaydi.

Package

Dart va Flutter package’lari pubspec.yaml orqali boshqariladi.

Dependency version constraint bilan belgilanadi.

pubspec.lock applicationda resolved versionlarni saqlaydi.

Package native plugin bo‘lishi mumkin.

Plugin

Platforma-specific API uchun plugin ishlatiladi:

• camera;
• location;
• notification;
• storage;
• biometric.

Dart API platform channel orqali Android yoki iOS implementationiga ulanadi.

Har platformada permission va lifecycle farqi boshqariladi.

Platform channel

Dart va native kod message almashadi.

Method channel request-response, event channel stream uchun ishlatilishi mumkin.

Katta binary data serialization overhead yaratadi.

Platform threadini uzoq operation bilan bloklash mumkin emas.

Navigation

Navigator route stackni boshqaradi.

Imperative va declarative routing usullari mavjud.

Deep link, browser history va nested navigation uchun router package ishlatilishi mumkin.

Route’dan katta object emas, stable ID uzatish qulay.

State management

Variantlar:

• setState;
• InheritedWidget;
• Provider;
• Riverpod;
• BLoC;
• Reduxga oid yondashuvlar.

Framework bitta majburiy architecture bermaydi.

Tanlov loyiha hajmi va team tajribasiga mos bo‘ladi.

Async va isolate

Dart event loop asynchronous I/O uchun ishlaydi.

CPUga og‘ir ish UI isolate’ni bloklaydi.

Alohida isolate memory’ni shared qilmaydi, message bilan aloqa qiladi.

Image parsing va katta JSON background isolate’da bajarilishi mumkin.

Test

Flutter:

• unit test;
• widget test;
• integration test

imkoniyatlarini beradi.

Widget test real qurilmasiz UI behaviorini tekshiradi.

Golden test rendered outputni reference image bilan solishtirishi mumkin.

Platform integration real device’da tekshiriladi.

Release

Android uchun APK yoki AAB, iOS uchun signed archive yaratiladi.

Har platforma signing, permission va store talabiga ega.

Bitta codebase deployment jarayonlarini butunlay bir xil qilmaydi.

Native configuration baribir zarur.

InheritedWidget

Widget tree bo‘ylab theme yoki shared dependency uzatish uchun InheritedWidget asosiy mexanizmlardan biridir. BuildContext eng yaqin provider’ni topadi va dependency o‘zgarsa kuzatuvchi widget qayta build bo‘ladi. Provider kabi kutubxonalar shu g‘oyani qulaylashtiradi.

Rendering performance

Har frame layout, paint va raster bosqichlaridan o‘tadi. Og‘ir shader, katta image yoki main isolate’dagi JSON parsing jank yaratadi. DevTools timeline frame budgetdan oshgan bosqichni ko‘rsatadi.

Platform view

Native map yoki web view Flutter hierarchy ichiga joylashtirilishi mumkin. Platform view compositing, gesture va accessibility bo‘yicha qo‘shimcha xarajatga ega.

Bog‘liq tushunchalar

Flutter, Dart, Widget, StatelessWidget, StatefulWidget, Widget tree, Hot reload, Platform channel, State management, Cross-platform development, Rendering engine