CODEWITHSUNDEEP
android-studioflutterlayout
vaibhav jain
vaibhav jain

Reputation: 11

How cam we place the layouts in flutter at center

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,
    );
  }
}

enter image description here

Upvotes: 1

Views: 52

Answers (4)

Anders M&#248;ller Pedersen
Anders M&#248;ller Pedersen

Reputation: 5

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.

Upvotes: 0

Jigar Patel
Jigar Patel

Reputation: 5423

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.

Upvotes: 0

ilyas ipek
ilyas ipek

Reputation: 217

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]),
            ),
          )
        ],
      ),

Upvotes: 0

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

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),
    );
  }

Upvotes: 1

Related Questions