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

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

この記事からわかること

  • Flutter/DartButton実装方法
  • 種類違い
  • ElevatedButtonIconButtonとは?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

FlutterのButton Widgetの種類

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

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

ElevatedButton

公式リファレンス:ElevatedButton

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

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

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

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

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

ボタンのスタイル(デザイン)をカスタマイズしたい場合はstyleElevatedButton.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'),
)

フォーカス制御

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

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ではなくiconIconを指定します。マテリアルデザインのアイコンが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),
)
Flutterとは?インストール〜開発環境構築までの手順!プロジェクト作成

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)),
  ),
)
機能 GestureDetector InkWell
タップイベント
リップルエフェクト(※)
※ ボタンが押されたようなUIエフェクト
長押し (onLongPress)
ダブルタップ (onDoubleTap)
ドラッグ・スワイプ対応

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index