リリースされて、はや数ヶ月。関係性に着目して解説していきたいと思います。3のカラーシステムって複雑でよくわからない...」そんな風に思っている方はぜひ最後まで読んでみてください。当たり前ですがFlutterはMaterialテーマに最適な形でコーディングされています。基本理念そもそも、なぜデザインシステムが必要なのでしょうか。適当に決めてしまえば良いのでは?そんな風に思う方も中にはいらっしゃるのではないでしょうか。そこまでは思わずとも、なぜこんなものが必要なのでしょうか。「ユーザーが使いやすいアプリを、いかに効率良く作るか」に尽きると思います。使いやすい、と言う言葉はUX観点の言葉ですが多くの意味を含んでいます。こんなのって明らかに見にくいじゃないですか。ならないように気をつけながら全てのコンポーネントを個別スタイリングしますか?めんどくさすぎますね。そこで登場するのがデザインシステムです。ColorSchemeクラスです。似ていると思っています。言う色で着色する様に実装しておきますね。あとはこれらの色を指定してください。」とこう言うわけです。4.5:14.5対1。何の数字かわかりますか?わかる方はこのセクションは飛ばしてしまってOKです。これは、「背景色と上に載せる色のコントラスト比がこの数値以上であれば視認性が良いですよ」と言う値になります。あいうえおは以下のような比率になります。4.5:1を大きく下回りとても視認性が悪いと言うことになります。次に、あいうえおは以下の様な比率になります。こちらは高スコアですね。計算はこちらのサイトで行っております。実際に指定する際は、この比率を守る様にしてくださいね。Tertiaryアプリを特徴付ける色合いに用いられます。以下の様な役割があります。アプリのメインカラー。ブランドイメージを表現し、最も頻繁に使用する色。Primaryを補完するアクセントカラー。Primaryとのコントラストで視覚的なメリハリをつける。PrimaryやSecondaryとは異なるニュアンスを持つカラー。UI要素のバリエーションを増やしたり、特定の要素を強調したりする際に使用する。ErrorErrorカラーは、ユーザーにエラー状態を明確に伝えるための色です。カラーを使用してエラーメッセージの背景色やテキストの色を変更することで、ユーザーはエラーに気づきやすくなります。エラーを示すアイコンの色をErrorカラーにすることで、視覚的な注意を促すことができます。SurfaceSurfaceカラーは、マテリアルデザインにおけるUIの「面」となる要素の背景色として使用されます。ベースに決定されます。背景色もSurfaceカラーを使用することで、UI全体に統一感を持たせることができます。OutlineOutlineカラーは、ボタンの枠線やテキストフィールドの輪郭の様な、要素の輪郭を表現するための色です。外枠を表示するために使います。装飾系の言葉は、これ単体では存在せず、必ず上記の様な登場人物の接尾辞として登場します。カラーは、塗りの色に使われます。)を乗せる時に利用します。テキストやアイコンに使ってはいけません。Highestは反対色になります。onErrorContainer...何らかの色の接頭辞として付きます。その色に載せるコンポーネントを表示するために適切な色を提供します。上に載せるコンポーネントの色です。強調された色調を提供します。どちらも変わらず同じ色な所も注意です。この対応関係が存在します。使って落ち着かせたりすると言った事が可能になります。)と同様の箇所に利用するが、少しだけ色調を変更したい時に利用します。定義する、と言った事が可能になります。参考https://m3.material.io/styles/color/roles最後にいかがでしたか?一度で覚える必要はないとは思いますが、割と単語の意味を考えたりすると分かりやすかったかもしれませんね。まとめていこうと思っているので興味のある方はぜひちらっと覗いて行って見てください。導入までの手順を解説してみたいと思います。こちらに関しては、本当にいろんな方から意見をいただきありがたい限りです。勉強になったので、今後ブログ記事にしようかと思っています。出た時の対処法Flutterを開発していて、iOS実機ビルドしようとした際に掲題のエラーが発生しました。解決までの道のりを備忘録的に示していこうと思います。全文は以下に記しています。様な要件が出てくると思います。そんなときにどうやって判定すれば良いかを解説したいと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Gitクライアント】Flutterコードのdiffを100倍見やすくするたった3秒で出来る設定を紹介!2020.08.312021.04.17【Flutter】riverpod_lintを試してみた2023.02.14【Flutter】3ステップで超簡単!google_ml_kitで顔検出をしよう2021.07.31【Flutter】もしかしたら最高のSharedPreferencesの使い方を思いついてしまったかもしれないので公開する2020.09.022021.03.20【Flutter】Alfredと連携して開発を爆速で進める【無料版も可】2020.05.272020.05.27スポンサーリンクフォローお待ちしております!この記事やサイトが気に入ってくださった方はぜひTwitterをフォローしてください。今後も技術情報を中心に様々な情報をお届けします。【Flutter】3.24がリリースされたので内容について解説してみたよ2024.08.092024.08.10【コピペでOK!】c++のループ内でvectorの要素の削除2015.01.082020.06.05【freezed】required?optional?unknownEnum?な人に丁寧に解説してみた2021.12.062021.12.06【git】mergeコミットのrevertを試してみた。ついてサクッと説明するよ2024.03.252024.09.05【初心者必見!】FlutterのProviderでSelectorについて解説してみたよ2020.05.30【Flutter】2.10.0に対応するためにしたこと2022.02.04スポンサーリンクフォローお待ちしております!この記事やサイトが気に入ってくださった方はぜひTwitterをフォローしてください。今後も技術情報を中心に様々な情報をお届けします。coffeeタイトルとURLをコピーしました。