[Flutter]ElevatedButtonの使用方法

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

ElevatedButtonの使用方法を紹介します。

方法

最低限

ElevatedButtonを使用するには、最低でも次の２つの引数を使います。

• child: ボタン内に表示するウェジェット
• onPressed：ボタンを押した時の処理

まず、ElevatedButtonの引数「child」には、ボタン内に表示するウェジェットを指定します。

例えば、ボタン内に「Button」というテキストを表示したいならば、「Text(‘Button’)」を指定します。

ElevatedButton(
    child: Text('Button'), //ボタン内に表示するウェジェット
)

そして、引数「onPressed」には、ボタンを押したときに呼び出す関数を指定します。

引数「 onPressed」に指定する関数には、引数なしで{}内にボタンを押した時の処理を指定します。

ElevatedButton(
  onPressed: () {
    //タップした時の処理
  },
  child: Text('Button'),
),

引数「child」と引数「onPressed」の指定をすれば、ElevatedButtonを使うことが出来ます。

細かい設定

ElevatedButtonの色やサイズなどの細かい設定は、引数「style」でします。

具体的には、ElevatedButtonの引数「style」にElevatedButton.styleFromを指定します。

styleFromの引数で、色やサイズを指定します。

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: buttonColor, //ボタンの色
    fixedSize: Size(横幅, 高さ), //ボタンのサイズ
    ~~~細かい設定~~~~
  ),
  onPressed: () {
    //タップ処理
  },
  child: Text('Button'),
),

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.red,
              fixedSize: Size(200, 50),
              elevation: 10,
            ),
            onPressed: () {
              print("Button Tap");
            },
            child: Text('Button'),
          ),
        ),
      ),
    );
  }