Flutter app using pagewise package and JSON - json

Question

I am building an APP using pagewise package and would like to get the totalCount var from an external JSON request.
I have a function that returns an INT value that will be the totalCount but when added to the totalCount parameter it returns an error:
type 'Future<int>' is not a subtype of type 'int'
How can I solve this matter?
UPDATE:
return PagewiseGridView(
pageSize: 6,
totalCount: getTotals(),
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
childAspectRatio: 0.555,
padding: EdgeInsets.all(15.0),
itemBuilder: this._itemBuilder,
pageFuture: BackendService.getPage,
);
this is the class that creates the grid.

Answer 1

The problem is that you can't pass a future to a variable that expects an int.
You need to await for the future to complete and while you are awaiting you could, for instance, display a centered circular indicator.
This is something that you could use in your State class:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
State createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _totalCounter = -1;
#override
void initState() {
super.initState();
getTotalCounter();
}
void getTotalCounter() async {
_totalCounter = await getTotals();
setState(() {});
}
// Simulate your future
Future<int> getTotals() {
return Future.delayed(Duration(seconds: 3), () => 100);
}
#override
Widget build(BuildContext context) {
return _totalCounter == -1
? Center(child: CircularProgressIndicator())
: PagewiseGridView(
pageSize: 6,
totalCount: _totalCounter,
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
childAspectRatio: 0.555,
padding: EdgeInsets.all(15.0),
itemBuilder: this._itemBuilder,
pageFuture: BackendService.getPage,
);
}
}

Answer 2

From the dart documentation:
A future is a Future object, which represents an asynchronous operation that produces a result of type T.
In your case it is something you need access the info after it was retrieved async.
// Performing a request
// ... some widget
// ... child/Center is here just to exemplify how to use this Future inside a widget
// child: Center(child:
FutureBuilder<CustomList>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// USE HERE THE DATA:
// snapshot.data.allCustoms
// snapshot.data.allCustoms.length
// for example you can create a ListView here
enter code here
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
})
// Making a request example (called above)
Future<CustomList> fetchPost() async {
final response = await http
.get('https://some_api_example');
if (response.statusCode == 200) {
// was successful, parse
return CustomList.fromJson(json.decode(response.body));
} else {
// not successful, throw.
throw Exception('Failed to load post');
}
}
// Some custom object we need to parse
class Custom {
final String id;
final String info;
Custom({this.id, this.info});
factory Custom.fromJson(Map<String, dynamic> json) {
return Custom(
id: json['id'].replaceAll(" ", ""),
info: json['info'].replaceAll(" ", "")
);
}
}
// A list of custom objects we parse from the reqeust
class CustomList {
final List<Custom> allCustoms;
CustomsList({
this.allCustoms,
});
factory CustomList.fromJson(List<dynamic> parsedJson) {
allCustoms = new List<Custom>();
allCustoms = parsedJson.map((i) => Custom.fromJson(i)).toList();
return new CustomList(
allCustoms: allCustoms,
);
}
}

Answer 3

Could you please try the following code and let me know what error are you getting.
return FutureBuilder<CustomList>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return PagewiseGridView(
pageSize: 6,
totalCount: snapshot.data,
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
childAspectRatio: 0.555,
padding: EdgeInsets.all(15.0),
itemBuilder: this._itemBuilder,
pageFuture: BackendService.getPage,
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
})