Flutter бесконечная прокрутка страницы ListView [отложенная загрузка]

#flutter #listview #dart #pagination #flutter-layout

#трепетание #listview #dart #Разбивка на страницы #flutter-layout

Вопрос:

Может ли кто-нибудь добавить бесконечную прокрутку страницы [отложенная загрузка]?так что приложение загружает 14 продуктов с моего сервера (jsondata), затем загружает еще 14 продуктов, когда я опускаюсь на дно, а затем загружает еще 14 продуктов до конца [мой используемый код приведен ниже]

Любое решение или кто-нибудь может мне помочь и написать его?

 class ItemsPage extends StatefulWidget {
  @override
  _ItemsPageState createState() => _ItemsPageState();
}

class _ItemsPageState extends State<ItemsPage>
    with SingleTickerProviderStateMixin {
  List<DropdownMenuItem<VarientList>> listDrop = [];
  List<ProductBean> productList = [];
  int selected = null;
  dynamic curency;

  List<SubcategoryList> subCatList = [];
  List<Tab> tabs = <Tab>[];
  TabController tabController;

  var value = 0;

  dynamic isFetch = false;
  dynamic isDelete = false;

  @override
  void initState() {
    getSubCategory();
    super.initState();
  }

  void productListM(catid) async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    setState(() {
      isFetch = true;
      curency = pref.getString('curency');
      productList.clear();
    });
    var vendorId = pref.getInt('vendor_id');
    var client = http.Client();
    var storeProduct = store_subcategoryproduct;
    client.post(storeProduct, body: {
      'vendor_id': '${vendorId}',
      'subcat_id': '${catid}'
    }).then((value) {
      print('${value.body}');
      if (value.statusCode == 200) {
        var jsonData = jsonDecode(value.body) as List;
        List<ProductBean> listBean =
            jsonData.map((e) => ProductBean.fromJson(e)).toList();
        if (listBean.length > 0) {
          setState(() {
            productList = List.from(listBean);
          });
        }
      }
      setState(() {
        isFetch = false;
      });
    }).catchError((e) {
      setState(() {
        isFetch = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0),
          child: CustomAppBar(
            titleWidget: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Center(
                    child: Text(
                  'منتجاتي',
                  style: TextStyle(color: kMainTextColor),
                )),
              ],
            ),
                    productListM(subCatList[tabController.index].subcat_id);
                  }),
            ],
            bottom: TabBar(
              controller: tabController,
              tabs: tabs,
              isScrollable: true,
              labelColor: kMainColor,
              unselectedLabelColor: kLightTextColor,
            ),
          ),
        ),
        body: Stack(
          children: [
            Column(
              children: [
                Expanded(
                  flex: 9,
                  child: TabBarView(
                    controller: tabController,
                    children: tabs.map((tab) {
                      return (productList != null amp;amp; productList.length > 0)
                          ? ListView.separated(
                              itemCount: productList.length,
                              itemBuilder: (context, index) {
                                return GestureDetector(
                                  onTap: () {
                                    Navigator.pushNamed(
                                        context, PageRoutes.editItem,
                                        arguments: {
                                          'selectedItem': productList[index],
                                          'currency': curency
                                        }).then((value) {
                                      productListM(
                                          subCatList[tabController.index]
                                              .subcat_id);
                                    });
                                  },
  }
}
 

Комментарии:

1. В pub.dev нет недостатка в пакетах, которые делают именно это.

2. Но я вижу много объяснений о добавлении разбивки на страницы в flutter, но я могу реализовать его только со статическими локальными данными и не могу реализовать его с помощью jsonData

3. В руководствах показаны локальные данные для простоты, а не для того, чтобы показать, что это возможно только таким образом. Нет причин, по которым вы не можете заменить локальный источник данных источником, который извлекает данные JSON из удаленного источника.

4. Я знаю, но я новичок в flutter, поэтому я не могу его реализовать, приведенный выше код — это код страницы, которую загружают продукты, если вы можете отредактировать и написать строки, чтобы с ним работала разбивка на страницы, я буду очень рад и благодарен.