[Flutter]OutlinedButtonの使い方

どうも、ちょげ(@chogetarou)です。

OutlinedButtonの使い方を解説します。

使い方

OutlinedButtonを使うには、次の２つの引数を指定します。

• onPressed : タップ時の処理
• child : ボタンに表示するウェジェット

onPressedには、タップした時に呼び出される関数を指定します。

また、「child」には、ボタン内に表示したいウェジェットを指定します。

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
),

表示の設定

表示の設定は、引数「style」で行います。

引数「style」には、「OutlinedButton.styleFrom」を指定し、その引数で表示の設定をします。

child: OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.black, //文字色
    backgroundColor: Colors.blue, //背景色
    padding: EdgeInsets.all(20), //パディング
  ),
),

ボタンの無効

ボタンを無効にするには、引数「onPressed」に「null」を指定します。

child: OutlinedButton(
  onPressed: null,
  child: Text('Button'),
),

まとめ

OutlinedButtonを使うには、引数「onPressed」にタップした時に呼び出したい関数、引数「child」にボタンに表示したいウェジェットを指定します。

ボタンの表示を設定するには、引数「style」と「OutlinedButton.styleFrom」を使います。