[Flutter/dart] Cardのデザインを考える

スマホアプリでは情報をひとまとめにするのにカード（FlutterではCardやListTile）がよく使われます。今回はそんなカードのデザインについて（特にAndroidにおいて）考えてみました。

ちなみに改善する前のデザインはこんな感じでした。なんかめっちゃ芋っぽいですね( ；∀；)

ここからいくつか改善していきます！

Paddingを広く

padding、つまりカード内の余白はすこし広めに取りましょう。

縦のmarginを広く

上図だとカード間の縦の間隔が狭いので広げます。marginの値を大きくしましょう。

横のmarginを狭く

逆に横のmargin（もしくは親Widgetのpadding）は狭めましょう。カードが横幅いっぱいまで広がっているアプリも結構あります（YouTubeとか）。

影をなくして、色で差をつける

上図では影で背景との差分をつけていますが、影はなくして、代わりに背景色をつけて区別をつけます。影はelevationというプロパティです。

文字を小さく、太く

上記はGoogle FontのNoto Sans JPを使っていますが、文字の大きさに対して線が細いのが芋っぽさの最大の原因な気がします。フォントサイズを小さくし、FontWeightを太くしてみましょう。

iosの場合はヒラギノ角ゴというフォントが使えるのであまり気になりません。

結果

以上の改善で以下のようになりました。だいぶマシになりましたね。（なお前回のAppBarの改善も同時にしています）

さらに改善

さらなる改善として、各カードにアイコンを追加しましょう。gmailのように頭文字をアイコンにします。これはCircleAvatorのchildにTextを指定することで簡単にできます。

CircleAvatar(
  child: Text(
    item.name.substring(0, 1),  //item.nameがtitleの文字列
    TextStyle(
      color: Colors.white,
    )
  ),
  backgroundColor: Colors.blue,
);

これで以下のようになりました。華やかさが増しましたね！

正直、これまではシンプルイズベスト、無駄なものは入れない主義だったのですが、こう見ると多少の華は重要だなぁと感じました。

最後に

文字の太さと影、背景がだいぶ大きかった気がします。

前回同様あくまでデザイナでもない個人開発者の意見として参考程度にお受け止めください。

ちなみに載せたアプリは「リストに追加するのを忘れない買い物リストアプリ」（非公開）です。