• 2025/3/19
• 4分

【Flutter/Dart】Buttonの種類と実装方法！ElevatedButtonやIconButtonの違い

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Koala
• Xcode：16.0
• Flutter：3.29.2
• Dart：3.7.2
• Mac M1：Sonoma 14.6.1

FlutterのButton Widgetの種類

Flutterでボタン機能を実装できるButton Widgetは色々な種類が用意されています。今回はそれぞれの特徴や使い方などをまとめていきたいと思います。

• ElevatedButton・・・立体的なデザインのボタン
• TextButton・・・背景なしのシンプルなボタン
• OutlinedButton・・・枠線付きのボタン
• IconButton・・・アイコンのみのボタン
• FloatingActionButton・・・画面上に浮かぶボタン
• GestureDetector / InkWell・・・タップや長押しなどのジェスチャーを検出し、独自のカスタムボタンを作成

ElevatedButton

公式リファレンス：ElevatedButton

「ElevatedButton」は立体的なデザインのボタンです。周りに影がデフォルトで表示されるのでフラットな場所に設置すると視認性の高いボタンになります。記述方法はonPressedにタップ時に実行したいアクションをchildにWidgetを渡します。

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressed');
  },
  child: Text('Elevated Button'),
)

childに渡すのはTextのみでも良いですが、アイコンやカスタムウィジェットも指定可能です。

ElevatedButton(
  onPressed: () {},
  child: Row(
    children: [
      Icon(Icons.add),
      SizedBox(width: 8),
      Text('Add'),
    ],
  ),
)

スタイル(デザイン)を変更する

ボタンのスタイル(デザイン)をカスタマイズしたい場合はstyleにElevatedButton.styleFromで背景色や文字色、影の濃さ、余白、角の丸みなどを調節することが可能です。

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.orange, // 背景色
    foregroundColor: Colors.white,  // 文字色
    elevation: 5,                   // 影の濃さ
    padding: EdgeInsets.symmetric(  // 内側の余白
      horizontal: 20,
      vertical: 12,
    ), 
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // 角の丸み
    ),
  ),
  child: Text('Styled Button'),
)

長押し

ボタンが長押しされた場合の処理はonLongPressに渡せばOKです。

ElevatedButton(
  onPressed: () {},
  onLongPress: () {
    print('Button long pressed');
  },
  child: Text('Long Press Me'),
)

フォーカス制御

ボタンのフォーカスを制御したい場合はfocusNodeにFocusNodeインスタンスを渡します。

FocusNode focusNode = FocusNode();

ElevatedButton(
  onPressed: () {},
  focusNode: focusNode,
  child: Text('Focusable Button'),
)

TextButton

公式リファレンス：TextButton

「TextButton」は背景なしのシンプルなボタンです。記述方法やカスタマイズ方法はElevatedButtonと基本的に変わりません。

TextButton(
  onPressed: () {
    print('TextButton pressed');
  },
  child: Text('Text Button'),
)

OutlinedButton

公式リファレンス：OutlinedButton

「OutlinedButton」は枠線付きのボタンです。記述方法やカスタマイズ方法はElevatedButtonと基本的に変わりません。

OutlinedButton(
  onPressed: () {
    print('OutlinedButton pressed');
  },
  child: Text('Outlined Button'),
)

IconButton

公式リファレンス：IconButton

「IconButton」はアイコンのみのシンプルなボタンです。記述方法やカスタマイズ方法はElevatedButtonと基本的に変わりませんがchildではなくiconでIconを指定します。マテリアルデザインのアイコンがIconsから色々参照できるようになっているので簡単に色々なアイコンを使用することができます。

IconButton(
  onPressed: () {
    print('IconButton pressed');
  },
  icon: Icon(Icons.settings),
)

アイコンのサイズを変えたい場合はiconSizeに値を指定します。

IconButton(
  onPressed: () {
    print('IconButton pressed');
  },
  iconSize: 48,
  icon: Icon(Icons.settings),
)

FloatingActionButton

公式リファレンス：FloatingActionButton

「FloatingActionButton」は画面上に浮かぶボタンです。記述方法やカスタマイズ方法はIconButtonと基本的に変わりません。このボタンは画面の右下などに配置されることが多いデザインになります。

FloatingActionButton(
  onPressed: () {
    print('FloatingActionButton pressed');
  },
  child: Icon(Icons.add),
)

GestureDetector / InkWell

「GestureDetector」と「InkWell」はタップや長押しなどのジェスチャーを検出できるWidgetです。これを使用することでカスタムボタンを作成できますが、それ以外にも用途が色々あるWidgetになります。

GestureDetector(
  onTap: () {
    print('GestureDetector tapped');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text('Custom GestureDetector Button', style: TextStyle(color: Colors.white)),
  ),
)

InkWell(
  onTap: () {
    print('InkWell tapped');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.green,
    child: Text('Custom InkWell Button', style: TextStyle(color: Colors.white)),
  ),
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。