How to Center GridView Component - flutter

Question

Hello I new to Flutter and I am having an issue on centering the components of my icons anyone can suggest the correct way to center the dashboard icons.I am still trying to fix it but if you could provide some pointers for me that would be great. I have tried putting it row to row but the issue still same also padding on the Widget that I created
Widget build(BuildContext context){
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return new Stack(children: <Widget>[
new Container(color: Colors.blue,),
new Scaffold(
appBar: AppBar(
title: Text("Welcome"),
centerTitle: true,
),
drawer: MenuComponent(),
backgroundColor: Colors.transparent,
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.topCenter,
child: Padding(
padding: EdgeInsets.all(10.0),
child: SizedBox(
height: 50,
width: 130,
child:new Text('One', style: new TextStyle(fontWeight: FontWeight.bold, fontSize: _width/15, color: Colors.white),),
),
),
)
),
new Divider(height: _height/30,color: Colors.white,),
],
),
Expanded(
child: Center(
child: GridView.count(
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
crossAxisCount: 4,
children: <Widget>[
homePageRowCell(Icons.account_circle, "My Account",context,HomePage()),
homePageRowCell(Icons.dashboard, "Home page",context, HomePage()),
homePageRowCell(Icons.person_outline, "Profile",context, ProfilePage()),
homePageRowCell(Icons.settings, "Settings",context, Settings()),
homePageRowCell(Icons.exit_to_app, "Logout",context, LoginPage()),
],
),
)
)
],
),
),
)
],);
// return Scaffold(
// appBar: AppBar(
// title: Text("Home Page"),
// centerTitle: true,
// ),
// drawer: MenuComponent(),
// );
}
}
Widget homePageRowCell(var sIcon, String title, BuildContext context, var page) => new Container(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page)
);
},
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
new Icon(sIcon,color: Colors.white,),
new Text(title,style: new TextStyle(color: Colors.white, fontWeight: FontWeight.normal)),
],
),
],
),
)
);

Answer 1

Please try below code and check output
#override
Widget build(BuildContext context) {
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return new Stack(
children: <Widget>[
new Container(
color: Colors.blue,
),
new Scaffold(
appBar: AppBar(
title: Text("Welcome"),
centerTitle: true,
),
drawer: MenuComponent(),
backgroundColor: Colors.transparent,
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.topCenter,
child: Padding(
padding: EdgeInsets.all(10.0),
child: SizedBox(
height: 50,
width: 130,
child: new Text(
'One',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: _width / 15,
color: Colors.white),
),
),
),
)),
new Divider(
height: _height / 30,
color: Colors.white,
),
],
),
Expanded(
child: Center(
child: GridView.count(
crossAxisCount: 4,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
children: <Widget>[
homePageRowCell(Icons.account_circle, "My Account",
context, HomePage()),
homePageRowCell(
Icons.dashboard, "Home page", context, HomePage()),
homePageRowCell(Icons.person_outline, "Profile", context,
ProfilePage()),
homePageRowCell(
Icons.settings, "Settings", context, Settings()),
homePageRowCell(
Icons.exit_to_app, "Logout", context, LoginPage()),
],
),
))
],
),
),
)
],
);
// return Scaffold(
// appBar: AppBar(
// title: Text("Home Page"),
// centerTitle: true,
// ),
// drawer: MenuComponent(),
// );
}
Widget homePageRowCell(
var sIcon, String title, BuildContext context, var page) =>
new Container(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => page));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
new Icon(
sIcon,
color: Colors.white,
),
new Text(title,
style: new TextStyle(
color: Colors.white, fontWeight: FontWeight.normal)),
],
),
],
),
));