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 एनम एसिंक्रोनस ऑपरेशन के चरण को परिभाषित करता है। 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 समानांतर में नेटवर्क से ताज़ा करते हुए तुरंत कैश किया गया डेटा प्रदर्शित करता है। यह तत्काल प्रतिक्रिया के माध्यम से UX में सुधार करता है।

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% परिदृश्यों को कवर करता है।