Widget — nima, turlari va Flutter-da kompozitsiya

Flutter-da Widget nima

Widget Flutter-da foydalanuvchi interfeysi qismining o“ zgarmas (immutable) tavsifidir. Har bir Widget konfiguratsiya xususiyatlarini o“ z ichiga oladi: o“ lcham, rang, joylashuv, matn, hodisa boshqaruvchilari va bolali Widgetlar. Widgetlarning o“ zi bevosita render qilinmaydi — ular Flutter Engine RenderObject — ekranda haqiqiy grafik obyekt yaratadigan retseptlardir (blueprints).

Flutter falsafasi aytadi: “Everything is a Widget”. Bu shuni anglatadiki, nafaqat ko“ rinadigan elementlar (Text, Image, Button), balki tarkibiy bloklar (Padding, Center, Column, Stack), xatti-harakat bloklari (GestureDetector, AnimatedBuilder) va hatto ilovaning o“ zi (MaterialApp, CupertinoApp) ham Widget hisoblanadi. Bunday yondashuv bir xillikni ta“ minlaydi: ekranning istalgan elementini oddiy joylashtirish orqali boshqa har qanday element bilan birlashtirish mumkin.

Google I/O 2024 — Flutter Widgets Deep Dive ma“ lumotlariga ko“ ra, Flutter-dagi o“ rtacha ilova bir vaqtning o“ zida 200 dan 1500 gacha Widgetni o“ z ichiga oladi. Bu raqamga qaramay, Flutter C++ Skia/Impeller engine darajasidagi optimallashtirishlar tufayli hatto arzon qurilmalarda ham 60 FPS ni saqlaydi. Widgetlar engil obyektlardir (har biri 40–80 bayt), shuning uchun ularni yaratish ishlash tor bo“ yni emas.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Salom, Flutter!'),
        ),
      ),
    );
  }
}

Flutter ning uch daraxti: Widget, Element va RenderObject

Widget qanday ishlashini tushunish uchun uchta o“ zaro bog“ liq daraxtdan iborat Flutter arxitekturasini bilish kerak. Birinchisi — Widget tree — UI konfiguratsiyasini tavsiflaydi. Bu engil daraxt bo“ lib, har bir kadrda to“ liq qayta qurilishi mumkin (garbage collector eski Widgetlarni olib tashlaydi va yangilarini yaratadi). Widgetlar o“ zgarmasdir (immutable): agar matn rangi o“ zgargan bo“ lsa — yangi rang bilan yangi Text Widget yaratiladi, eskisi tashlanadi.

Ikkinchi daraxt — Element tree — Widget va RenderObject o“ rtasidagi bog“ lovchi halqadir. Element Widget (konfiguratsiya) va RenderObject (render) ga havolani o“ z ichiga oladi. Widget o“ zgarganda, Flutter yangi Widgetni eski Element bilan solishtiradi va qaror qiladi: mavjud RenderObjectni yangilash (agar Widget bir xil turda bo“ lsa) yoki yangisini yaratish (agar Widget turi o“ zgargan bo“ lsa). Bu jarayon Reconciliation deb ataladi va React Virtual DOM ning analogidir.

Uchinchi daraxt — RenderObject tree — ekranda haqiqiy render uchun javobgardir. RenderObject aniq o“ lchamlar, joylashuvlar va paint metodlarini o“ z ichiga oladi. Flutter Engine (C++ Skia yoki Impeller) RenderObject tree bo“ ylab harakatlanadi va har bir tugunni render qiladi. RenderObject tree eng og“ ir daraxtdir, shuning uchun Flutter bir xil turdagi Widget o“ zgartirilganda RenderObjectni qayta ishlatib, uning o“ zgarishlarini minimallashtiradi.

StatelessWidget vs StatefulWidget

Flutter Widgetlarni ikkita asosiy turga ajratadi: StatelessWidget va StatefulWidget. StatelessWidget — o“ zgaruvchan holatga ega bo“ lmagan vidjet. StatelessWidget ning ko“ rinishi uning konstruktori tomonidan to“ liq aniqlanadi va renderdan keyin o“ zgarmaydi. Misollar: Text, Icon, Divider, Padding. StatelessWidget ning barcha xususiyatlari konstruktorda final deb e“ lon qilinadi va faqat o“ qish uchun mavjud.

StatefulWidget — o“ zgaruvchan holatga ega vidjet. U ikki sinfdan iborat: Widgetning o“ zi (StatelessWidget kabi o“ zgarmas konfiguratsiya) va State (o“ zgaruvchan holat). Widgetni State dan ajratish Flutterning asosiy arxitektura qaroridir. Widget har bir buildda qayta yaratiladi, ammo State obyekti vidjetning daraxtdagi butun hayot aylanishi davomida yashaydi, holatini saqlaydi.

setState() chaqirilganda, Flutter State-ni “iflos” deb belgilaydi va keyingi kadrda pastki daraxtni qayta qurish uchun build() metodini chaqiradi. Muhim: setState() Widgetning o“ zini qayta yaratmaydi — u faqat mavjud State-da build() chaqiruvini tetiklaydi. Bu shuni anglatadiki, StatefulWidget bolali elementlarning kalitlari (Key) barqaror bo“ lib qolsa, bolali Widgetlarning holatini yo“ qotmasdan UI ni yangilashi mumkin.

// StatelessWidget — tashqi ko“ rinish hech qachon o“ zgarmaydi
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Salom, $name');
  }
}

// StatefulWidget — o“ zgaruvchan holatga ega hisoblagich
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Hisoblagich: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Oshirish'),
        ),
      ],
    );
  }
}

Widget turlari: layout, painting, interactive

Flutter-dagi barcha Widgetlarni funktsional maqsadiga ko“ ra uchta asosiy toifaga bo“ lish mumkin. Layout Widget — bolali elementlarning ekranda joylashishi uchun javobgar. Row va Column bolalarni chiziq bo“ ylab joylashtiradi, Stack birini ikkinchisining ustiga qo“ yadi, Expanded va Flexible mavjud joyni taqsimlaydi. Layout Widgetlarning o“ z vizual tasviri yo“ q — ular bolali vidjetlarning joylashuvi va o“ lchamini boshqaradi.

Painting Widget — vizual dizayn uchun javobgar. Container bezaklarni (rang, gradient, soya, chegara) layout xususiyatlari bilan birlashtiradi. Padding bo“ shliqlar qo“ shadi, DecoratedBox fon chizadi, Transform o“ zgartirishlarni qo“ llaydi (aylantirish, masshtablash). Painting Widget vizual uslubning qurilish bloklari bo“ lib, kerakli ko“ rinishga erishish uchun ko“ pincha layout Widget bilan birgalikda ishlatiladi.

Interactive Widget — foydalanuvchi kiritishini qayta ishlaydi. GestureDetector imo-ishoralarni aniqlaydi (tap, swipe, pinch), InkWell Material ripple effektini qo“ shadi, TextField matn kiritishni qabul qiladi, Slider va Switch standart boshqaruv elementlarini taqdim etadi. Interactive Widget hodisalarni konstruktorga uzatiladigan yoki holat provayderlari orqali boshqariladigan callback funktsiyalari orqali ko“ taradi.

Flutter Widget of the Week (Google, 2025) ma“ lumotlariga ko“ ra, Flutter jamoasi deyarli har qanday interfeysni qurish uchun layout + painting + interactive Widget kombinatsiyasidan faol foydalanadi. Masalan, tugma: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Bunday modullilik standart bloklarni kodni takrorlamasdan turli kontekstlarda qayta ishlatish imkonini beradi.

Widget kompozitsiyasi va BuildContext

Widget kompozitsiyasi — UI ni ba“ zi Widgetlarni boshqalarga joylashtirish orqali qurish jarayoni. Klassik meros olishdan (extends) farqli o“ laroq, bu erda bola sinf ota-onaning xatti-harakatini meros qilib oladi, Flutter agregatsiyadan foydalanadi: har bir Widget boshqa Widgetlarni child (bitta uchun) yoki children (ko“ pchilik uchun) parametri orqali o“ z ichiga oladi. Bu yondashuv ko“ proq moslashuvchanlik va qayta foydalanish imkoniyatini beradi.

BuildContext — Widgetdan keyin ikkinchi eng muhim tushuncha. BuildContext — Widgetning elementlar daraxtidagi joylashuvining deskriptori. BuildContext orqali Widget ajdod vidjetlariga (Theme.of(context), MediaQuery.of(context), Navigator.of(context)) murojaat qilishi mumkin. BuildContext build() metodiga uzatiladi va ota-ona va bola elementlari bilan o“ zaro aloqa qilish uchun ishlatiladi. Har bir Widgetning daraxtdagi joylashuvini noyob tarzda aniqlaydigan bitta BuildContexti bor.

Flutter Architectural Overview (Google, 2025) ga ko“ ra, BuildContext InheritedWidget uchun asosdir — konstruktorlar orqali aniq uzatmasdan ma“ lumotlarni daraxt bo“ ylab pastga uzatish imkonini beruvchi mexanizm. Theme, MediaQuery, Navigator va Provider InheritedWidgetdan foydalanadi. Har bir chuqur joylashtirilgan Widget BuildContext.dependOnInheritedWidgetOfExactType orqali ajdod ma“ lumotlariga kirishi mumkin, bu BuildContextni Flutterning reaktiv arxitekturasining kalitiga aylantiradi.

// Widget kompozitsiyasi joylashtirish orqali
Scaffold(
  appBar: AppBar(title: const Text('Mening Ilovam')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Flutter-ga xush kelibsiz',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Boshlash'),
        ),
      ],
    ),
  ),
)

// BuildContext orqali mavzularga kirish
Text(
  'Uslublangan Matn',
  style: Theme.of(context).textTheme.headlineMedium,
)

Widget bilan odatiy xatolar

Birinchi va eng keng tarqalgan xato — StatelessWidget yetarli bo“ lgan joyda StatefulWidget ishlatish. Ko“ pgina boshlang“ ich Flutter dasturchilari barcha vidjetlar uchun StatefulWidget yaratadi, hatto holat tashqi provayderda (Provider, Riverpod, BLoC) saqlangan bo“ lsa ham. Bu ortiqcha va ishlashni yomonlashtiradi. Qoida: agar holat tashqaridan boshqarilsa yoki vidjetning o“ z o“ zgaruvchan holati bo“ lmasa, StatelessWidget dan foydalaning.

Ikkinchi xato — build metodi ichida const-konstruktorsiz Widget yaratish. Constsiz yaratilgan har bir Widget har bir buildda qayta ajratiladi. build() ichida Widgetlarni const-konstruktor bilan yaratish orqali Flutter bir xil namunani qayta ishlatishi mumkin, garbage collector yukini kamaytiradi. Iloji boricha hamma joyda const qo“ shing — ayniqsa Text, Icon, SizedBox, Padding va boshqa stateless Widgetlar uchun.

Uchinchi xato — kalitlar (Key) bilan noto“ g“ ri ishlash. Flutter daraxtni qayta qurishda Widgetni aniqlash uchun Key dan foydalanadi. Agar Widget ro“ yxati Keysiz qayta qurilsa, Flutter elementlarning tartibini aralashtirib yuborishi mumkin, bu noto“ g“ ri animatsiyaga yoki holat yo“ qolishiga olib keladi. Ayniqsa dinamik ma“ lumotlar bilan ListView.builder ishlatganda, ro“ yxatlardagi elementlar uchun har doim Key (masalan, ValueKey yoki ObjectKey) qo“ shing.