Shuichi-Yのブログ

Profile

Shuichi-Y

フォローする

Calendar

Keyword Search

▼キーワード検索

カテゴリ未分類

(0)

LED Photos

(73)

Comments

Shuichi-Y @ Re[1]:flutterでアプリの作成…？（初めての Flutter アプリ…）(01/22) akiさんへコメントありがとうございます…

aki@ Re:flutterでアプリの作成…？（初めての Flutter アプリ…）(01/22) この様な書込大変失礼致します。日本も当…

Shuichi-Y @ Re[1]:Unityでゲームを作成❓（リアルタイム 3D アニメーションでストーリーを伝えよう…）(11/06) 中川和弘@クライスハイム203号室さんへ …

Shuichi-Y @ Re[1]:Unityでゲームを作成❓（リアルタイム 3D アニメーションでストーリーを伝えよう…）(11/06) P-Quoraさんへ有り難うございます… m(__…

中川和弘@クライスハイム203号室@ Re:Unityでゲームを作成❓（リアルタイム 3D アニメーションでストーリーを伝えよう…）(11/06) 11月12日に宇宙科学研究所で全員滅多刺し…

< 新しい記事

新着記事一覧(全582件)

過去の記事 >

2024.01.16

flutterでアプリの作成…？（初めての Flutter アプリ…）

カテゴリ： Flutter実践入門…

テーマとスタイルを設定する
カードがもっと目立つように、もっと豊かな色で塗りつぶします。一貫したカラーパターンを維持するのは常によいことですから、アプリの Theme を使用して色を選びます。
BigCard の build() メソッドに次の変更を加えます。

final theme = Theme.of(context); // ← Add this.

color: theme.colorScheme.primary, // ← And also this.

上記の 2 行では、いろいろな処理を行っています。
1 行目では、Theme.of(context) でアプリの現在のテーマをリクエストしています。
2 行目では、カードの色をテーマの colorScheme プロパティと同じになるよう定義しています。カラーパターンには多数の色が含まれていますが、primary がこのアプリの最も目立つ特徴的な色です。
これで、カードはアプリのプライマリカラーで塗りつぶされます。
MyApp までスクロールし、そこで ColorScheme のシード色を変更すると、この色とアプリ全体のカラーパターンを変更できます。
ヒント: Flutter の Colors クラスには、Colors.deepOrange や Colors.red など、厳選された色のパレットに簡単にアクセスするための手段が用意されています。もちろん、任意の色を選択することもできます。たとえば、完全に不透明で純粋な緑色を定義するには、Color.fromRGBO(0, 255, 0, 1.0) を使用します。16 進数をお好みなら、Color(0xFF00FF00) という書き方もあります。
色がスムーズなアニメーションで変化しています。これを暗黙的アニメーションと呼びます。多くの Flutter ウィジェットでは、UI を状態から状態へジャンプさせるのではなく、値と値の間を滑らかに補間します。
カードの下の浮き上がりボタンの色も変化しています。これが、値をハードコードするのではなく、アプリ全体が対象の Theme を使用するメリットです。
TextTheme

// ↓ Add this.
final style = theme.textTheme.displayMedium!.copyWith(
color: theme.colorScheme.onPrimary,
);

// ↓ Change this line.
child: Text(pair.asLowerCase, style: style),

theme.textTheme, を使用して、アプリのフォントテーマにアクセスします。このクラスには、bodyMedium（中サイズの標準テキスト用）、caption（画像のキャプション用）、headlineLarge（大きな見出し用）などのメンバーがあります。
displayMedium プロパティは、ディスプレイテキスト用の大きなスタイルです。ここで「ディスプレイ」という単語は、ディスプレイ書体（見出し書体）などのタイポグラフィでの意味で使用されています。displayMedium のドキュメントには「ディスプレイスタイルは短く、重要なテキストにのみ使用します」と書かれており、まさに我々のユースケースです。
理論上、テーマの displayMedium プロパティは null にすることもできますが、このアプリの記述に使用している Dart というプログラミング言語は null 安全なので、null になる可能性のあるオブジェクトのメソッドは呼び出せません。この場合、! 演算子（感嘆符演算子）を使い、承知のうえで行っているということを Dart に対して保証できます（この場合に displayMedium が null でないことは確実です。断定できる理由は、この Codelab の範囲外です）。
displayMedium の copyWith() を呼び出すと、定義した変更が反映されたテキストスタイルのコピーが返されます。この場合は、テキストの色のみを変更しています。
新しい色を取得するために、再びアプリのテーマにアクセスしています。カラーパターンの onPrimary プロパティには、アプリのプライマリカラーに使用するのに適した色が定義されています。
難しいです…　動作していなければ諦めています…
気が向いたら、さらにカードを変更しましょう。
出来ませんね…