Блог

Я реализовал пользовательский просмотр прокрутки, в котором у меня есть сетка SliverGrid, в которой я успешно извлекаю данные с сервера, но мне нужно указать разбивку на страницы здесь, мне нужна некоторая помощь, как этого можно достичь, добавив кнопку и увеличив значения или добавив бесконечный вид прокрутки и выполнив разбивку на страницы. Но как справиться с пользовательским интерфейсом, это тоже моя проблема, так что кто-нибудь может мне помочь в этом.

 @override
  Widget build(BuildContext context) {
    print("Home");
    return WillPopScope(
      onWillPop: exitApp,
      child: Scaffold(
        appBar: AppBar(
          leading: Image.asset('assets/images/ic_logo.png'),
          actions: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: FlatButton.icon(
                onPressed: () {},
                icon: Icon(Icons.location_on),
                label: Text('Mysuru, India'),
                textColor: Colors.white,
              ),
            ),
          ],
        ),
        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: SizedBox(
                child: _search(),
              ),
            ),
            SliverToBoxAdapter(
              child: SizedBox(
                child: FutureBuilder(
                  future: _getCat(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if (snapshot.data == null) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    } else {
                      return Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text('Categories'),
                                GestureDetector(
                                  onTap: (){
                                    Navigator.push(context, MaterialPageRoute(builder: (context) => CategoriesScreen()));
                                  },
                                  child: Text('VIEW ALL >', style: TextStyle(decoration: TextDecoration.underline, color: Colors.redAccent),),
                                )
                              ],
                            ),
                          ),
                          Container(
                            height: 120,
                            child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: snapshot.data.length,
                                itemBuilder: (BuildContext context, int index) {
                                  return Padding(
                                    padding: const EdgeInsets.all(2.0),
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.push(context, MaterialPageRoute(builder: (context) => SubCategoriesScreen(snapshot.data[index].id,snapshot.data[index].title)));
                                      },
                                      child: Container(
                                        width: 100,
                                        child: ListTile(
                                          title: Image.network(
                                            snapshot.data[index].image,
                                            height: 60,
                                            width: 100,
                                          ),
                                          subtitle: Container(
                                              alignment: Alignment.topCenter,
                                              child: Text(
                                                snapshot.data[index].title,
                                                style: TextStyle(fontSize: 10),
                                              )),
                                        ),
                                      ),
                                    ),
                                  );
//                            return Text(snapshot.data[index].id);
                                }),
                          ),
                        ],
                      );
                    }
                  },
                ),
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 250.0,
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 0.0,
                childAspectRatio: 0.7,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      print(data[index]['adid']);
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) =>
                                  ProductDetailsScreen(data[index]['adid'])));
                    },
                    child: Container(
                      margin: EdgeInsets.all(5),
                      decoration:
                          BoxDecoration(border: Border.all(color: Colors.grey)),
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 5,
                              child: Align(
                                alignment: Alignment.center,
                                child: Image.network(
                                  data[index]['adcoverimg'],
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Expanded(
                              flex: 2,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    'u20B9'   data[index]['ads_price'],
                                    style: TextStyle(fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    data[index]['adname'],
                                    style: TextStyle(fontWeight: FontWeight.w500),
                                    maxLines: 1,
                                  ),
                                  Text(
                                    data[index]['addesc'],
                                    maxLines: 1,
                                  ),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: <Widget>[
                                      Icon(
                                        Icons.location_on,
                                        size: 18,
                                      ),
                                      Text(data[index]['ads_location'])
                                    ],
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  );
                },
                childCount: data == null ? 0 : data.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
  

И вот как я извлекаю данные с сервера

 Future<String> getProducts() async {
    String url = Constant.productsUrl;
    Map<String, String> headers = {'Content-Type': 'application/json'};

    final response = await http.get(url, headers: headers);
    setState(() {
      var jsonResponse = json.decode(response.body);
      data = jsonResponse['record'];
    });
  }
  

И это мой URL http://url.com/Web_Api/viewads/startindex/limit/cityname