Ad

How To Constraint The Width Of A GridView Widget In Flutter

- 1 answer

I've been trying for two days to add a fixed width to a Grid View in flutter but I couldn't.

I tried adding width or Box Constraint to a parent container but it didn't work.

I am building a web app so the screen width is often wider than a smartphone's.
this is how I want it to look like:

fixed width for GridView in flutter example

Objective:

constraint the width of the GridView Widget to have a max width of 1000 as an example.

Edit:

if you face any issue with centering the parent container just rap it with a Center widget and that should work

Ad

Answer

Here you can use crossAxisCount property to add no of items in row. Then give the fixed to its child by wrapping it in a container.

  Container(
        width: 100, // HERE YOU CAN ADD THE WIDTH
        child: GridView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: list.length,
            scrollDirection: Axis.vertical,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: 1,
              crossAxisCount: 4, // HERE YOU CAN ADD THE NO OF ITEMS PER LINE
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
            ),
            itemBuilder: _getListItemTile))
Ad
source: stackoverflow.com
Ad