Flutter Series: 3D Component Card in Material

Introduction

In addition to general components, flutter also provides two styles of special components. In the Material style, there is a Card component, which can easily draw a card-style interface, and also has rounded corners and shadows, which is very It's easy to use, let's take a look.

Card details

Before explaining Card in detail, let's consider when will Card be used?

When it comes to Card, everyone's first impression is a business card, which describes a person's relevant information, such as name, phone number, and email address. A Card is a component that presents a set of related information together.

Let's take a look at the definition of Card:

 class Card extends StatelessWidget

It can be seen that Card is a stateless Widget. The constructor of Card needs to pass in more parameters. The following is the constructor of Card:

 const Card({
    Key? key,
    this.color,
    this.shadowColor,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })

color represents the background color of the Card. If it is not set, the color specified in ThemeData.cardTheme will be used. If CardTheme.color is also empty, ThemeData.cardColor will be used instead.

shadowColor represents the color of the Card shadow. If it is not set, the shadowColor of ThemeData.cardTheme will be used instead. If CardTheme.shadowColor is also empty, ThemeData.shadowColor will be used instead.

The elevation is the position of the Card on the Z axis. By setting this value, we can control the size of the shadow under the Card.

shape is the shape of the Card, it is a ShapeBorder object, there are many known implementations, such as CircleBorder, RoundedRectangleBorder, ContinuousRectangleBorder, BeveledRectangleBorder, etc.

borderOnForeground indicates whether to display the border of the Card before the child.

clipBehavior is the clipping rule for Card. margin is the white space around the card.

semanticContainer is a bool value, indicating whether the children in the Card have the same semantic, or their types are the same.

The last parameter is child, which represents the child element in the Card. Although there is only one child in Card, this child can be a widget that can contain multiple children, such as Row or Column.

Card usage

Through the above explanation, we also have a basic understanding of the use of Card. Next, we can use a specific example to see how Card is used.

Although Card contains a child widget, which can be any value, it is usually used with Column or Row.

Here we use Column to create a business card-like interface.

There is a children property in Column, which can contain multiple child elements. We can put pictures or text in each row. If we want to make complex layouts, we can freely make complex combinations.

But for common applications like business cards, flutter has already thought about it for us, so he provides a component called ListTile.

ListTile is a fixed height Row and can contain a leading icon or trailing icon. It can also include title, subtitle and some click interactions, which is very convenient.

For the specific use of ListTile, you can refer to the specific API, so I won't talk too much about it here.

Here we just borrow ListTile to construct the effect we need.

Different ListTile components can be divided by Divider to make the interface more beautiful.

Here is the code for our CardApp:

 class CardApp extends StatelessWidget{
  const CardApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 210,
      child: Card(
        child: Column(
          children: [
            const ListTile(
              title: Text(
                'Han MeiMei',
                style: TextStyle(fontWeight: FontWeight.w500),
              ),
              subtitle: Text('上海，张江'),
              leading: SizedBox(
                width: 20,
                child:Center(
                    child: CircleAvatar(
                      backgroundImage: AssetImage('images/head.jpg'),
                      radius: 10,
                    ))
              ),
            ),
            const Divider(),
            ListTile(
              title: const Text(
                '18888888888',
                style: TextStyle(fontWeight: FontWeight.w500),
              ),
              leading: Icon(
                Icons.contact_phone,
                color: Colors.blue[500],
              ),
            ),
            ListTile(
              title: const Text('[e-mail]'),
              leading: Icon(
                Icons.contact_mail,
                color: Colors.blue[500],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Put the CardApp in the Scaffold body to run, you can get the following interface:

You can see that the bottom of the Card has an obvious 3D effect. Here we use three ListTiles, the first of which contains both the title and subTtile properties.

The first two ListTiles are divided by Divider, which is very easy to use.

Summarize

The above is the use of Card in flutter. You can combine ListTile to build a more beautiful and complex system.

For more information, please refer to www.flydean.com

The most popular interpretation, the most profound dry goods, the most concise tutorials, and many tricks you don't know are waiting for you to discover!

Welcome to pay attention to my official account: "Program those things", understand technology, understand you better!