【Flutter】ボタンのグレーアウト（無効/Disable）表示

Flutter

2022.05.062020.02.01

Flutterの各種ボタンウィジェットクラスにはボタンの有効/無効に関するプロパティが無いのですが、対応は簡単なので、ボタンをグレーアウト（無効/Disable）表示にする方法について解説します。

ボタンをグレーアウト（無効/Disable）表示にする方法

各種ボタンウィジェットクラスの onPressed プロパティで null を返すように書くとボタンがグレーアウト表示になります。

以下、RaisedButton で _isEnabled が false なら null を返してボタンをグレーアウト、true なら何か処理する感じのコード例です。

bool _isEnabled = false;

// 〜

RaisedButton(
  child: Text('Button'),
  onPressed:  !_isEnabled ? null : () {
    // 何かEnableの時の処理
  },
),

null を返すだけなので当然何も実行されません。そういう仕組みですね。

各種ボタンの Disable と Enable の見た目はこんな感じ。（一番下はIconButton）

各種ボタンを含む material library のドキュメントはこちら：