Common layout widgets

Flutter has a rich library of layout widgets. Here are a few of those most commonly used. The intent is to get you up and running as quickly as possible, rather than overwhelm you with a complete list.

• Standard widgets.
Container: Adds padding, margins, borders, background color, or other decorations to a widget.
GridView: Lays widgets out as a scrollable grid.
ListView: Lays widgets out as a scrollable list.
Stack: Overlaps a widget on top of another.
• Material widgets.
Card: Organizes related info into a box with rounded corners and a drop shadow.
ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.
• Container.
Many layouts make liberal use of Containers to separate widgets using padding, or to add borders or margins. You can change the device’s background by placing the entire layout into a Container and changing its background color or image.
Summary (Container).
Add padding, margins, borders.
Change background color or image.
Contains a single child widget, but that child can be a Row, Column, or even the root of a widget tree.
Common layout widgets
This layout consists of a column with two rows, each containing 2 images. A Container is used to change the background color of the column to a lighter grey.
Widget _buildImageColumn() => Container(
      decoration: BoxDecoration(
        color: Colors.black26,
      ),
      child: Column(
        children: [
          _buildImageRow(1),
          _buildImageRow(3),
        ],
      ),
    );
Common layout widgets
• GridView.
Use GridView to lay widgets out as a two-dimensional list. GridView provides two pre-fabricated lists, or you can build your own custom grid. When a GridView detects that its contents are too long to fit the render box, it automatically scrolls.

Summary (GridView).

Lays widgets out in a grid.

Detects when the column content exceeds the render box and automatically provides scrolling.

Build your own custom grid, or use one of the provided grids:.

GridView.count allows you to specify the number of columns.

GridView.extent allows you to specify the maximum pixel width of a tile.

Widget _buildGrid() => GridView.extent(
    maxCrossAxisExtent: 150,
    padding: const EdgeInsets.all(4),
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: _buildGridTileList(30));

// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.
// The List.generate() constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) => List.generate(
    count, (i) => Container(child: Image.asset('images/pic$i.jpg')));

• ListView.
A column-like widget, automatically provides scrolling when its content is too long for its render box.
Summary (ListView).
A specialized Column for organizing a list of boxes.
Can be laid out horizontally or vertically.
Detects when its content won’t fit and provides scrolling.
Less configurable than Column, but easier to use and supports scrolling.
Common layout widgets
Uses ListView to display a list of businesses using ListTiles. A Divider separates the theaters from the restaurants.
• Stack.
Use it to arrange widgets on top of a base widget—often an image. The widgets can completely or partially overlap the base widget.

Summary (Stack).

Use for widgets that overlap another widget.

The first widget in the list of children is the base widget; subsequent children are overlaid on top of that base widget.

A Stack’s content can’t scroll.

You can choose to clip children that exceed the render box.

Common layout widgets

Uses Stack to overlay a Container (that displays its Text on a translucent black background) on top of a CircleAvatar. The Stack offsets the text using the alignment property and Alignments.

Widget _buildStack() => Stack(
    alignment: const Alignment(0.6, 0.6),
    children: [
      CircleAvatar(
        backgroundImage: AssetImage('images/pic.jpg'),
        radius: 100,
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.black45,
        ),
        child: Text(
          'Mia B',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    ],
  );

• Card.
In Flutter, a Card features slightly rounded corners and a drop shadow, giving it a 3D effect. Changing a Card’s elevation property allows you to control the drop shadow effect.

Summary (Card).

Implements a Material card.

Used for presenting related nuggets of information.

Accepts a single child, but that child can be a Row, Column, or other widget that holds a list of children.

Displayed with rounded corners and a drop shadow.

A Card’s content can’t scroll.

From the Material library.

Common layout widgets

A Card containing 3 ListTiles and sized by wrapping it with a SizedBox. A Divider separates the first and second ListTiles.

Widget _buildCard() => SizedBox(
    height: 210,
    child: Card(
      child: Column(
        children: [
          ListTile(
            title: Text('1625 Main Street',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('My City, CA 99984'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          Divider(),
          ListTile(
            title: Text('(408) 555-1212',
                style: TextStyle(fontWeight: FontWeight.w500)),
            leading: Icon(
              Icons.contact_phone,
              color: Colors.blue[500],
            ),
          ),
          ListTile(
            title: Text('costa@example.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          ),
        ],
      ),
    ),
  );

• ListTile.
Use ListTile, a specialized row widget from the Material library, for an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. ListTile is most commonly used in Card or ListView, but can be used elsewhere.
Summary (ListTile).
A specialized row that contains up to 3 lines of text and optional icons.
Less configurable than Row, but easier to use.
From the Material library.
Common layout widgets
Uses ListTile to list 3 drop down button types.