FutureWidget

परिचय

FutureWidget आपके Nylo Website प्रोजेक्ट्स में Future's को रेंडर करने का एक सरल तरीका है। यह Flutter के FutureBuilder को रैप करता है और बिल्ट-इन लोडिंग स्टेट्स के साथ एक क्लीनर API प्रदान करता है।

जब आपका Future प्रगति में होता है, तो यह एक लोडर दिखाएगा। Future पूरा होने पर, डेटा child कॉलबैक के माध्यम से लौटाया जाता है।

बेसिक उपयोग

यहाँ FutureWidget उपयोग करने का एक सरल उदाहरण है:

// A Future that takes 3 seconds to complete
Future<String> _findUserName() async {
  await sleep(3); // wait for 3 seconds
  return "John Doe";
}

// Use the FutureWidget
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: FutureWidget<String>(
         future: _findUserName(),
         child: (context, data) {
           // data = "John Doe"
           return Text(data!);
         },
       ),
    ),
  );
}

विजेट Future पूरा होने तक आपके यूज़र्स के लिए लोडिंग स्टेट को स्वचालित रूप से हैंडल करेगा।

लोडिंग स्टेट कस्टमाइज़ करना

आप loadingStyle पैरामीटर का उपयोग करके लोडिंग स्टेट की दिखावट को कस्टमाइज़ कर सकते हैं।

सामान्य लोडिंग स्टाइल

एक स्टैंडर्ड लोडिंग विजेट दिखाने के लिए LoadingStyle.normal() का उपयोग करें। आप वैकल्पिक रूप से एक कस्टम चाइल्ड विजेट प्रदान कर सकते हैं:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.normal(
    child: Text("Loading..."), // custom loading widget
  ),
)

यदि कोई चाइल्ड प्रदान नहीं किया जाता है, तो डिफ़ॉल्ट Nylo Website ऐप लोडर दिखाया जाएगा।

स्केलेटनाइज़र लोडिंग स्टाइल

स्केलेटन लोडिंग इफेक्ट दिखाने के लिए LoadingStyle.skeletonizer() का उपयोग करें। यह प्लेसहोल्डर UI दिखाने के लिए बहुत अच्छा है जो आपके कंटेंट लेआउट से मेल खाता है:

FutureWidget<User>(
  future: _fetchUser(),
  child: (context, user) {
    return UserCard(user: user!);
  },
  loadingStyle: LoadingStyle.skeletonizer(
    child: UserCard(user: User.placeholder()), // skeleton placeholder
    effect: SkeletonizerEffect.shimmer, // shimmer, pulse, or solid
  ),
)

उपलब्ध स्केलेटन इफेक्ट्स:

• SkeletonizerEffect.shimmer - एनिमेटेड शिमर इफेक्ट (डिफ़ॉल्ट)
• SkeletonizerEffect.pulse - पल्सिंग एनिमेशन इफेक्ट
• SkeletonizerEffect.solid - सॉलिड कलर इफेक्ट

कोई लोडिंग स्टाइल नहीं

लोडिंग इंडिकेटर को पूरी तरह से छिपाने के लिए LoadingStyle.none() का उपयोग करें:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.none(),
)

एरर हैंडलिंग

आप onError कॉलबैक का उपयोग करके अपने Future से एरर्स को हैंडल कर सकते हैं:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  onError: (AsyncSnapshot snapshot) {
    print(snapshot.error.toString());
    return Text("Something went wrong");
  },
)

यदि कोई onError कॉलबैक प्रदान नहीं किया गया है और कोई एरर होती है, तो एक खाली SizedBox.shrink() दिखाया जाएगा।

पैरामीटर्स