[Flutter]ElevatedButtonの枠線の設定をする方法

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

ElevatedButtonの枠線の設定をする方法を紹介します。

方法

ElevatedButtonの枠線の設定をするには、「ElevatedButton.styleFrom」を使います。

まず、「ElevatedButton.styleFrom」を「ElevatedButton」の引数「style」に指定します。

そして、「ElevatedButton.styleFrom」の引数「side」に、「BorderSide」クラスを指定します。

後は、指定したBorderSideクラスの引数を使うことで、枠線の設定をすることが出来ます。

ElevatedButton(
  style: ElevatedButton.styleFrom(
    side: BorderSide(
      color: Colors.red, //色
      width: 5, //太さ
    ),
  ),
  onPressed: () {},
  child: Text('Button'),
),

「BorderSide」クラスの引数は、次の３つです。

• color : 枠線の色
• width : 枠線の太さ
• style : 枠線のスタイル。基本的には使わない。

これらの引数を使って、枠線の設定をします。

まとめ

ElevatedButtonの枠線を設定は、ElevatedButton.styleFromの引数「side」に指定する「BorderSide」クラスで行います。