StatefulWidget: bu nima, hayotiy tsikli va ishlash prinsipi

StatefulWidget nima?

StatefulWidget — Flutter sinfi bo‘lib, foydalanuvchi harakatlariga, tizim hodisalariga yoki asinxron operatsiyalarga javoban o‘z holatini o‘zgartirishi mumkin. StatelessWidget'dan farqli o‘laroq, StatefulWidget to‘g‘ridan-to‘g‘ri ko‘rsatilmaydi — u chizish uchun mas‘ul bo‘lgan State obyektini yaratadi. Ikki sinfga (Widget va State) bo‘linish Flutter'ga vidjetning o‘zini qayta yaratmasdan UI-ni qayta qurish imkonini beradi, bu tez-tez yangilanishlarda sezilarli unumdorlik afzalligini beradi.

StatefulWidget arxitekturasi «o‘zgaruvchan va o‘zgarmasni ajratish» namunasiga amal qiladi: vidjetning o‘zi o‘zgarmas qoladi (StatelessWidget kabi), barcha o‘zgaruvchan holat esa alohida State obyektida saqlanadi. Bu Flutter'ga vidjetlarni turi va Key bo‘yicha taqqoslab qayta ishlatishga va shu bilan birga qayta qurishlar o‘rtasida joriy holatni saqlashga imkon beradi.

Google'ga ko‘ra (Flutter Architectural Overview, 2026), StatefulWidget holat vidjet hayoti davomida bir martadan ko‘proq o‘zgaradigan stsenariylar uchun optimaldir: matn maydonlari, animatsiyalar, taymerlar, ma‘lumot oqimlari, asinxron yuklashlar. Bir martalik ishga tushirish uchun StatelessWidget yetarli.

StatefulWidget qachon zarur

StatefulWidget vidjet tashqi hodisalarga reaksiya berishi kerak bo‘lganda majburiydir: tugma bosish, HTTP so‘rovining tugashi, ma‘lumotlar bazasidan yangilanish, WebSocket-ga obuna bo‘lish. Shuningdek, animatsiyali vidjetlar, kontrollerli matn maydonlari va fokusni boshqaruvchi komponentlar uchun ham zarur. Agar vidjet faqat ma‘lumotlarni ko‘rsatsa va hodisalar yaratmasa — StatelessWidget'dan foydalaning.

Ichki tuzilma

StatefulWidget ikki sinfdan iborat: StatefulWidget (yengil, o‘zgarmas) va State (og‘ir, o‘zgaruvchan). Framework daraxtga joylashtirilganda bir marta chaqiriladigan createState() metodi orqali State yaratadi. State widget xususiyati orqali vidjetga havola oladi va hayotiy tsiklning istalgan momentida uning maydonlariga murojaat qilishi mumkin.

StatefulWidget'ning hayotiy tsikli

Hayotiy tsikl StatefulWidget oltita asosiy bosqichdan iborat bo‘lib, har biri muayyan vazifalarni bajarish uchun qayta yoziladigan metodni taqdim etadi. Ushbu bosqichlarni tushunish resurslar bilan to‘g‘ri ishlash va xotira oqishlarining oldini olish uchun muhimdir.

createState

createState — hayotiy tsiklning birinchi metodi, StatefulWidget daraxtga joylashtirilganda chaqiriladi. Ushbu vidjet bilan bog‘liq yangi State namunasini qaytarishi kerak. Bu metod elementning butun hayoti davomida bir marta chaqiriladi. Bu erda og‘ir operatsiyalarni bajarish muhim emas — createState imkon qadar yengil bo‘lishi kerak.

initState

initState — State yaratilgandan so‘ng darhol, birinchi UI qurilishidan oldin chaqiriladi. Bu erda bajariladi: kontrollerlarni ishga tushirish (TextEditingController, AnimationController), ma‘lumot oqimlariga obuna bo‘lish (StreamSubscription), taymerlarni sozlash va maydonlarni boshlang‘ich ishga tushirish. Flutter hujjatlariga ko‘ra (Flutter.dev, 2026), initState'da BuildContext.of() chaqirish mumkin emas — daraxt hali to‘liq o‘rnatilmagan.

didChangeDependencies

didChangeDependencies — initState'dan so‘ng va InheritedWidget bog‘liqliklari har o‘zgarganda chaqiriladi. Bu MediaQuery.of(context) chaqirish yoki Theme-ga obuna bo‘lish uchun mos joy — dastur ishlayotganda o‘zgarishi mumkin bo‘lgan qiymatlar. Agar vidjet InheritedWidget'dan foydalansa, ishga tushirish mantig‘i initState'da emas, bu erda bo‘lishi kerak.

build va didUpdateWidget

build — vidjetlar daraxtini qaytaradigan asosiy metod. initState'dan so‘ng, didChangeDependencies'dan so‘ng va har bir setState'dan so‘ng chaqiriladi. didUpdateWidget ota-ona qayta qurilganda va StatefulWidget'ga yangi parametrlar uzatilganda chaqiriladi. Bu erda vidjetning eski va yangi maydonlarini taqqoslab, kerak bo‘lsa holatni yangilashingiz mumkin.

dispose

dispose — hayotiy tsiklning yakuniy bosqichi. Bu erda barcha resurslar bo‘shatiladi: oqimlardan chiqiladi, kontrollerlar o‘chiriladi, taymerlar bekor qilinadi. dispose'ni chaqirmaslik xotira oqishiga olib keladi. dispose'dan so‘ng State o‘lik hisoblanadi — uning ichida setState chaqirish istisno yaratadi.

StatefulWidget qanday ishlaydi?

StatefulWidget ishlash mexanizmi uchta mavjudotning muvofiqlashtirilgan ishiga asoslanadi: Widget (yengil tavsif), Element (oraliq qatlam) va State (ma‘lumot ombori). Flutter tavsifda StatefulWidget'ni uchratganda, createState chaqiradigan va State obyektiga havola saqlaydigan StatefulElement yaratadi. Ota-ona qayta qurilganda, Flutter yangi vidjetni joriy Element bilan taqqoslaydi — agar tur va Key mos kelsa, Element yangilanadi, State esa bir xil qoladi.

Holat faqat setState chaqiruvi orqali o‘zgaradi, bu framework-ga qayta qurish zarurligi haqida xabar beradi. Tushunish muhim: setState holatni avtomatik o‘zgartirmaydi — u faqat vidjetni «iflos» deb belgilaydi. Dasturchi setState'ga uzatilgan callback'da State maydonlarini o‘zi yangilaydi. Callback tugagandan so‘ng, Flutter build chaqiradi va UI-ni yangilaydi.

Dart/Flutter jamoasiga ko‘ra (Dart Language Specification, 2026), bu ajratish build chaqirilishidan oldin barcha holat o‘zgarishlari sinxron ravishda sodir bo‘lishini kafolatlaydi va UI qisman yangilangan ma‘lumotlarni ko‘rsatadigan vaziyatni istisno qiladi. Bu Flutter'da interfeys muvofiqligining asosiy mexanizmidir.

Dart tilida kod misollari

Oddiy StatefulWidget misolini ko‘rib chiqaylik — tugma bosishlar sonini hisoblagich. U asosiy namunani ko‘rsatadi: State yaratish, initState'da maydonni ishga tushirish, setState orqali o‘zgartirish:

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Sanoq: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Oshirish'),
        ),
      ],
    );
  }
}

Asinxron ma‘lumot yuklash va hayotiy tsiklni boshqarish misoli. StatefulWidget tarmoqdan ma‘lumot yuklaydi va yuklash holatini ko‘rsatadi:

class UserProfilePage extends StatefulWidget {
  final String userId;
  const UserProfilePage({super.key, required this.userId});

  @override
  State<UserProfilePage> createState() => _UserProfilePageState();
}

class _UserProfilePageState extends State<UserProfilePage> {
  UserModel? _user;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadUser();
  }

  Future<void> _loadUser() async {
    final user = await UserService.fetchUser(widget.userId);
    setState(() {
      _user = user;
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) return const CircularProgressIndicator();
    return Text('Salom, ${_user!.name}');
  }
}

Ikkinchi misolda muhim: initState asinxron operatsiyani boshlaydi, lekin metodning o‘zi asinxron emas. Asinxronlik async/await orqali alohida _loadUser metodi ichida amalga oshiriladi, so‘rov tugagandan so‘ng setState orqali holatni yangilaydi. Bu yondashuv vidjet ma‘lumotlarni olishdan oldin yuklash indikatorini to‘g‘ri ko‘rsatishini kafolatlaydi.

StatefulWidget vs StatelessWidget

StatefulWidget va StatelessWidget o‘rtasida tanlov faqat holat mavjudligi masalasi emas. StatefulWidget initState, didChangeDependencies, didUpdateWidget va dispose metodlari bilan to‘liq hayotiy tsikl taklif qiladi, bu kontrollerlar, animatsiyalar va oqimlar bilan ishlash uchun zarur. StatelessWidget esa bu metodlarga ega emas va framework uchun har doim yengilroq.

Flutter jamoasining tavsiyasi (Flutter docs, 2026) — dasturda StatefulWidget sonini minimallashtirish, holatni daraxtda yuqoriga ko‘tarish (State Hoisting) yoki holatni boshqarish yechimlaridan (Riverpod, Bloc, Provider) foydalanish. Har bir StatefulWidget element o‘chirilgunga qadar yashaydigan State obyektini yaratadi — bunday vidjetlar qancha ko‘p bo‘lsa, xotira yuki shuncha yuqori bo‘ladi.

Ish unumdorligi va optimallashtirish

StatefulWidget State obyektini yaratish va saqlash zarurati tufayli StatelessWidget'dan ko‘proq resurs talab qiladi. Biroq, bir necha qoidalarga rioya qilinsa, StatefulWidget'dan to‘g‘ri foydalanish unumdorlik muammolariga olib kelmaydi. Birinchidan, StatefulWidget'ning chuqur joylashtirilishidan saqlaning — har bir daraja daraxtni aylanib chiqish uchun qo‘shimcha yuk qo‘shadi. Ikkinchidan, murakkab StatefulWidget'ni har biri holatning o‘z qismi uchun mas‘ul bo‘lgan bir necha sodda vidjetlarga bo‘ling.

Flutter Performance tadqiqotiga ko‘ra (Flutter.dev, fevral 2026), FPS pasayishining eng keng tarqalgan sababi ota-ona vidjetida setState chaqirish bo‘lib, u ko‘rinishini o‘zgartirmagan StatelessWidget'larni ham o‘z ichiga olgan barcha avlodlarni qayta quradi. Yechim — UI ning o‘zgaruvchan qismini alohida StatefulWidget'ga ajratish, shunda setState faqat kerakli vidjetlarning minimal sonini qayta qursin.

State ichida const dan foydalanish yana bir muhim texnikadir. Agar bola vidjetlar const deb e‘lon qilinsa, Flutter ota-onada setState chaqirilganda ularni qayta qurmaydi. Bu framework yukini kamaytiradi va kadr chizish vaqtini qisqartiradi.

Tez-tez setState chaqirishdan saqlaning

Har bir setState chaqiruvi vidjetning to‘liq qayta qurilishini boshlaydi. Agar holat yuqori chastota bilan o‘zgarsa (masalan, animatsiya yoki ma‘lumot oqimi), qo‘lda setState chaqirish o‘rniga AnimatedBuilder, ValueListenableBuilder yoki StreamBuilder dan foydalanishni o‘ylab ko‘ring. Bu vidjetlar qayta qurishni optimallashtiradi, faqat haqiqatda o‘zgargan UI qismini yangilaydi.

Odatdagi xatolar

StatefulWidget bilan birinchi odatdagi xato — dispose'dan so‘ng setState chaqirish. Vidjet daraxtdan olib tashlanganda, State o‘lik hisoblanadi va har qanday setState chaqiruvi «setState called after dispose» istisnosini yaratadi. Ko‘pincha bu asinxron operatsiya vidjet olib tashlanganidan so‘ng tugaganda sodir bo‘ladi. Yechim — setState chaqirishdan oldin mounted bayrog‘ini tekshirish yoki asinxron operatsiyalarni dispose'da bekor qilish.

Ikkinchi xato — build metodida og‘ir hisob-kitoblarni bajarish. Build har bir setState va ota-onaning har bir qayta qurilishida chaqirilgani uchun, barcha hisob-kitoblar imkon qadar yengil bo‘lishi kerak. Agar resurs talab qiladigan operatsiyani bajarish kerak bo‘lsa — uni alohida Isolate'ga chiqaring yoki natijani State maydonida keshlang.

Uchinchi xato — super.initState() va super.dispose() chaqirilmasligi. Bu metodlarni qayta yozganda, dasturchi ota-ona amalga oshirilishini chaqirishi shart. Agar bu bajarilmasa, framework Element holatini to‘g‘ri boshqara olmaydi, bu esa qiyin aniqlanadigan xatolarga olib keladi.

Xatolardan qochish bo‘yicha tavsiyalar

• Asinxron callback'larda setState dan oldin har doim mounted ni tekshiring
• super.initState() va super.dispose() chaqirishni unutmang
• To‘g‘ridan-to‘g‘ri build'da HTTP so‘rovlarini qilmang — initState dan foydalaning
• dispose'da barcha obunalarni bekor qiling
• Loyihada minimal miqdordagi StatefulWidget dan foydalaning