How cam we place the layouts in flutter at center - android-studio

Question

I want to place the card in the center
here the code
class _HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
var myActivity=["Join Meeting","Create Meeting", "Schedule Meeting","Yet to be decided"];
var myGridView = new GridView.builder(
itemCount: myActivity.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context,int index) {
return new GestureDetector(
child: Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
),
onTap: () {
showDialog(
barrierDismissible: false,
context: context,
child: CupertinoAlertDialog(
content: Text(myActivity[index],),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"))
],
)
);
},
);
},
);
return Scaffold(
body: myGridView,
);
}
}

Answer 1

Two things required to do that first wrap Grid Widget inside Center Widget & give GridView property as shrinkWrap: true,
#override
Widget build(BuildContext context) {
print("In Test Widget");
// TODO: implement build
var myActivity=["Join Meeting","Create Meeting", "Schedule Meeting","Yet to be decided"];
var myGridView = new GridView.builder(
itemCount: myActivity.length,
shrinkWrap: true,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context,int index) {
return new GestureDetector(
child: Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
),
onTap: () {
showDialog(
barrierDismissible: false,
context: context,
child: CupertinoAlertDialog(
content: Text(myActivity[index],),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"))
],
)
);
},
);
},
);
return Scaffold(
body: Center(child: myGridView),
);
}

Answer 2

You can wrap your view(Card) with Row component and set mainAxisAlignment attribute to MainAxisAlignment.center like below.
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
)
],
),

Answer 3

To display the GridView at the center of the screen, you can simply wrap myGridView inside a Center widget like this..
return Scaffold(
body: Center(child: myGridView),
);
You also need to set the GridView's shrinkWrap parameter to true. Otherwise gridView will take up the whole screen and so visually the Center widget will have no effect on its position.

Answer 4

Wrap your layout in a Column() and set MainAxisAlignment to center.
Column(
mainAxisAlignment: MainAxisAlignment.center,
child: <--YOUR EXISTING LAYOUT -->)
It can also center horizontally with crossAxisAlignment.