My goal is to populate a gridview where each grid item consists of two row items.
Here is what I am trying to reach (photo made through photoshop):
But what I am getting is this:
The code is returning an error: ‘Incorrect Use of ParentDataWidget’
Code:
return Scaffold(
body: Column(children: [
Card(
color: Theme.of(context).primaryColor,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
child: Icon(
Icons.wb_sunny,
size: 50,
color: color,
),
),
Container(
margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
child: Text(
"73°F",
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.w400,
color: color,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 100,
height: 40,
margin:
EdgeInsets.only(left: 8, top: paddingSize, bottom: 16),
alignment: FractionalOffset.bottomLeft,
child: Text(
"Outside",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: color,
),
),
),
),
],
),
),
Flexible(
child: GridView.count(
scrollDirection: Axis.vertical,
// shrinkWrap: true,
primary: false,
padding: EdgeInsets.all(10),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: generateIgluGridView(), <===== HERE IS WHERE GRIDVIEW EXECUTES
),
),
]),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex:
selectedIndex, // this will be set when a new tab is tapped
onTap: onItemTapped,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: new Icon(Icons.chair),
label: 'Mail',
),
BottomNavigationBarItem(
icon: Icon(
Icons.add_circle,
size: 50,
color: Colors.blue,
),
label: '',
),
BottomNavigationBarItem(
icon: Icon(Icons.app_settings_alt), label: 'Contacts'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Contacts')
],
),
);
generateIgluGridView() {
return List.generate(4, (index) {
return Container(
padding: const EdgeInsets.all(20),
color: Theme.of(context).primaryColor,
child: Expanded(
child: Row(
children: [
Text("HEY"),
Text("Ho"),
],
),
));
});
}
It would also be nice if the text would expand using a Fittedbox to the size of the grid container.
2
Answers
Use Column instead of a Row widget, your grid item code should look like this
Wrap your GridView.count in an Expanded() rather than a Flexible()
In your generateIgluGridView() fn replace Expanded() with a FittedBox(fit: BoxFit.contain)
Replace the Row containing your Text "HEY" and "HO" with a Column
Here’s the code below
See image