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