Zenn
🐣

【Flutter】ElevatedButton　浮いてるボタン

に公開
Flutter
tech

ElevatedButtonについて

ElevatedButtonはflutter推奨のボタンwidgetです。
配置したい箇所に、このように記載します

ElevatedButton(
   child: Text('ボタン'),
   onPressed: () {
   print('ボタンが押されました');
                })

ボタンというElevatedButtonを作成し、それがタップされた場合ボタンが押されましたとprintされます。

その他の機能

ボタン内のテキストカラーを変更する

 ElevatedButton(
              onPressed: () {
                print('ボタンが押されました');
              },
              child: Text(
                'ボタン',
+                style: TextStyle(
+                 color: Colors.red,
+                  fontSize: 20,
                ),
              ),
            )

ボタンの背景色を変更する

 ElevatedButton(
              onPressed: () {
                print('ボタンが押されました');
              },
              child: Text(
                'ボタン',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 20,
                ),
              ),
+              style: ElevatedButton.styleFrom(
+                primary: Colors.blue,
              ),
            )

背景を青くする

外枠を追加する

このように追加します

ElevatedButton(
              onPressed: () {
                print('ボタンが押されました');
              },
              child: Text(
                'ボタン',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 20,
                ),
              ),
              style: ElevatedButton.styleFrom(
+                side: BorderSide(
+                  color: Colors.black,
+                  width: 3,
                ),
                primary: Colors.blue,
              ),

他にも様々な機能があります。
必要に応じて更新をしていきます。

Discussion