Mobil ishlanmada Flutter: bu nima, asosiy tushunchalar va qanday ishlaydi

Flutter: Widget, StatelessWidget va StatefulWidget asoslari

Widget — UI qismining deklarativ tavsifi. Flutter-da hamma narsa Widget: tugmadan tortib ilovaning oʻzigacha. Widget konfiguratsiya (UI ning oʻzi emas). StatelessWidget — oʻzgarmas Widget. build() bir marta chaqiriladi. Holati yoʻq. Statik tarkib uchun ishlatiladi. StatefulWidget — oʻzgaruvchan Widget. Oʻzgarishi mumkin boʻlgan State obyektiga ega. setState() — qayta qurishni tetiklaydi. State — StatefulWidget-ga bogʻlangan oʻzgaruvchan obyekt. Oʻzgarishi mumkin boʻlgan maʼlumotlarni oʻz ichiga oladi.

StatelessWidget vs StatefulWidget

StatelessWidget — build() bir marta chaqiriladi. Sarlavhalar, ikonlar, statik matnlar uchun mos. StatefulWidget — build() har safar setState() chaqirilganda chaqiriladi. Formalar, oʻzgarishlar bilan roʻyxatlar, taymerlar uchun mos. InheritedWidget — konstruktorlar orqali aniq uzatmasdan maʼlumotni pastga uzatish. Theme, MediaQuery, Navigator — InheritedWidget-lar. BuildContext — daraxtdagi Widget joylashuvi. context.of<T>, context.watch<T>, context.select<T,R> — InheritedWidget-ga kirish.

// Misol Flutter Widget: setState bilan StatefulWidget
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — konfiguratsiya. StatelessWidget — oʻzgarmas. StatefulWidget — setState() bilan oʻzgaruvchan. IT Sectr StatelessWidget bilan boshlashni va faqat holat kerak boʻlganda StatefulWidget-ga oʻtishni tavsiya qiladi.

Daraxtlar (Widget Tree, Element Tree, RenderObject Tree)

Flutter samarali render uchun uch daraxt dan foydalanadi. Widget Tree — konfiguratsiya daraxti. Widget-lar tez-tez yaratiladi (har bir build), yengil. Element Tree — elementlar daraxti. Har bir Widget uchun bitta element (agar tur oʻzgarmasa). Element — Widget va RenderObject oʻrtasidagi koʻprik. RenderObject Tree — render daraxti. Oʻlchamlar, joylashuvlar, chizishni boshqaradi. RenderObject — ogʻir, kamdan-kam yaratiladi. Flutter Widget Tree-ni taqqoslaydi va Element Tree-ni yangilaydi, bu RenderObject Tree yangilanishini tetiklaydi.

Keys va Element Tree

Key — Element Tree-dagi Widget identifikatori. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key-lar Flutter-ga qayta qurish paytida eski va yangi Widget-larni moslashtirishga imkon beradi. Key-larsiz, Flutter Widget turi va joylashuvi boʻyicha moslashtiradi. GlobalKey — boshqa Widget-dan State-ga kirish. Qoʻllaniladi: murakkab formalar, animatsiyalar, testlarda State-ga kirish uchun. IT Sectr roʻyxatlar (List.generate) uchun Key-lardan foydalanishni va kerak boʻlmaganda GlobalKey-dan qochishni tavsiya qiladi.

Expanded — Row/Column/Flex-da mavjud boʻshliqni toʻldiruvchi Widget. Flexible — toʻldirishga majbur qilmaydi (kichikroq boʻlishi mumkin). MediaQuery — qurilma maʼlumotlari bilan InheritedWidget: ekran oʻlchami, yoʻnalish, platforma, matn masshtab omili. Theme/ThemeData — markazlashtirilgan mavzu. Theme.of(context) — kirish. MaterialApp — marshrutlash, mavzular, lokal konfiguratsiya uchun ildiz Widget. Scaffold — AppBar, Drawer, BottomNavigationBar bilan asosiy layout. AppBar — yuqori panel.

Navigatsiya (Navigator, Route)

Navigator — marshrutlar toʻplami (Routes). Navigator.push — ekranni ochish (Future qaytaradi). Navigator.pop — yopish (natija bilan). MaterialPageRoute — animatsiyali oʻtish (oʻngdan siljish). Named Routes — satr identifikatorlari. onGenerateRoute — markazlashtirilgan ishlov beruvchi. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — veb, chuqur havolalar va murakkab stsenariylar uchun deklarativ navigatsiya.

Navigator 2.0

Navigator 2.0 — deklarativ navigatsiya. Router — markaziy Widget. RouteInformationParser — URL tahlili. RouterDelegate — toʻplam boshqaruvi. GoRouter (paket) — Navigator 2.0 ustida soddalashtirilgan oʻrash. Qoʻllab-quvvatlaydi: nomlangan marshrutlar, parametrlar, qayta yoʻnaltirish, chuqur havolalar. IT Sectr koʻpchilik loyihalar uchun GoRouter-ni va faqat murakkab stsenariylar (veb, ish stoli) uchun Navigator 2.0-ni tavsiya qiladi.

Asinxron (FutureBuilder, StreamBuilder)

FutureBuilder — Future asosida UI quradigan Widget. connectionState: none, waiting, active, done. Qoʻllaniladi: HTTP soʻrovlari, maʼlumotlar bazasini oʻqish, taymerlar. StreamBuilder — Stream uchun Widget (cheksiz maʼlumot oqimi). snapshot.data, snapshot.hasError, snapshot.hasData. Qoʻllaniladi: WebSocket, Firebase, joylashuv yangilanishlari. Ikkala Widget ham yangi maʼlumot olganda qayta quriladi.

Holat boshqaruvi

Provider — oddiy DI + holat boshqaruvi. ChangeNotifierProvider, MultiProvider. Riverpod — Provider-ning zamonaviy oʻrnini bosuvchi: kompilyatsiya xavfsiz, BuildContext-dan mustaqil. Bloc — Event-Driven arxitekturasi: Cubit (oddiy hodisalar) vs Bloc (murakkab). GetX — yengil holat boshqaruvi + DI + marshrutlash. setState — eng sodda, mahalliy holat uchun. IT Sectr yangi loyihalar uchun Riverpod-ni va mavjud loyihalar uchun Provider-ni tavsiya qiladi.

Mavzular va moslashish (MediaQuery, ThemeData)

MediaQuery — ekran oʻlchami, yoʻnalish, platforma, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — ilova mavzusi: ranglar, shriftlar, shakllar. Theme.of(context).textTheme.bodyLarge. Hot Reload — ishlayotgan ilovaga kod kiritish. Holatni saqlaydi. Qoʻllab-quvvatlamaydi: main() oʻzgartirish, global oʻzgaruvchilar, statik maydonlar. Hot Restart — toʻliq ilovani qayta ishga tushirish (holat yoʻqolishi). Hot Reload — Flutter-ning dasturchilar uchun asosiy afzalligi.

StatelessWidget — statik tarkib uchun. StatefulWidget — dinamik tarkib uchun. InheritedWidget — DI uchun. IT Sectr sukut boʻyicha StatelessWidget-ni va faqat kerak boʻlganda StatefulWidget-ni tavsiya qiladi.

Moslashuvchan layout

LayoutBuilder — ota oʻlchamlariga moslashish. OrientationBuilder — yoʻnalishga moslashish. Expanded vs Flexible — Row/Column-da boʻshliq taqsimoti. MediaQuery — planshetlar va ish stollari uchun uzilish nuqtalari. SafeArea — tizim elementlaridan (notch, holat paneli) chegaralar. AspectRatio — nisbatlarni saqlash. IT Sectr moslashuvchan layoutlar uchun LayoutBuilder-ni va landshaft yoʻnalishi uchun OrientationBuilder-ni tavsiya qiladi.

Testlash (Widget, Integration, Unit)

Unit testlar — biznes mantiq, repozitoriyalar, modellarni testlash. dart test — ishga tushirish. Widget testlari — vidjetlarni alohida testlash. WidgetTester — pumpWidget, tap, enterText. Integratsiya testlari — haqiqiy qurilma/emulyatorda toʻliq stsenariylar. Mockito — bogʻliqliklarni mock qilish. Golden testlar — ekran tasvirlarini solishtirish (golden fayllar). IT Sectr har bir ekran uchun Widget testini va biznes mantiq uchun Unit testini tavsiya qiladi.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animatsiyalar (Yashirin, Aniq, Hero)

Yashirin animatsiyalar — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Xususiyat oʻzgarishlari avtomatik animatsiyalanadi. Aniq animatsiyalar — Tween bilan AnimationController. forward() / reverse(). Hero animatsiyasi — teg bilan Hero Widget — ekranlar oʻrtasida oʻtish animatsiyasi. Bosqichma-bosqich animatsiya — Interval bilan animatsiya zanjiri. Lottie — After Effects animatsiyalarini integratsiyalash. Rive — interaktiv animatsiyalar (state machine). IT Sectr 80% hollarda AnimatedContainer-ni va murakkab stsenariylar uchun AnimationController-ni tavsiya qiladi.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Tarmoq (http, dio, graphql)

http — oddiy HTTP klienti (get, post, put, delete). dio — interceptorlar, taymoutlar, qayta urinishlar, loglash bilan rivojlangan klient. graphql_flutter — Flutter uchun GraphQL klienti. json_serializable — annotatsiyalar orqali fromJson/toJson yaratish. Retrofit Dart — Retrofitga oʻxshash type-safe HTTP klienti. WebSocket — web_socket_channel orqali. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr REST API uchun dio-ni va GraphQL uchun graphql_flutter-ni tavsiya qiladi.

Flutter DevTools — asboblar toʻplami: Inspector (vidjet daraxti), Timeline (ishlash), Memory, Network, Logging. Profile mode — disk raskladka qilmasdan profillash. Performance overlay — FPS, qurish vaqtlari. Flame chart — olov diagrammasi. DevTools — ishlab chiqarishda Flutter ilovalarini optimallashtirish uchun muhim vosita.

Flutter Web — Flutter-ni WASM (WebAssembly) ga kompilyatsiya qilish. CanvasKit (Skia) vs HTML renderer. CanvasKit — piksel mukammal, lekin ogʻirroq. HTML renderer — yengil, lekin cheklovlar bilan. WASM (Flutter 3.22+) — native ishlash. LayoutBuilder va MediaQuery orqali moslashuvchan moslashish. IT Sectr ish stoli veb ilovalari uchun CanvasKit-ni va kontent saytlari uchun HTML renderer-ni tavsiya qiladi.