Question

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.