Search code examples
flutterlayoutalignment

Center content inside Flutter Gridview

I've been trying to center the content of a GridView in Flutter but I'm really running out of ideas and can't get it to work...

Screenshot of the GridView

I want to center the content of the GridView inside white white container, but it always aligns right at the top of the container/GridView item.

Here are the codes:

Gridview

body: SafeArea(
    child: Container(
      width: double.infinity,
      child: GridView.count(
        // childAspectRatio: ,
        crossAxisCount: _orientationRows,
        children: <Widget>[
          Container(
            width: double.infinity,
            height: double.infinity,
            child: Center(
              child: MaterialButton(
                child: MainIconBotton(
                  imageURL: "assets/icons/video.png",
                  label: "mainIcon.mp4".tr(),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ScreenVideo()),
                  );
                },
              ),
            ),
          ), 
/// (and so on)

MainIcon Widget (= content of a Gridview item)

return Container(
  margin: EdgeInsets.all(7),
  padding: EdgeInsets.all(9),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15), color: Colors.white),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Expanded(
          flex: 2,
          child: Image.asset(
            imageURL,
          )),
      SizedBox(
        height: 5,
      ),
      Expanded(
        child: Text(
          label,
          textAlign: TextAlign.center,
          softWrap: true,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
          ),
        ),
      )
    ],
  ),
);

I hope someone can help - thank you so much in advance! Chris

Solution

  • take a column tag instead of the center in the gridview.

    body: SafeArea(
child: Container(
  width: double.infinity,
  child: GridView.count(
    // childAspectRatio: ,
    crossAxisCount: _orientationRows,
    children: <Widget>[
      Container(
        width: double.infinity,
        height: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
          children:[MaterialButton(
            child: MainIconBotton(
              imageURL: "assets/icons/video.png",
              label: "mainIcon.mp4".tr(),
            ),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ScreenVideo()),
              );
            },
          )]
        ),
      ),