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

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

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

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

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

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

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

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

# Flutterでアプリのテーマカラーを設定する方法
Flutterでアプリのテーマカラーを設定するときに多く使用されるのは[ThemeData](https://api.flutter.dev/flutter/material/ThemeData-class.html)だと思います。

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

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


```dart:
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色のパターンを設定する必要があります。

※この辺りについては、[こちらの記事](https://backport.net/blog/2019/07/31/flutter_primary_swatch_custom/)を参照させていただきました。この記事がなかったら、何も手付かずで途方に暮れていたと思います。ありがとうございます。

# 実際にやってみた

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

「プログラミングはよくわからないけど、カラーコードなら心得があるゾ」などと思いながらも、実際には記事中にある[サイト](http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5)で指定したい色のカラーコードを割り出しました。

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

```dart:
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が抜けてました」

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

正しくは...

```dart:
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とは何なのか
カラーコードを入力することに夢中で、[前述のサイト](https://backport.net/blog/2019/07/31/flutter_primary_swatch_custom/)のコードにもしっかりと書いてあった
、「カラーコードの前にあるFF」の意味を考えていませんでした。

このFF、透明度を表す16進数だったようでして、FFで100%、つまり不透明ということでした。
※[この記事](https://entabiyori.wordpress.com/2014/07/06/%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%EF%BC%8816%E9%80%B2%E6%95%B0%EF%BC%89%E3%81%A7%E9%80%8F%E6%98%8E%E5%BA%A6%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)や[この記事](https://qiita.com/haneri/items/1b9141aa246d60183e35)で知りました。

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

そのため、正しく色を指定できずに、エラーとなってしまいました。
※[このページ](https://developer.android.com/guide/topics/resources/more-resources#Color)や[この記事](https://coderwall.com/p/dedqca/argb-colors-in-android)が参考になりました。

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

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

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

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

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

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

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

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

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

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

https://apps.apple.com/jp/app/peeps-diary/id1596590396

https://play.google.com/store/apps/details?id=com.error96num.peepsDiary&hl=en-US