FutureBuilder — এটি কী, ফ্লাটারে Future নিয়ে কাজ করা

ফ্লাটারে FutureBuilder কী

FutureBuilder হলো widgets প্যাকেজের একটি অন্তর্নির্মিত ফ্লাটার উইজেট যা 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-এর মাধ্যমে ম্যানুয়াল অবস্থা পরিচালনা — ফ্লাটারে অ্যাসিঙ্ক্রোনাস 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% পরিস্থিতি কভার করে।