Flutter – Non-scrollable Grid

Issue

Is there a way to build a grid that’s not scrollable in itself and which size is according to its children, the same way we can specify in a row or column mainAxisSize: MainAxisSize.min?

To give you the big picture –

I’m trying to create a responsive layout that depends on the device’s width.
It should be split into 2 parts, connected seamlessly via a column.

1) 2 big containers which sizes depend on the screen width, taking into account a small space in between them. Each container’s width and height will be the same (square containers).

2) Same idea, but instead have 3 rows, each consisting of 3 smaller containers.
This creates a grid. It’s very important though that the grid won’t be scrollable in itself and that its size will be according to its children. It should only be scrolled together with the rest of the page that’s contained in a SingleChildScrollView.

Especially since each container’s height needs to be the same as its width, I was thinking of going with a combination of rows, columns, and LayoutBuilder – they gives me all the capabilities I need.

However, before doing things manually, I was wondering if there’s something that could work out of the box.

Solution

Something like this?

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      Container(
        padding: const EdgeInsets.all(10.0),
        child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          itemCount: 21,
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                border: Border.all(width: 3.0),
              ),
            );
          },
        ),
      ),
    ],
  ),
)

Answered By – janstol

Answer Checked By – Marilyn (FlutterFixes Volunteer)