FlutterFlow Color & Typography管理

便利機能 Color & Typography管理

久しぶりのFlutterFlowの記事になりました。
年末までずっと開発に没頭し、記事にまとめる気持ちのゆとりがありませんでした。
それと、FlutterFlowに慣れてしまったためか、誰でもすぐに慣れてしまうから使い方の紹介はあまり役に立たないのかなと感じていたところもあります。

しかしながら、便利だけど気が付かずに使いそびれて勿体無い機能などもあるなと思い、自分なりに役に立った機能を紹介してみようと思い、記事にすることにしました。

アプリで使用するColorの管理

アプリで使用する色は、ウィジェットごとに設定できますが、予め定義したものを使うと設定が楽になります。
下記は色の設定の画面ですが、Theme ColorsやCustom Paletteには予め定義したColorを選べるようになっています。

下記から定義できます。左手のメニューの最下部をクリックします。

Project Colorsが表示され、Colorを定義できます。

私はMaterial DesignのCOLOR TOOLを参考にPrimary、Secondary、Tertiaryをそれぞれ3段階で定義しました。
加えてテキスト（Black、White）と背景（White）を定義しました。

色の選択は苦手意識があったので、自動で定義してくれるサイトを活用しました。

定義ができたら1つ1つウィジェットに設定していきます。
私はアプリの型が出来上がってから設定を見直したので、骨が折れる作業でした。
先に決めておくと良いですね。

アプリで使用するTypographyの管理

Colorと同様にTypographyも定義できます。
これも予め定義してから開発を進めていくと手戻りがなくて良いです。

設定はProject Colorの下にあります。

Custom Fontsも設定できるようです。

以上、予め定義してから開発を進めることを強くオススメします。
ぜひご活用ください。