Creating a simple GridView in flutter

During studying flutter, I learned a beautiful and simple grid system. These interesting and simple grid view layout topics I would like to share you today.

Ever created with a multiple layout with multiple rows within a column?

Try a GridView! While there are multiple GridView constructors, the most common way to create a GridView is the count constructor.

GridView.count(
..
..
)

Start by listing all the items you want in the grid,

GridView.count(
children: [allItems],
)

but it doesn’t end there, control how many items you want to across the grid, by setting the crossAxisCount property.

GridView.count(
crossAxisCount: 1,
children: [allItems],
)

Setting it to 1 makes it look like a normal list. And if your items want to some social distancing? Use mainAxisSpacing gives horizontal space between the rows and crossAxisSpacing provides vertical space between the columns.

GridView.count(
mainAxisSpacing: 28.0,
crossAxisCount: 2,
children: [allItems],
)

Now Let’s make simple grid view using GridView.count constructor.

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text("He'd have you all unravel at the"),
      color: Colors.teal[100],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Heed not the rabble'),
      color: Colors.teal[200],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Sound of screams but the'),
      color: Colors.teal[300],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Who scream'),
      color: Colors.teal[400],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution is coming...'),
      color: Colors.teal[500],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution, they...'),
      color: Colors.teal[600],
    ),
  ],
)

The result is!

By Ami