FutureBuilder — یہ کیا ہے، Flutter میں Future کے ساتھ کام کرنا

Flutter میں FutureBuilder کیا ہے

FutureBuilder widgets پیکیج کا ایک بلٹ ان Flutter ویجیٹ ہے جو Future اور ایک builder فنکشن لیتا ہے۔ جب Future کی حالت بدلتی ہے (چل رہا، ڈیٹا کے ساتھ مکمل، خرابی کے ساتھ مکمل)، FutureBuilder خود بخود ایک نئے AsyncSnapshot کے ساتھ builder کو کال کرکے UI کو دوبارہ تعمیر کرتا ہے۔ یہ setState اور جھنڈوں کے ذریعے دستی طور پر لوڈنگ حالت کو منظم کرنے کی ضرورت کو ختم کرتا ہے۔

StreamBuilder کے برعکس، جو ڈیٹا سٹریمز (Stream) کے ساتھ کام کرتا ہے، FutureBuilder ایک بار کے غیر متزامن آپریشنز کے لیے ڈیزائن کیا گیا ہے: HTTP درخواست، فائل پڑھنا، ڈیٹابیس سوال۔ FutureBuilder خود Future کی سبسکرپشن کا انتظام کرتا ہے: پہلی تعمیر پر، یہ Future شروع کرتا ہے اور اس کی تکمیل کو ٹریک کرتا ہے۔ جب ویجیٹ تباہ ہو جاتا ہے، FutureBuilder Future کو منسوخ نہیں کرتا — یہ ڈیویلپر کی ذمہ داری ہے۔

Flutter Cookbook (2026) کے مطابق، FutureBuilder ان صورتوں کے لیے تجویز کیا جاتا ہے جہاں اسکرین کی ابتدا میں ایک بار غیر متزامن آپریشن چلتا ہے۔ بار بار ہونے والے آپریشنز یا ڈیٹا سٹریمز کے لیے StreamBuilder استعمال کریں۔ دونوں ویجیٹس ایک ہی ری ایکٹیو UI پیٹرن کی پیروی کرتے ہیں، لیکن FutureBuilder ایک بار کی درخواستوں کے لیے بہتر بنایا گیا ہے۔

FutureBuilder اندرونی طور پر کیسے کام کرتا ہے

FutureBuilder کا اندرونی نفاذ Future.then اور catchError کا استعمال کرتے ہوئے Future کو سبسکرائب کرتا ہے۔ جب FutureBuilder شروع ہوتا ہے، یہ connectionState کو ConnectionState.waiting پر سیٹ کرتا ہے اور خالی ڈیٹا کے ساتھ builder کو کال کرتا ہے۔ کامیاب تکمیل پر، connectionState ڈیٹا کے ساتھ ConnectionState.done میں بدل جاتا ہے۔ خرابی پر، snapshot.error خرابی آبجیکٹ سے بھر جاتا ہے۔ ہر تبدیلی ویجیٹ کی دوبارہ تعمیر کو متحرک کرتی ہے۔

AsyncSnapshot: حالتیں اور خصوصیات

AsyncSnapshot ایک کنٹینر آبجیکٹ ہے جسے FutureBuilder ہر حالت کی تبدیلی پر builder فنکشن کو دیتا ہے۔ اس میں غیر متزامن آپریشن کی موجودہ حیثیت کے بارے میں تمام معلومات ہوتی ہیں: کیا لوڈنگ جاری ہے، کیا ڈیٹا موصول ہوا، یا کیا خرابی ہوئی۔ AsyncSnapshot کو سمجھنا FutureBuilder کے ساتھ UI کو صحیح طریقے سے تعمیر کرنے کی کلید ہے۔

ConnectionState: غیر متزامن آپریشن کی چار حالتیں

ConnectionState enum غیر متزامن آپریشن کے مرحلے کی وضاحت کرتا ہے۔ None — ابتدائی حالت جب Future ابھی شروع نہیں ہوا (شاذ و نادر ہی استعمال ہوتا ہے، عام طور پر initialData کے بغیر پہلی تعمیر پر)۔ Waiting — Future چل رہا ہے، ڈیٹا ابھی موصول نہیں ہوا۔ Active — صرف StreamBuilder کے ذریعے جزوی ڈیٹا والے سٹریمز کے لیے استعمال ہوتا ہے۔ Done — Future مکمل ہوگیا، ڈیٹا snapshot.data یا خرابی snapshot.error کے ذریعے دستیاب ہے۔

builder فنکشن میں تمام AsyncSnapshot حالتوں کا مناسب انتظام پروڈکشن کوڈ کے لیے لازمی شرط ہے۔ اگر آپ waiting حالت کو نہیں سنبھالتے، صارف لوڈنگ کے دوران خالی اسکرین دیکھے گا۔ اگر آپ hasError کو نہیں سنبھالتے، صارف بغیر وضاحت کے ایک استثنا حاصل کرے گا۔ تجویز کردہ پیٹرن: hasError چیک کریں → hasData چیک کریں → ڈیفالٹ طور پر لوڈنگ دکھائیں۔

FutureBuilder استعمال کے پیٹرن

FutureBuilder کئی معیاری پیٹرن میں استعمال کیا جا سکتا ہے، ہر ایک مخصوص کام حل کرتا ہے۔ آئیے اہم منظرنامے دیکھتے ہیں: ابتدا میں ڈیٹا لوڈ کرنا، کیشنگ کے ساتھ لوڈ کرنا، متوازی درخواستیں اور دوبارہ کوشش کے ساتھ خرابی کا انتظام۔

اسکرین کی ابتدا میں ڈیٹا لوڈ کرنا

سب سے عام پیٹرن — StatefulWidget یا StatelessWidget کے build طریقہ میں FutureBuilder۔ Future initState سے منتقل کیا جاتا ہے یا براہ راست build میں بنایا جاتا ہے۔ ہر دوبارہ تعمیر پر build طریقہ میں Future کو نہ بنانا ضروری ہے — یہ بار بار درخواستوں کا باعث بنے گا۔ State فیلڈ میں محفوظ کردہ Future استعمال کریں۔

کیشنگ اور ریفریش کے ساتھ لوڈ کرنا

بار بار درخواستوں کو روکنے کے لیے، FutureBuilder کو CachedNetworkImage یا مقامی کیش کے ساتھ ملایا جا سکتا ہے۔ پہلی لوڈنگ کے بعد، ڈیٹا میموری یا SharedPreferences میں محفوظ ہو جاتا ہے، اور FutureBuilder نیٹ ورک سے متوازی طور پر ریفریش کرتے ہوئے کیشڈ ڈیٹا کو فوری طور پر دکھاتا ہے۔ یہ فوری ردعمل کے ذریعے صارف کے تجربے کو بہتر بناتا ہے۔

pub.dev (2026) کے مطابق، کیشنگ خاص طور پر تصاویر اور ڈیٹا کی فہرستوں کے لیے اہم ہے۔ CachedNetworkImageProvider کے ساتھ FutureBuilder خود بخود کیشڈ تصویر دکھاتا ہے، اور اس کی عدم موجودگی میں — ڈاؤن لوڈ کردہ فائل کے بعد لوڈنگ انڈیکیٹر۔

FutureBuilder بمقابلہ setState: کیا منتخب کریں

FutureBuilder اور setState کے ذریعے دستی حالت کا انتظام — Flutter میں غیر متزامن UI کے دو طریقے ہیں۔ ہر ایک کے اپنے فوائد اور حدود ہیں۔ انتخاب اسکرین کی پیچیدگی اور غیر متزامن آپریشنز کی تعداد پر منحصر ہے۔

FutureBuilder سادگی میں جیتتا ہے: آپ کو لوڈنگ حالت، ڈیٹا اور خرابی کے لیے فیلڈز اعلان کرنے کی ضرورت نہیں — سب کچھ AsyncSnapshot کے ذریعے منظم ہوتا ہے۔ یہ ایک غیر متزامن آپریشن (ایک HTTP درخواست، ڈیٹابیس پڑھنا) والی سادہ اسکرینوں کے لیے مثالی ہے۔ تاہم، ایک اسکرین پر 5+ غیر متزامن آپریشنز کے ساتھ، FutureBuilder ضرورت سے زیادہ گھریلو پن پیدا کرتا ہے — جس کے نتیجے میں گھریلے FutureBuilders کا ایک “پرامڈ” بنتا ہے۔

دستی حالت کے جھنڈوں کے ساتھ setState پیچیدہ منطق کے لیے زیادہ کنٹرول اور پڑھنے کی اہلیت دیتا ہے۔ متعدد منحصر درخواستوں والی اسکرینوں (صارف لوڈ کریں → ان کے آرڈر لوڈ کریں → آرڈر کی تفصیلات لوڈ کریں) کے لیے ChangeNotifier یا Bloc کے ساتھ setState استعمال کرنا بہتر ہے۔ Flutter State Management Guide (2026) کے مطابق، پیچیدہ منظرناموں کے لیے FutureBuilder کے بجائے Riverpod یا Bloc تجویز کیا جاتا ہے، کیونکہ وہ منطق اور پیشکش کی بہتر علیحدگی فراہم کرتے ہیں۔

نیٹ ورک ڈیٹا لوڈنگ کے ساتھ FutureBuilder مثال

آئیے REST API سے صارفین کی فہرست لوڈ کرنے کی ایک عملی FutureBuilder مثال دیکھتے ہیں۔ کوڈ AsyncSnapshot کی تینوں حالتوں: لوڈنگ، خرابی اور تیار ڈیٹا کے صحیح انتظام کو ظاہر کرتا ہے۔

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('صارفین')),
      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('خرابی: ${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());
        },
      ),
    );
  }
}

مثال میں، FutureBuilder تینوں حالتوں کو سنبھالتا ہے۔ خرابی پر، خرابی کے پیغام کے ساتھ ایک آئیکن دکھایا جاتا ہے۔ کامیاب لوڈنگ پر — ایوتار اور ناموں کے ساتھ ListView۔ لوڈنگ کے دوران — CircularProgressIndicator۔ Future کو کلاس فیلڈ کے طور پر اعلان کیا گیا ہے، جو دوبارہ تعمیر پر بار بار کال کو روکتا ہے۔ یہ پیٹرن موبائل ایپس میں FutureBuilder استعمال کے 90% منظرناموں کو کور کرتا ہے۔