Getting rid of extra space above a list in flutter - flutter

Question

Problem: As you can see from the pic at the bottom, there is some extra white space above the grid layout that I don't want. I tried adjusting the alignment inside the container to centerTop but that didn't change anything. I think the problem has to do with Container and Gridview being inside an Expanded widget. Not sure how to go about removing that white space. That orange is from a scroll down event in order to show where the white space is. Any help would be much appreciated! Thank you.
Code:
class MyFavorites extends StatefulWidget {
MyFavorites();
_MyFavorites createState() => _MyFavorites();
}
class _MyFavorites extends State<MyFavorites> {
final FavController fC = Get.put(FavController());
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: colorPalette.chooseColor('offWhite'),
body: Column(
children: [
Spacer(flex: 1),
Expanded(
flex: 2,
child: Row(
children: [
Container(
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.chevron_left),
color: colorPalette.chooseColor('darkGrey'),
),
),
Container(
margin: EdgeInsets.only(left: 23),
alignment: Alignment.centerLeft,
child: Text(
'My Favorites',
style: GoogleFonts.ubuntuCondensed(
color: colorPalette.chooseColor('darkGrey'),
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
],
),
),
Expanded(
flex: 12,
child: Container(
child: GridView.count(
crossAxisCount: 2,
children: List.generate(fC.favItemNamesList.length, (index) {
return Container(
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/empty_image.jpg',
fit: BoxFit.fill,
),
],
),
),
Expanded(
flex: 1,
child: Container(
color: colorPalette.chooseColor('offWhite'),
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.add,
color: colorPalette
.chooseColor('purple'),
),
onPressed: () {},
)),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.edit,
color: colorPalette
.chooseColor('green'),
),
onPressed: () {},
)),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
onPressed: () {},
)),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
color: colorPalette.chooseColor('darkGrey'),
padding: EdgeInsets.only(left: 8),
alignment: Alignment.centerLeft,
child: Obx(
() => Text(fC.favItemNamesList[index],
style: GoogleFonts.ubuntuCondensed(
color: colorPalette
.chooseColor('offWhite'),
fontSize: 13)),
),
),
),
],
),
),
);
}),
),
),
),
],
),
);
}
}
Pic of problem:

Answer 1

Just do it as follows:
remove the first spacer, there is no need for it unless you need the above space. However you can use SafeArea Widget to avoid all the unseen places from the screen automatically if that is what you want.
Remove that container wrapping the grid view
your code should look like:
class MyFavorites extends StatefulWidget {
MyFavorites();
_MyFavorites createState() => _MyFavorites();
}
class _MyFavorites extends State<MyFavorites> {
final FavController fC = Get.put(FavController());
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: colorPalette.chooseColor('offWhite'),
body: Column(
children: [
Expanded(
flex: 2,
child: Row(
children: [
Container(
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.chevron_left),
color: colorPalette.chooseColor('darkGrey'),
),
),
Container(
margin: EdgeInsets.only(left: 23),
alignment: Alignment.centerLeft,
child: Text(
'My Favorites',
style: GoogleFonts.ubuntuCondensed(
color: colorPalette.chooseColor('darkGrey'),
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
],
),
),
Expanded(
flex: 12,
child: GridView.count(
crossAxisCount: 2,
children: List.generate(fC.favItemNamesList.length, (index) {
return Container(
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/empty_image.jpg',
fit: BoxFit.fill,
),
],
),
),
Expanded(
flex: 1,
child: Container(
color: colorPalette.chooseColor('offWhite'),
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.add,
color: colorPalette
.chooseColor('purple'),
),
onPressed: () {},
)),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.edit,
color: colorPalette
.chooseColor('green'),
),
onPressed: () {},
)),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
onPressed: () {},
)),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
color: colorPalette.chooseColor('darkGrey'),
padding: EdgeInsets.only(left: 8),
alignment: Alignment.centerLeft,
child: Obx(
() => Text(fC.favItemNamesList[index],
style: GoogleFonts.ubuntuCondensed(
color: colorPalette
.chooseColor('offWhite'),
fontSize: 13)),
),
),
),
],
),
),
);
}),
),
),
],
),
);
}
}