LoginSignup
1
0

【flutter】よく使うボタン3選

Last updated at Posted at 2023-09-26

こんにちわ!
今回は私がflutterでよく実装するボタンを3選紹介したいと思います!
最後まで見ていただけたら、嬉しいです!

1,ElevatedButton

このボタンは、マテリアルデザインのガイドラインに従ったスタイリッシュな外観を持ち、ユーザーの操作に応じて浮かび上がる("Elevated")エフェクトが付いています。通常、アクションを実行するためのボタンとして使用されます。

使用例

ElevatedButton(
            onPressed: () {},
            child: Text("次のページ",
                style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                    color: Colors.white)),
            style: ElevatedButton.styleFrom(backgroundColor: Colors.green)
              )

スクリーンショット 2023-09-21 12.29.40.png

2,TextButton

TextButton は、ボタンの外観がシンプルで、テキストラベルだけを持つボタンです。一般的に、ユーザーがボタンをタップすると特定のアクションが実行される場合に使用されます。

使用例

TextButton(
          onPressed: () {},
          child: Text(
            "Next_page!",
            style: TextStyle(color: Colors.red)
          )

スクリーンショット 2023-09-21 12.48.25.png

3,IconButton

TextButton は、ボタンの外観がシンプルで、テキストラベルだけを持つボタンです。一般的に、ユーザーがボタンをタップすると特定のアクションが実行される場合に使用されます。

使用例

IconButton(
              onPressed: () {},
              icon: Icon(Icons.directions_car),
              color: Colors.purple,
              iconSize: 50,
            ),

スクリーンショット 2023-09-21 14.29.23.png

終わり

以上でよく使うボタン機能の紹介を終わります!
今回も最後まで見ていただきありがとうございました!
では、また次の記事で〜!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0