この記事は、Flutter大学 Advent Calendar 2021の 22日目の記事です。

技術記事初投稿で至らぬ部分もあるかと思いますが、ご笑覧ください。

はじめに

プログラミングまったく未経験の状態でFlutter大学に入ってすぐ、共同開発というものに参加させていただきました。

ほとんどプログラミングができない中で参加した共同開発では、UIのデザインだったりアイコン作成だったり、UI文言の翻訳などのプログラミング以外の部分を担当してました。

そんな中でも初学者の私でもできそうなタスクとして、
「アプリのテーマカラーを設定する」というタスクをいただきました。

結果としてはアプリのテーマカラーをうまく設定できず、エラーが出てしまいました。

この記事では、その原因についてまとめてみたいと思います。

Flutterでアプリのテーマカラーを設定する方法

Flutterでアプリのテーマカラーを設定するときに多く使用されるのはThemeDataだと思います。

primarySwatchで色を指定すると、アプリ全体の色がMaterial Designに準拠したいい感じの色に変更できます。
ので、特にこだわりがなければこのprimarySwatchから色指定してしまうのがいいかと思います。

Flutterのデフォルトのカウンターアプリにも、primarySwatchが設定されていますね。

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

primarySwatch: Colors.blue, の"blue"の部分を他の色に変えることで、アプリ全体の色を簡単に変更できます。

Material Colorではない色を設定したい場合

primarySwatchからはMaterial Designに準拠したMaterial Colorを設定できますが、独自の色を設定したい場合には、自分でMaterial Colorを定義する必要があります。

Material Colorはある一色を指しているのではなく、Material Designで定義されている10色のパターン（パレットというそうです）を指しています。

そのため、自分が設定したい色を中心とした10色のパターンを設定する必要があります。

※この辺りについては、こちらの記事を参照させていただきました。この記事がなかったら、何も手付かずで途方に暮れていたと思います。ありがとうございます。

実際にやってみた

今回の共同開発では独自のアプリカラーを設定したいということで、上記の記事を参考に、独自カラーを設定していきました。

「プログラミングはよくわからないけど、カラーコードなら心得があるゾ」などと思いながらも、実際には記事中にあるサイトで指定したい色のカラーコードを割り出しました。

そして出てきたコードをサイトにコードのものと置き換えて完成！

const MaterialColor customSwatch = const MaterialColor(
  0x23580C,
  <int, Color>{
    50: Color(0xE5EBE2),
    100: Color(0xBDCDB6),
    200: Color(0x91AC86),
    300: Color(0x658A55),
    400: Color(0x447130),
    500: Color(0x23580C),
    600: Color(0x1F500A),
    700: Color(0x1A4708),
    800: Color(0x153D06),
    900: Color(0x0C2D03),
  },
);

...のつもりでしたが、エラーが出てしまいました。

結局自分では解決できずに、共同開発のリーダーに泣きついたところ、

「カラーコードの前のFFが抜けてました」

との回答をいただきました。

正しくは...

const MaterialColor customSwatch = const MaterialColor(
  0xFF23580C,
  <int, Color>{
    50: Color(0xFFE5EBE2),
    100: Color(0xFFBDCDB6),
    200: Color(0xFF91AC86),
    300: Color(0xFF658A55),
    400: Color(0xFF447130),
    500: Color(0xFF23580C),
    600: Color(0xFF1F500A),
    700: Color(0xFF1A4708),
    800: Color(0xFF153D06),
    900: Color(0xFF0C2D03),
  },
);

だったようです。

FFとは何なのか

カラーコードを入力することに夢中で、前述のサイトのコードにもしっかりと書いてあった
、「カラーコードの前にあるFF」の意味を考えていませんでした。

このFF、透明度を表す16進数だったようでして、FFで100%、つまり不透明ということでした。
※この記事やこの記事で知りました。

というのも、カラーコードを普通のRGBで考えてしまっていたのですが、この場合では、16進数のARGBを用いる必要がありました。

そのため、正しく色を指定できずに、エラーとなってしまいました。
※このページやこの記事が参考になりました。

「プログラミングはよくわからないけど、カラーコードなら心得があるゾ」なんて言っていましたが、知っていると思い込んでいただけで、正しく理解をしていなかったということでした。

教訓

Flutterでのプログラミングを始めて「Flutter難しいな」なんて思っていましたが、私がつまずいた箇所はFlutter以前の問題でした。

RGBAは見かけることはありましたが、Material Designでは（Androidでは?）ARGBを使うということは今回初めて知りました。

Flutterでアプリを作っていくにしても、Material DesignなどFlutterという枠を超えて色々学ぶ必要があるなと思いました。

逆に独自の色を設定しないでprimarySwatchで指定できる色で済ませられるのであれば、それらの知識がなくとも気軽に色を指定できる、という見方もできます。

プログラミング初学者、知らないことばかりで手が止まってしまいそうですが「とりあえずできること」を一つ一つ積み上げていきたいと思います。

最後に

こんな超初学者の私にも、タスクを振って、親切に教えてくださった共同開発のメンバーや、共同開発というアプリ制作の場を提供してくださったFlutter大学のコミュニティには感謝しています。

今度は私が何かしら貢献していけるよう、頑張ります。

最後の最後に

私が参加した共同開発で作ったアプリがリリースされました！

SNSが生活の一部に、オンラインが当たり前になった今、人と会う時間も今まで以上に大切にするための日記アプリです。
使っていただけたら嬉しいです！

【Flutter】初学者がFlutterでアプリのテーマカラーを設定しようとして出したエラーが、Flutter以前の話だった