How to center grid button inside red container

Question

I want to center all grid button inside red container but it is showing big space at bottom of red container..how to solve this

Widget build(BuildContext context) {
return Center(
  child: Container(
  color: Colors.red,
  height: MediaQuery.of(context).size.height*0.60,
  width: MediaQuery.of(context).size.height*0.60,

  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView.builder(
      itemCount: 16,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemBuilder: (context,index)=>
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(child: Center(child: Text(index.toString(),)),color: Colors.blue,),
          )
      ,),
  ),

  ),
);

}

Answer 1

You can do it like this :

     Center(
          child: Container(
            color: Colors.red,
            height: MediaQuery.of(context).size.height * 0.60,
            width: MediaQuery.of(context).size.height * 0.60,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column( // column
                mainAxisAlignment: MainAxisAlignment.center, // center
                children: [
                  Container( // if you don't have this container, there is an error
                    height: MediaQuery.of(context).size.height * 0.50, // new height
                    width: MediaQuery.of(context).size.height * 0.50, // new width
                    color: Colors.green,
                    child: GridView.builder(
                      padding: const EdgeInsets.all(0.0), // delete all padding from grid
                      itemCount: 20, // more items to scroll
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
                      ),
                      itemBuilder: (context, index) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          child: Center(
                              child: Text(
                            index.toString(),
                          )),
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
       )

Enclose your Grid inside a Column to allow it to be centered, because if you don't do it I can't find another way to center it because the Grid is dynamic in height and could not be centered.

And with this, you delete the big space in the red container

Answer 2

Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Colors.red,
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.height,
    child: Center(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 0.6,
        child: GridView.builder(
          padding: EdgeInsets.all(16),
          itemCount: 16,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: Center(
                  child: Text(
                index.toString(),
              )),
              color: Colors.blue,
            ),
          ),
        ),
      ),
    ),
  ),
);

}

You can wrap the gridview.builder inside a sized box ( provided some height ) and wrap it under Center widget.