I want to generate a grid view using information from a list that is retrieved by an api
How can this be achieved?
Seems like GridView.builder method is meant to allow that but there doesn't seem any explanation for the method
Add a comment
|
2 Answers
Example:
List<Widget> cardsList = [];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Team Kitty'),
),
body: GridView.builder(
itemCount: cardsList.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
//crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),
itemBuilder: (BuildContext context, int index) {
return Container(child: cardsList[index]);
}),
floatingActionButton: new FloatingActionButton(
onPressed: addCard(),
tooltip: 'Add Card',
child: new Icon(Icons.add),
),
);
}
}
Hope that helped!
Comments
Sample with GridView.count()
FutureBuilder<List<dynamic>>(
future: callApi(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return
(snapshot.data.length == 0) ? Container(
alignment: Alignment.center,
child: Text('No data'),
) :
GridView.count(
controller: _scrollController,
crossAxisCount: 2,
padding: EdgeInsets.all(20.0),
crossAxisSpacing: 30.0,
mainAxisSpacing: 23.0,
childAspectRatio: 8.0 / 9.0,
children: itemsList
.map(
(Item) =>
cardView(Item),
).toList(),
);
} else if (snapshot.hasError) {
print("Error : " + snapshot.error.toString());
return Container(
alignment: Alignment.center,
child: Text('No data'),
);
} else {
print('no data');
}
// While the data is being loaded, show a spinner
return
Container(
child: SpinKitChasingDots(
color: primaryRed,
),
);
},
)
Comments
