Layouts in Flutter

Examples (Card)

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

App source: card_and_stack

A Card containing an image and text.

Dart code: cards_demo.dart from the Flutter Gallery

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

Examples (ListTile)

A Card containing 3 ListTiles.

App source: card_and_stack

Uses ListTile to list 3 drop down button types.
Dart code: buttons_demo.dart from the Flutter Gallery

Videos

The following videos, part of the Flutter in Focus series, explain Stateless and Stateful widgets.

Flutter in Focus playlist

Each episode of the Widget of the Week series focuses on a widget. Several of them includes layout widgets.

Flutter Widget of the Week playlist

Other resources

The following resources may help when writing layout code.

• Layout tutorial

  Learn how to build a layout.

• Widget Overview

  Describes many of the widgets available in Flutter.

• HTML/CSS Analogs in Flutter

  For those familiar with web programming, this page maps HTML/CSS functionality to Flutter features.

• Flutter Gallery

  Demo app showcasing many Material Design widgets and other Flutter features.

• Flutter API documentation

  Reference documentation for all of the Flutter libraries.

• Dealing with Box Constraints in Flutter

  Discusses how widgets are constrained by their render boxes.

• Adding Assets and Images in Flutter

  Explains how to add images and other assets to your app’s package.

• Zero to One with Flutter

  One person’s experience writing his first Flutter app.