top of page

[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).

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page