Flutter: 標準テキストの色の指定方法(Theme.ofの指定方法)が分からない

2022/5/2 Flutter エラー・バグ日記 

「Theme.of(context).」を使って、標準テキストにデフォルトで設定されている色の指定方法が分からず、解決に苦労した(エラーやバグの話ではないが、備忘として記録)。

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかは載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

 

テーマの変更(「ThemeData」「primarySwatch」「brightness」の変更)に柔軟に対応するため、極力、文字やWidgetの色は、直接的に指定しないよう心がけている。

 

例えば、押せない状態のボタンのテキストに、「Colors.grey」を設定すると、ダークモードのときには別の色を設定する必要が出てくるが、「Theme.of(context).disabledColor」と設定しておけば、ダークモードのときには自動で反転した色を設定してくれる。

 

今回、ある条件を満たせば、テキストの表示色を「disabledColor」にし、満たさないときは標準テキストのデフォルト色のまま、となるよう設定しようとした。

 

しかし、「Theme.of(context).」と打って、コード補完機能で指定できる色を調べたところ、標準テキスト色を表すようなプロパティは見つけられなかった(プロパティの一覧は、こちらの公式ページに記載がある)。

 

「Theme.of(context).shadowColor」とすれば、黒文字にすることはできるが、ダークモードのときも黒文字になってしまう。。。

 

あまりニーズがないためか、日本語・英語で調べても情報が見つからない。

 

試行錯誤の末、いったん標準テキストのテーマを指定した上で、その「color」プロパティにアクセスする、という方法で実現できた。

 

具体的には、以下のとおり。

 

Theme.of(context).textTheme.bodyText1!.color

 

こちらの公式ページに、「TextTheme」クラスのプロパティ一覧が掲載されており、「bodyText1」が標準テキストのプロパティであることが分かる。

 

こちらのMaterial Designの公式ページにある「Body 1」に相当すると思われる。

 

いったん「textTheme」を経由する方法は、フォントサイズなどにも応用できるので、活用しどころは他にもありそう。

 

\ Flutterの学習で役立ったコンテンツ・書籍 /

 

 

 


Dart入門 – Dartの要点をつかむためのクイックツアー
タイトルとURLをコピーしました