[Flutter]TextButtonで文字色を変更する方法(初心者向け解説)

Flutter(フラッター)のバージョンが2.0になってから、背景なしのボタンである「FlatButton」が「TextButton」に変更されました。

ところが、この「TextButton」を使うと、文字色がデフォルトで画面のテーマと合致しない色合いになってしまうようです。

この場合は、以下の要領で「ButtonStyle」を使って文字色を変更することができます。

この「ButtonStyle」で設定している「MaterialStateProperty」というのは、ユーザーがボタンを操作している状態(ホバー、フォーカス、クリック等)を格納しているプロパティで、「MaterialStateProperty.all」にすると、全ての状態を示すことになります。

blank

このように、Flutter2.0以降ボタンの標準となった「ElevatedButton」「FlatButton」にある「ButtonStyle」では、「MaterialStateProperty」を使って、ボタンの状態に応じて装飾に変化を施すことができるようになったという意味で、「RaisedButton」「FlatButton」よりも進化しているようです。

(詳しくは、以下の動画で解説していますので、よろしければ御覧ください)

こんな記事も読まれています

おすすめコンテンツ




Flutter(フラッター)


みんプロ作成アプリ




TOP