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

スマホアプリを作成する上でデザインを良くすることは避けては通れない道ですよね。

今回は、Androidアプリの、特にAppBarのデザインについて考えてみたいと思います。

色は白 or 背景色

flutterのデフォルト設定だとAppBarはメインカラーでべた塗されます。でも、1番見せたいのはAppBarの下のコンテンツの方ですよね。

ということで、AppBarの色は白 or 背景色とするのが良いかと思います。

有名どころのアプリでも白や背景と同色の場合が多いです。

これについてはこちらの記事でも詳しく書かれていました。

AppBarの色はMaterialAppのthemeで変えられます。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(

      primaryColor: MyStyle.colorMain, //メインカラー 別ファイルで定義
      buttonColor: MyStyle.colorMain,
      appBarTheme: AppBarTheme( //ここ！
        color: Colors.white,
        iconTheme: IconThemeData(
            color: MyStyle.colorMain
        ),
        textTheme: TextTheme(
          headline6: MyWidget.customTextStyle(
            TextStyle(
              color: Colors.black,
              fontSize: 20
            )
          )
        ),
        elevation: 1
      ),
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),

アイコンの色はiconThemeで、文字の色はtextThemeで変えられるので適宜調整しましょう。

右のほうがコンテンツに集中できると思いませんか？

AppBarの下の影を小さく

上記の例を見てもらえれば分かりますが、AppBarとその下のコンテンツとの境目は無かったり、あっても細い線だったりする場合が多いです。

この境目の影はelevationというプロパティで設定できますが（上記コード参照）、デフォルトだと4が入ります。個人的にはこれは大き過ぎな気がします。

左：elevation:4　右：elevation:1

些細な違いですが、右のほうが洗練されている気がしませんか？？

タイトルいるか？

これは実は僕のなかでも答えが出ていないのですが、AppBarのタイトルなくてもよくないか？と思うことがあります。

BottomNavigationにも同じこと書いてありますし、なくても見れば分かるじゃんっていう場合も多いです。

特に、下のコンテンツが華やか or スペースを取る場合は、AppBarも背景色と同じ、文字無しにして余白を確保してしまってもいい気もします。

ちなみにPintarestはタイトルなし、インスタはBottomNavigationに文字無しですね（上記例参照）。まあでもタイトルは普通に書いてるアプリが多いですね。

あと、メインページのタイトルはアプリ名やアイコン画像を載せるアプリは多いです（インスタ、ツイッターなど）。

結論

色は白 or 背景色、elevationは小さく or なし

最後に

デザイナでもなんでもない個人開発者の意見です、、、

ちなみに、例として挙げたアプリは「リストに追加することを忘れない買い物リストアプリ」です。