Flutter Layout Basics - Card

Flutter Layout Basics - Card#

Card is a layout that resembles a card with rounded corners and shadows. It is commonly used to display associated information, such as album information, coordinates, contact information, etc.

Using Card#

Let's see how to create a common list element widget. It consists of an icon on the left, a title above it, a description, and a button at the bottom, commonly seen in order lists.

The desired result is as follows:

Now let's see how to implement it:

ListTile#

First, let's introduce ListTile, a fixed-height widget provided by Flutter that displays an icon and text on the left or right side.

It can achieve the following effect:

Here's the code:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListTile View'),
        ),
        body: ListView(
          children: [
            Card(
              child: ListTile(
                title: Text('One-line ListTile'),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('One-line with leading widget'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('One-Line with trailing widget'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('One-line with both widgets'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('One-line dense ListTile'),
                dense: true,
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(
                  size: 56.0,
                ),
                title: Text('Two-line listTile'),
                subtitle: Text('Here is a second line'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('Three-line ListTile'),
                subtitle:
                    Text('A sufficiently long subtitle warrants three lines'),
                trailing: Icon(Icons.more_vert),
                isThreeLine: true,
              ),
            )
          ],
        ),
      ),
    );
  }
}

The above code demonstrates the usage of ListTile and covers various scenarios.

Now let's take a look at the initial desired result, which can be divided into the following basic components:

The icon, title, and description on the right can be achieved using ListTile. The single button at the bottom can be implemented using TextButton (which will be explained later, but for now, you can use Text). The two buttons can be horizontally aligned using Row. The vertical layout of ListTile and Row can be achieved using Column. Finally, wrap them all in a Card. Therefore, the final code is as follows:


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Card View';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Card View',
        home: Scaffold(
          appBar: new AppBar(title: new Text(_title)),
          body: const MyStatelessWidget(),
        ));
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          children: [
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('The Enchanted Nightingale'),
              subtitle: Text('Music by Julie Gable, Lyrics By Sidney Stenic'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(onPressed: () {}, child: Text('BUY TICKETS')),
                SizedBox(
                  width: 8,
                ),
                TextButton(onPressed: () {}, child: const Text('LISTEN')),
                SizedBox(width: 8),
              ],
            )
          ],
          mainAxisSize: MainAxisSize.min,
        ),
      ),
    );
  }
}

The final result will be the same as the desired result shown above. Note the usage of Card, which is usually combined with other collection widgets such as Column or Row to achieve the desired layout.

References#

Card Dev Doc
ListTile Dev Doc
Flutter Free Video Season 3 - Layout