[Flutter/dart] Consideration about design of Card

Cards (Card and ListTile in Flutter) are often used in smartphone apps to organize information. This time I considered about the design of such a card (especially on Android).

By the way, the design before the improvement was like this. It is not cool( ；∀；)

We will make some improvements from here!

Widen Padding

Padding, that is, the margins on the card make a little wider.

Widen the vertical margin

In the above figure, the vertical space between the cards is narrow, so widen it. Let's increase the value of margin.

Narrow the horizontal margin

On the contrary, narrow the margin (or the padding of the parent widget) on the side. There are quite a few apps that have cards that extend to the full width (such as YouTube).

Eliminate shadows and make a difference in color

In the above figure, the shadow is used to make a difference from the background, but remove the shadow and use the background color to distinguish it. Shadow is a property called elevation.

Make letters smaller and thicker

The above uses Google Font's Noto Sans JP, but I feel that the thin lines relative to the size of the characters are the biggest cause of bad design. Try reducing the font size and increasing the Font Weight.

Result

With the above improvements, design looks as follows. It's much better. (In addition, we are also improved AppBar in previous article)

Futher improvements

As a further improvement, add an icon to each card. Make the initial as an icon like gmail. This can be easily done by specifying Text for the child of Circle Avator.

CircleAvatar(
  child: Text(
    item.name.substring(0, 1),  //item.name is string that is displayed
    TextStyle(
      color: Colors.white,
    )
  ),
  backgroundColor: Colors.blue,
);

Now it looks like this. The gorgeousness has increased!

To be honest, I used to be thought that "simple is best", and I didn't put in unnecessary things, but now, I felt that some gorgeousness is important.

Lastly

I feel that the thickness of the letters, shadow and the background have quite large influence.

As with the previous article, please take it as a reference as an opinion of an individual developer who is not a designer.

By the way, the app I posted is "Shopping list app that you don't forget to add to the list" (private).