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

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.

Answer 2

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