Pullable

परिचय

Pullable विजेट किसी भी स्क्रॉल करने योग्य कंटेंट में पुल-टू-रिफ्रेश और लोड-मोर कार्यक्षमता जोड़ता है। यह आपके चाइल्ड विजेट को जेस्चर-ड्रिवन रिफ्रेश और पेजिनेशन व्यवहार से लपेटता है, कई हेडर एनिमेशन स्टाइल का समर्थन करता है।

pull_to_refresh_flutter3 पैकेज पर निर्मित, Pullable सामान्य कॉन्फ़िगरेशन के लिए नामित कंस्ट्रक्टर के साथ एक साफ API प्रदान करता है।

Pullable(
  onRefresh: () async {
    // Fetch fresh data
    await fetchData();
  },
  child: ListView(
    children: items.map((item) => ListTile(title: Text(item))).toList(),
  ),
)

बुनियादी उपयोग

किसी भी स्क्रॉल करने योग्य विजेट को Pullable से लपेटें:

Pullable(
  onRefresh: () async {
    await loadLatestPosts();
  },
  child: ListView.builder(
    itemCount: posts.length,
    itemBuilder: (context, index) => PostCard(post: posts[index]),
  ),
)

जब उपयोगकर्ता सूची को नीचे खींचता है, तो onRefresh कॉलबैक ट्रिगर होता है। कॉलबैक पूरा होने पर रिफ्रेश इंडिकेटर स्वचालित रूप से समाप्त हो जाता है।

कंस्ट्रक्टर

Pullable सामान्य कॉन्फ़िगरेशन के लिए नामित कंस्ट्रक्टर प्रदान करता है:

उदाहरण

// Classic header
Pullable.classicHeader(
  onRefresh: () async => await refreshData(),
  child: myListView,
)

// Material header
Pullable.materialClassicHeader(
  onRefresh: () async => await refreshData(),
  child: myListView,
)

// No bounce effect
Pullable.noBounce(
  onRefresh: () async => await refreshData(),
  headerType: PullableHeaderType.classic,
  child: myListView,
)

// Custom header widget
Pullable.custom(
  customHeader: MyCustomRefreshHeader(),
  onRefresh: () async => await refreshData(),
  child: myListView,
)

PullableConfig

बारीक नियंत्रण के लिए, Pullable.builder() कंस्ट्रक्टर के साथ PullableConfig का उपयोग करें:

Pullable.builder(
  config: PullableConfig(
    enablePullDown: true,
    enablePullUp: true,
    headerType: PullableHeaderType.materialClassic,
    onRefresh: () async => await refreshData(),
    onLoading: () async => await loadMoreData(),
    refreshCompleteDelay: Duration(milliseconds: 500),
    loadCompleteDelay: Duration(milliseconds: 300),
    physics: BouncingScrollPhysics(),
  ),
  child: myListView,
)

सभी कॉन्फ़िगरेशन विकल्प

हेडर स्टाइल

पाँच बिल्ट-इन हेडर एनिमेशन में से चुनें:

enum PullableHeaderType {
  classic,           // Classic pull indicator
  waterDrop,         // Water drop animation (default)
  materialClassic,   // Material Design classic
  waterDropMaterial,  // Material water drop
  bezier,            // Bezier curve animation
}

कंस्ट्रक्टर या कॉन्फ़िग के माध्यम से स्टाइल सेट करें:

// Via named constructor
Pullable.bezierHeader(
  onRefresh: () async => await refreshData(),
  child: myListView,
)

// Via config
Pullable.builder(
  config: PullableConfig(
    headerType: PullableHeaderType.bezier,
    onRefresh: () async => await refreshData(),
  ),
  child: myListView,
)

और लोड करने के लिए ऊपर खींचें

पुल-अप लोडिंग के साथ पेजिनेशन सक्षम करें:

Pullable.builder(
  config: PullableConfig(
    enablePullDown: true,
    enablePullUp: true,
    onRefresh: () async {
      // Reset to page 1
      page = 1;
      items = await fetchItems(page: page);
      setState(() {});
    },
    onLoading: () async {
      // Load next page
      page++;
      List<Item> more = await fetchItems(page: page);
      items.addAll(more);
      setState(() {});
    },
  ),
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) => ItemTile(item: items[index]),
  ),
)

कस्टम हेडर और फ़ुटर

अपने स्वयं के हेडर और फ़ुटर विजेट प्रदान करें:

Pullable.custom(
  customHeader: Container(
    height: 60,
    alignment: Alignment.center,
    child: CircularProgressIndicator(),
  ),
  customFooter: Container(
    height: 40,
    alignment: Alignment.center,
    child: Text("Loading more..."),
  ),
  enablePullUp: true,
  onRefresh: () async => await refreshData(),
  onLoading: () async => await loadMore(),
  child: myListView,
)

कंट्रोलर

प्रोग्रामेटिक नियंत्रण के लिए RefreshController का उपयोग करें:

final RefreshController _controller = RefreshController();

Pullable(
  controller: _controller,
  onRefresh: () async => await refreshData(),
  child: myListView,
)

// Trigger refresh programmatically
_controller.triggerRefresh();

// Trigger loading programmatically
_controller.triggerLoading();

// Check state
bool refreshing = _controller.isRefreshing;
bool loading = _controller.isLoading;

RefreshController पर एक्सटेंशन मेथड

एक्सटेंशन मेथड

.pullable() एक्सटेंशन का उपयोग करके किसी भी विजेट को पुल-टू-रिफ्रेश से लपेटा जा सकता है:

ListView(
  children: items.map((item) => ListTile(title: Text(item.name))).toList(),
).pullable(
  onRefresh: () async {
    await fetchItems();
  },
)

कस्टम कॉन्फ़िग के साथ:

myListView.pullable(
  onRefresh: () async => await refreshData(),
  pullableConfig: PullableConfig(
    headerType: PullableHeaderType.classic,
    enablePullUp: true,
    onLoading: () async => await loadMore(),
  ),
)

CollectionView एकीकरण

CollectionView बिल्ट-इन पेजिनेशन के साथ pullable वेरिएंट प्रदान करता है:

CollectionView.pullable

CollectionView<User>.pullable(
  data: (iteration) async => api.getUsers(page: iteration),
  builder: (context, item) => UserTile(user: item.data),
  onRefresh: () => print('Refreshed!'),
  headerStyle: 'WaterDropHeader',
)

CollectionView.pullableSeparated

CollectionView<User>.pullableSeparated(
  data: (iteration) async => api.getUsers(page: iteration),
  builder: (context, item) => UserTile(user: item.data),
  separatorBuilder: (context, index) => Divider(),
)

CollectionView.pullableGrid

CollectionView<Product>.pullableGrid(
  data: (iteration) async => api.getProducts(page: iteration),
  builder: (context, item) => ProductCard(product: item.data),
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
)

Pullable-विशिष्ट पैरामीटर

उदाहरण

रिफ्रेश के साथ पेजिनेटेड सूची

class _PostListState extends NyState<PostListPage> {
  List<Post> posts = [];
  int page = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Pullable.builder(
        config: PullableConfig(
          enablePullDown: true,
          enablePullUp: true,
          headerType: PullableHeaderType.materialClassic,
          onRefresh: () async {
            page = 1;
            posts = await api<PostApiService>((request) => request.getPosts(page: page));
            setState(() {});
          },
          onLoading: () async {
            page++;
            List<Post> more = await api<PostApiService>((request) => request.getPosts(page: page));
            posts.addAll(more);
            setState(() {});
          },
        ),
        child: ListView.builder(
          itemCount: posts.length,
          itemBuilder: (context, index) => PostCard(post: posts[index]),
        ),
      ),
    );
  }
}

एक्सटेंशन के साथ सरल रिफ्रेश

ListView(
  children: notifications
    .map((n) => ListTile(
      title: Text(n.title),
      subtitle: Text(n.body),
    ))
    .toList(),
).pullable(
  onRefresh: () async {
    notifications = await fetchNotifications();
    setState(() {});
  },
)