Pagination inside a CustomScrollView - Flutter - json

Question

I have implemented a CustomScrollview in which i have the SliverGrid whereI'm successfully fetching the data from the server, but i need to provide the pagination over here, i need some assistance as how can acheive that whether by adding a button and incrementing the values or by adding an infinite scroll view and doing the pagination. But how to deal with the UI too is my problem here, so can any one assist me on this.
#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,
),
),
],
),
),
);
}
And this is how I'm fetching the data from the server
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'];
});
}
And this is my URL http://url.com/Web_Api/viewads/startindex/limit/cityname