FutureBuilder — bu nima, Flutter-da Future bilan ishlash

Flutter-da FutureBuilder nima

FutureBuilder — bu widgets paketidan Future<T> va builder funksiyasini qabul qiluvchi o'rnatilgan Flutter vidjetidir. Future holati o'zgarganda (bajarilmoqda, ma'lumot bilan tugallangan, xato bilan tugallangan) FutureBuilder avtomatik ravishda UI-ni qayta quradi, builder-ni yangi AsyncSnapshot bilan chaqiradi. Bu setState va bayroqlar orqali yuklash holatini qo'lda boshqarish zaruratini yo'q qiladi.

Ma'lumot oqimlari (Stream) bilan ishlaydigan StreamBuilder-dan farqli o'laroq, FutureBuilder bir martalik asinxron operatsiyalar uchun mo'ljallangan: HTTP so'rovi, fayldan o'qish, ma'lumotlar bazasiga so'rov. FutureBuilder Future-ga obunani o'zi boshqaradi: birinchi qurilishda Future-ni ishga tushiradi va uning tugallanishini kuzatadi. Vidjet yo'q qilinganda FutureBuilder Future-ni bekor qilmaydi — bu dasturchining javobgarligidir.

Flutter Cookbook (2026) ma'lumotlariga ko'ra, FutureBuilder asinxron operatsiya ekran ishga tushirilganda bir marta bajariladigan holatlar uchun tavsiya etiladi. Takrorlanuvchi operatsiyalar yoki ma'lumot oqimlari uchun StreamBuilder-dan foydalaning. Ikkala vidjet ham Reactive UI na'munasiga amal qiladi, ammo FutureBuilder bir martalik so'rovlar uchun optimallashtirilgan.

FutureBuilder qanday ishlaydi

FutureBuilder-ning ichki amalga oshirilishi Future.then va catchError orqali Future-ga obuna bo'ladi. Boshlang'ichda FutureBuilder connectionState-ni ConnectionState.waiting-ga o'rnatadi va builder-ni bo'sh ma'lumotlar bilan chaqiradi. Muvaffaqiyatli tugallanishda connectionState ma'lumotlar bilan ConnectionState.done-ga o'zgaradi. Xato bo'lganda snapshot.error xato obyekti bilan to'ldiriladi. Har bir o'zgarish vidjetning qayta qurilishini tetiklaydi.

AsyncSnapshot: holatlar va xususiyatlar

AsyncSnapshot — FutureBuilder har bir holat o'zgarishida builder funksiyasiga uzatadigan konteyner obyekti. U asinxron operatsiyaning joriy holati haqidagi barcha ma'lumotlarni o'z ichiga oladi: yuklash davom etmoqdami, qanday ma'lumotlar olingan, xato yuz berdimi. AsyncSnapshot-ni tushunish FutureBuilder bilan UI-ni to'g'ri qurishning kalitidir.

ConnectionState: asinxron operatsiyaning to'rt holati

Enum ConnectionState asinxron operatsiyaning bosqichini aniqlaydi. None — Future hali ishga tushirilmagan boshlang'ich holat (kamdan-kam qo'llaniladi, odatda initialData holda birinchi qurilishda). Waiting — Future bajarilmoqda, ma'lumotlar hali olinmagan. Active — faqat StreamBuilder tomonidan qisman ma'lumotli oqimlar uchun ishlatiladi. Done — Future tugallangan, ma'lumotlar snapshot.data yoki xato snapshot.error orqali mavjud.

Builder funksiyasida AsyncSnapshot-ning barcha holatlarini to'g'ri boshqarish — ishlab chiqarish kodi uchun majburiy talab. Agar waiting holatini boshqarmasangiz, foydalanuvchi yuklash vaqtida bo'sh ekranni ko'radi. Agar hasError-ni boshqarmasangiz, foydalanuvchi tushuntirishsiz Exception oladi. Tavsiya etilgan na'muna: hasError tekshiruvi → hasData tekshiruvi → standart ravishda yuklashni ko'rsatish.

FutureBuilder ishlatish na'munalari

FutureBuilder bir nechta standart na'munalarda ishlatilishi mumkin, ularning har biri aniq vazifani hal qiladi. Asosiy stsenariylarni ko'rib chiqamiz: ishga tushirishda ma'lumot yuklash, keshlash bilan yuklash, parallel so'rovlar va takrorlash bilan xato boshqaruvi.

Ekran ishga tushirilganda ma'lumot yuklash

Eng keng tarqalgan na'muna — StatefulWidget yoki StatelessWidget-ning build metodida FutureBuilder. Future initState-dan uzatiladi yoki to'g'ridan-to'g'ri build-da yaratiladi. Future-ni har bir qayta qurishda build metodida yaratmaslik muhim — bu takroriy so'rovlarga olib keladi. State maydonida saqlangan Future-dan foydalaning.

Keshlash bilan yuklash va yangilash

Takroriy so'rovlarning oldini olish uchun FutureBuilder CachedNetworkImage yoki mahalliy keshlar bilan birlashtirilishi mumkin. Birinchi yuklashdan so'ng ma'lumotlar xotirada yoki SharedPreferences-da saqlanadi, FutureBuilder esa keshlangan ma'lumotlarni darhol ko'rsatadi, parallel ravishda ularni tarmoqdan yangilaydi. Bu darhol javob berish orqali UX-ni yaxshilaydi.

pub.dev (2026) ma'lumotlariga ko'ra, keshlash ayniqsa rasmlar va ma'lumotlar ro'yxatlari uchun dolzarbdir. FutureBuilder CachedNetworkImageProvider bilan avtomatik ravishda keshlangan rasmni ko'rsatadi, u bo'lmaganda esa yuklash indikatori bilan keyin yuklab olingan faylni ko'rsatadi.

FutureBuilder vs setState: nimani tanlash kerak

FutureBuilder va setState orqali qo'lda holat boshqaruvi — Flutter-da asinxron UI-ga ikki yondashuv. Har birining o'z afzalliklari va cheklovlari bor. Tanlov ekranning murakkabligi va asinxron operatsiyalar soniga bog'liq.

FutureBuilder soddaligi bilan g'alaba qozonadi: yuklash holati, ma'lumotlar va xato uchun maydonlar e'lon qilish shart emas — hamma narsa AsyncSnapshot orqali boshqariladi. Bir asinxron operatsiyali oddiy ekranlar uchun idealdir (bitta HTTP so'rovi, ma'lumotlar bazasidan o'qish). Biroq, bir ekranda 5+ asinxron operatsiya bo'lganda FutureBuilder haddan tashqari ichma-ichlik yaratadi — ichma-ich FutureBuilder-lardan “piramida” hosil bo'ladi.

setState qo'lda holat bayroqlari bilan murakkab mantiqda ko'proq nazorat va o'qiluvchanlik beradi. Ko'p sonli bog'liq so'rovlari bo'lgan ekranlar uchun (foydalanuvchini yuklash → uning buyurtmalarini yuklash → buyurtma tafsilotlarini yuklash) setState-ni ChangeNotifier yoki Bloc bilan ishlatish yaxshidir. Flutter State Management Guide (2026) ma'lumotlariga ko'ra, murakkab stsenariylar uchun FutureBuilder o'rniga Riverpod yoki Bloc dan foydalanish tavsiya etiladi, chunki ular mantiq va taqdimotning yaxshiroq ajratilishini ta'minlaydi.

Tarmoqdan ma'lumot yuklash bilan FutureBuilder misoli

REST API-dan foydalanuvchilar ro'yxatini yuklash uchun amaliy FutureBuilder misolini ko'rib chiqamiz. Kod AsyncSnapshot-ning uchala holatini to'g'ri boshqarishni namoyish etadi: yuklash, xato va tayyor ma'lumotlar.

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

  @override
  State<UserListPage> createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  final Future<List<User>> usersFuture = UserRepository().fetchUsers();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Users')),
      body: FutureBuilder<List<User>>(
        future: usersFuture,
        builder: (context, AsyncSnapshot<List<User>> snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.error_outline, size: 48, color: Colors.red),
                  const SizedBox(height: 16),
                  Text('Error: ${snapshot.error}'),
                ],
              ),
            );
          }

          if (snapshot.hasData) {
            final users = snapshot.data!;
            return ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: CircleAvatar(backgroundImage: NetworkImage(users[index].avatarUrl)),
                  title: Text(users[index].name),
                  subtitle: Text(users[index].email),
                );
              },
            );
          }

          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Misolda FutureBuilder uchala holatni boshqaradi. Xato bo'lganda xato xabari bilan ikonka ko'rsatiladi. Muvaffaqiyatli yuklashda — avatarlar va ismlar bilan ListView. Yuklash vaqtida — CircularProgressIndicator. Future sinf maydoni sifatida e'lon qilingan, bu qayta qurishda takroriy chaqiruvning oldini oladi. Ushbu na'muna mobil ilovalarda FutureBuilder-dan foydalanish stsenariylarining 90% ini qamrab oladi.