The Card

The Card is a Material Design component[24] used to visually group together (or separate) widgets.

You can use it as part of the overall layout of an app or inside lists or grids.

For example, this code:

 GridView.builder(
  padding: EdgeInsets.all(20.0),
 
  itemCount: 15,
 
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
  crossAxisSpacing: 50.0,
  mainAxisSpacing: 100.0,
  ),
  itemBuilder: (context, i) => Card(
  child: Center(
  child: Text(​"​​${i+1}​​"​),
  ),
  ),
 ),

nicely shows the space available for each GridView tile on those settings:

images/WidgetLayout/CardGrid.png

But a Card is used really often inside ListViews.

An example ...

Get Programming Flutter now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.