NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. flutter
  3. Flutter ElevatedButtonに枠線をつける

Flutter ElevatedButtonに枠線をつける

Flutter ElevatedButtonに枠線をつける

Flutterで、ElevatedButtonに枠線をつける手順を記述してます。「styleFrom」に「side: BorderSide」を指定するだけで可能です。

目次

環境

  • OS  windows11 pro 64bit
  • Flutter 3.3.1

ElevatedButtonに枠線をつける

ElevatedButtonに枠線をつけるには、「styleFrom」で「side: BorderSide」を設定します。

        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Color.fromARGB(255, 218, 56, 56), //ボタンの背景色
            side: BorderSide(
              color: Colors.black, //枠線
              width: 5, //枠線のサイズ
            ),
          ),
          child: Text(
            "Button",
            style: TextStyle(
              color: Color.fromARGB(255, 255, 255, 255), // ボタンのテキストの色
              fontSize: 12,
            ),
          ),
        ),

これで「ElevatedButton」に枠線が反映されます。