Flutter Widgets — bu nima, vidjet daraxti va build

Flutter Widgets nima?

Flutter Widgets — Flutter freymvorkidagi barcha UI elementlari, o'zgarmas (immutable) Dart sinflari sifatida amalga oshirilgan. Vidjet UI elementining konfiguratsiyasidir: uning o'lchami, rangi, joylashuvi, hodisa boshqaruvchilari. Android (XML + View) yoki iOS (Storyboard + UIView) dan farqli o'laroq, Flutter native komponentlardan foydalanmaydi — hamma narsa Skia (Android/iOS/Linux) yoki Impeller (iOS/macOS) dvigateli tomonidan Canvas da chiziladi. Bu barcha platformalarda platforma farqlarisiz bir xil ko'rinishni ta'minlaydi. Flutter ikki vidjet to'plami bilan keladi: Material Widgets (Android/Web uchun Google Material Design 3 dizayni) va Cupertino Widgets (iOS/macOS uchun Apple HIG dizayni). Dasturchi ikkala to'plamni bitta ilovada birlashtirishi mumkin. Har bir vidjet bolalik vidjet yoki ularning kompozitsiyasini qaytaruvchi build() metodiga ega — vidjet daraxti shunday quriladi.

Flutterning uch daraxti

Flutter uch daraxt bilan ishlaydi: Widget Tree (dasturchi tomonidan yaratilgan konfiguratsiya), Element Tree (vidjetning daraxtdagi o'rniga moslashtirish, freymvork tomonidan boshqariladi), Render Tree (layoutni hisoblaydigan va paintni bajaradigan obyektlar). Widget Element yaratadi, Element RenderObject yaratadi. Element konfiguratsiya o'zgarganda (rebuild) qayta ishlatiladi — bu Flutter optimallashtirish mexanizmi: agar vidjet turi va key mos kelsa, Element qayta yaratilmaydi, faqat yangi konfiguratsiya yangilanadi. Uch daraxtni tushunish Flutter ilovalari samaradorligini optimallashtirish kalitidir.

StatelessWidget: o'zgarmas vidjetlar

StatelessWidget — ichki holatni saqlamaydigan vidjet. Parametrlarni konstruktor orqali qabul qiladi va ularni qurilganidan keyin o'zgartirish imkoniyatisiz ko'rsatadi. StatelessWidget statik elementlar uchun idealdir: sarlavhalar, belgilar, avatarlar, o'zgarmas ma'lumotli ro'yxatlar. build() metodi yaratilganda va ota vidjet o'zgarganda bir marta chaqiriladi. StatelessWidget holatga ega bo'lmagani uchun alohida State obyektini talab qilmaydi — build() to'g'ridan-to'g'ri vidjet sinfida belgilanadi.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — name va avatarUrl ni konstruktor orqali qabul qiluvchi StatelessWidget. CircleAvatar avatarni, Text esa ismni ko'rsatadi. Vidjet bu qiymatlarni yaratilganidan keyin o'zgartira olmaydi. const konstruktoridan (const ProfileHeader) foydalanish Flutterga ota vidjet rebuildida vidjet nusxasini qayta ishlatishga imkon beradi — bu barcha StatelessWidgetlar uchun tavsiya etilgan mikrooptimallashtirishdir.

StatefulWidget: holatli vidjetlar

StatefulWidget — alohida State obyektida saqlanadigan o'zgaruvchan holatga ega vidjet. StatefulWidgetning o'zi StatelessWidget kabi o'zgarmasdir (immutable). O'zgaruvchan qism State-da jamlangan: State — bir marta yaratilgan va vidjetning ko'p sonli rebuildlaridan omon qoladigan obyekt. Holat o'zgarganda (setState()), Flutter State ning build() metodini chaqiradi va UI ni yangilaydi. StatefulWidget interaktiv elementlar uchun ishlatiladi: hisoblagichlar, matn maydonlari, katakchalar, animatsiyalar, taymerlar.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — _LikeButtonState State sinfi bilan StatefulWidget. liked va count maydonlari State da saqlanadigan va rebuildda tiklanmaydigan holatdir. setState() Flutterga UI ni qayta qurish zarurligi haqida xabar beradi. Flutter State ni har bir ota rebuildida qayta yaratmaydi — faqat konfiguratsiya o'zgarganda (key yoki vidjet turi). IT Sectr da biz ko'rsatish uchun StatelessWidget va interaktiv komponentlar uchun StatefulWidget dan foydalanamiz, StatefulWidgetni mutatsiya chegaralarigacha minimallashtirish prinsipiga amal qilamiz.

Vidjet daraxti: Widgetdan RenderObjectgacha

Widget Tree — ilova UI sini tavsiflovchi vidjetlarning iyerarxik tuzilishi. Flutter Widget Tree ni Element Tree ga aylantiradi: har bir Widget daraxtdagi o'rni va RenderObject bilan bog'lanishni kuzatuvchi Element yaratadi. Render Tree layout (o'lcham va joylashuvni aniqlash) va paint (chizish) ni bajaradi. Element asosiy optimallashtirish qatlamidir: agar vidjet turi va key rebuildda o'zgarmagan bo'lsa, Element qayta ishlatiladi, konfiguratsiyani RenderObject ni qayta yaratmasdan yangilaydi. Bu Flutterga yuqori kadr chastotasida (60/120 FPS) samaradorlikni ta'minlaydi.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Salom, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen vidjet daraxti: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — Material Design ning asosiy layout vidjeti. Center bola Column ni markazlashtiradi. Column bolalarni vertikal ravishda markazga tekislaydi (mainAxisAlignment.center). Flutter layoutni yuqoridan pastga (constraints otadan uzatiladi), o'lchamlarni esa pastdan yuqoriga (sizedByParent yoki sizing from children) hisoblaydi.

BuildContext: yig'ilish konteksti va daraxtga kirish

BuildContext — vidjetning Element Tree dagi o'rnining deskriptori. Har bir build() metodi BuildContext qabul qiladi, u orqali vidjet quyidagilarga kirish olishi mumkin:MediaQuery (ekran o'lchami, orientatsiyasi, piksel zichligi, xavfsiz hudud), Theme (MaterialThemeData yoki CupertinoThemeData), Navigator (navigatsiya steki), ScaffoldMessenger (SnackBar), InheritedWidget (ma'lumotlarni daraxt bo'ylab uzatish). BuildContext build() tugagandan keyin saqlanmasligi yoki sinxron kontekstdan tashqarida ishlatilmasligi kerak — bu «Scaffold.of() called with a context that does not contain a Scaffold» xatolariga olib keladi. Context ni saqlash o'rniga ma'lumotlarga kirish uchun Builder vidjetidan yoki InheritedWidget namunasidan foydalaning.

Key: vidjetni daraxtda identifikatsiyalash

Key — har bir vidjet konstruktorining ixtiyoriy parametri (super.key). Key Flutterga ro'yxatdagi elementlarning tartibi/soni o'zgarganda vidjetni aniqlashga yordam beradi. Keysiz Flutter vidjetlarni turi va o'rni bo'yicha taqqoslaydi; ro'yxatning o'rtasiga elementsiz element qo'shganda Flutter noto'g'ri vidjet uchun Elementni qayta ishlatadi, holat (StatefulWidget) va animatsiya xatolariga sabab bo'ladi. Ro'yxatlar uchun ValueKey (noyob identifikator), ObjectKey (ma'lumot obyekti asosida), UniqueKey