Flutterで使えるボタンウィジェットの紹介

2023年5月20日

Flutterでは様々なボタンウィジェットが提供されており、アプリケーションのUIを簡単に構築できます。

この記事では、Flutterで使える基本的なボタンウィジェットからカスタムボタンまで、その種類と使い方を解説していきます。

Flutterで使えるボタンウィジェットの概要

Flutterでは、様々なボタンウィジェットが提供されており、それぞれの用途やデザインに応じて選択することができます。主に使用されるボタンウィジェットには、ElevatedButton、TextButton、OutlinedButtonなどがあります。これらのボタンは、Material Designのガイドラインに従ってデザインされており、簡単に見た目や挙動をカスタマイズすることができます。

また、Flutterではカスタムボタンウィジェットを作成することも可能です。これにより、アプリケーション独自のデザインや挙動を持つボタンを実装することができます。

本記事では、基本的なボタンウィジェットの使い方から、カスタムボタンの作成方法、アイコン付きボタンやアニメーションを実装する方法まで、幅広く解説していきます。

基本的なボタンウィジェット

ElevatedButtonの使い方

ElevatedButtonは、Material Designのガイドラインに従った、影を持つ立体的なボタンウィジェットです。主にアプリケーション内で優先度の高いアクションに使用されます。ElevatedButtonの基本的な使い方は以下の通りです。

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('ボタンのテキスト'),
)

ElevatedButtonは、onPressedコールバックを指定することで、ボタンが押された時の挙動を定義できます。また、childプロパティには、ボタンに表示するウィジェットを指定します。

ElevatedButtonの見た目や挙動は、styleプロパティを用いてカスタマイズできます。例えば、以下のようにElevatedButton.styleFromメソッドを使用して、ボタンの色や形状を変更することができます。

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('カスタムボタン'),
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // ボタンの背景色を指定
    onPrimary: Colors.white, // ボタンのテキスト色を指定
    shape: RoundedRectangleBorder( // ボタンの形状を指定
      borderRadius: BorderRadius.circular(30.0),
    ),
  ),
)

このように、ElevatedButtonはシンプルかつ柔軟なカスタマイズが可能で、多くのシチュエーションで活用できるボタンウィジェットです。

TextButtonの使い方

TextButtonは、Material Designのガイドラインに従った、フラットなデザインのボタンウィジェットです。通常のテキストのような見た目を持ち、軽量なアクションに使用されます。TextButtonの基本的な使い方は以下の通りです。

TextButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('ボタンのテキスト'),
)

TextButtonもElevatedButtonと同様に、onPressedコールバックを指定してボタンが押された時の挙動を定義し、childプロパティに表示するウィジェットを指定します。

TextButtonのスタイルは、styleプロパティを使用してカスタマイズできます。例えば、以下のようにTextButton.styleFromメソッドを使用して、ボタンの色や形状を変更することができます。

TextButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('カスタムボタン'),
  style: TextButton.styleFrom(
    primary: Colors.blue, // ボタンのテキスト色を指定
    backgroundColor: Colors.yellow, // ボタンの背景色を指定
    shape: RoundedRectangleBorder( // ボタンの形状を指定
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
)

TextButtonは、シンプルな見た目でありながら、スタイルのカスタマイズが容易にできるため、さまざまな場面で活用できるボタンウィジェットです。

OutlinedButtonの使い方

OutlinedButtonは、Material Designのガイドラインに基づいた、枠線のあるボタンウィジェットです。OutlinedButtonの基本的な使い方は以下の通りです。

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('ボタンのテキスト'),
)

OutlinedButtonもElevatedButtonやTextButtonと同様に、onPressedコールバックを指定してボタンが押された時の挙動を定義し、childプロパティに表示するウィジェットを指定します。

OutlinedButtonのスタイルは、styleプロパティを使用してカスタマイズできます。例えば、以下のようにOutlinedButton.styleFromメソッドを使用して、ボタンの色や形状を変更することができます。

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理を記述
  },
  child: Text('カスタムボタン'),
  style: OutlinedButton.styleFrom(
    primary: Colors.red, // ボタンのテキスト色を指定
    backgroundColor: Colors.green, // ボタンの背景色を指定
    side: BorderSide(color: Colors.blue, width: 2.0), // 枠線の色と太さを指定
    shape: RoundedRectangleBorder( // ボタンの形状を指定
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
)

OutlinedButtonは、枠線が特徴的なデザインでありながら、スタイルのカスタマイズが容易にできるため、さまざまな場面で活用できるボタンウィジェットです。

カスタムボタンウィジェット

自作ボタンウィジェットの作り方

Flutterでは、独自のカスタムボタンウィジェットを作成することも可能です。ここでは、自作ボタンウィジェットの基本的な作り方を紹介します。

StatelessWidgetを継承したクラスを作成します。

class CustomButton extends StatelessWidget {
  // コンストラクタを定義
  // 必要なプロパティを追加（例：onPressed, labelText）

  @override
  Widget build(BuildContext context) {
    // ボタンのスタイルを設定
  }
}

コンストラクタで必要なプロパティを定義し、引数で受け取ります。例えば、ボタンが押されたときの処理を指定するonPressedや、ボタンに表示するテキストを受け取るlabelTextなどです。

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String labelText;

  CustomButton({required this.onPressed, required this.labelText});
  // ...
}

buildメソッド内で、任意のウィジェット（例：Container、GestureDetector、InkWellなど）を使ってボタンの見た目や挙動を定義します。

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String labelText;

  CustomButton({required this.onPressed, required this.labelText});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          color: Colors.blue,
        ),
        child: Text(
          labelText,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

このようにして作成したCustomButtonは、他のボタンウィジェットと同様に使用することができます。

CustomButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  labelText: 'カスタムボタン',
)

カスタムボタンウィジェットを作成することで、アプリケーション全体で一貫したデザインのボタンを簡単に利用できるようになります。また、必要に応じてカスタムボタンに機能を追加することも可能です。

既存のボタンウィジェットをカスタマイズする方法

Flutterでは、既存のボタンウィジェットをカスタマイズして、独自のスタイルや挙動を実現することができます。ここでは、ElevatedButtonを例に、既存のボタンウィジェットをカスタマイズする方法を紹介します。

ElevatedButtonのstyleプロパティを使って、ボタンのスタイルをカスタマイズします。

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('カスタムスタイル'),
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // ボタンの背景色
    onPrimary: Colors.white, // ボタン内テキストの色
    elevation: 5, // ボタンの影の大きさ
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ), // ボタンの角丸設定
    padding: EdgeInsets.all(16), // ボタンの内側の余白
  ),
)

ElevatedButton.styleFromを使って、一部のスタイルを上書きしながら、アプリケーション全体で共通のスタイルを適用することもできます。

final customButtonStyle = ElevatedButton.styleFrom(
  primary: Colors.blue,
  onPrimary: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  padding: EdgeInsets.all(16),
);

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('カスタムスタイル1'),
  style: customButtonStyle,
)

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('カスタムスタイル2'),
  style: customButtonStyle.copyWith(
    primary: MaterialStateProperty.resolveWith<Color>((states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey;
      }
      return Colors.green;
    }),
  ),
)

カスタマイズ方法はTextButtonやOutlinedButtonでも同様に適用できます。これらの手法を活用して、アプリケーション全体で一貫したデザインのボタンを簡単に利用できます。また、ボタンウィジェットの外観や挙動を必要に応じて変更することも可能です。

ボタンウィジェットの応用

アイコン付きボタンの作成

Flutterでは、アイコン付きのボタンを作成することができます。アイコンを含めることで、ボタンの機能を視覚的に伝えることができ、ユーザー体験を向上させます。ここでは、ElevatedButtonを例に、アイコン付きのボタンを作成する方法を紹介します。

ボタンの作成

ElevatedButton.iconの代わりに、TextButton.iconやOutlinedButton.iconを使用することで、それぞれのボタンタイプのアイコン付きボタンを作成することができます。

ElevatedButton.icon(
  onPressed: () {
    // ボタンが押された時の処理
  },
  icon: Icon(Icons.favorite), // アイコンを指定
  label: Text('いいね'), // テキストを指定
)

アイコンのカスタマイズ

アイコンの色やサイズをカスタマイズすることも可能です。

ElevatedButton.icon(
  onPressed: () {
    // ボタンが押された時の処理
  },
  icon: Icon(
    Icons.favorite,
    color: Colors.red, // アイコンの色を指定
    size: 24, // アイコンのサイズを指定
  ),
  label: Text('いいね'),
)

カスタムアイコンウィジェットを使用する

Flutterのアイコンウィジェット以外にも、独自に作成したアイコンウィジェットを使用することができます。

class CustomIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      child: Center(child: Text('C')),
    );
  }
}

// 使用例
ElevatedButton.icon(
  onPressed: () {
    // ボタンが押された時の処理
  },
  icon: CustomIcon(), // カスタムアイコンを指定
  label: Text('カスタムアイコン'),
)

ボタンにアニメーションを追加する方法

Flutterでは、ボタンにアニメーションを追加することで、ユーザーの視覚的なフィードバックを向上させることができます。以下では、InkWellウィジェットを使ってボタンにアニメーションを追加する方法を紹介します。

InkWellウィジェットの使用

InkWellは、マテリアルデザインのインクスプラッシュアニメーションを追加できるウィジェットです。これを使って、ボタンにアニメーションを追加することができます。

InkWell(
  onTap: () {
    // ボタンが押された時の処理
  },
  child: Container(
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text(
      'InkWell Button',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

InkWellのカスタマイズ

InkWellウィジェットは、さまざまなプロパティをカスタマイズすることができます。

InkWell(
  onTap: () {
    // ボタンが押された時の処理
  },
  onLongPress: () {
    // ボタンが長押しされた時の処理
  },
  splashColor: Colors.red, // スプラッシュアニメーションの色を設定
  borderRadius: BorderRadius.circular(8), // スプラッシュアニメーションの角丸を設定
  child: Container(
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text(
      'InkWell Button',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

AnimatedButtonを使用する

また、FlutterにはAnimatedButtonというウィジェットも用意されており、これを使って簡単にアニメーションを追加することもできます。

AnimatedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('Animated Button'),
)

レスポンシブなボタンデザインの実装

レスポンシブデザインは、さまざまなデバイスや画面サイズに対応するために非常に重要です。Flutterを使ってレスポンシブなボタンデザインを実装する方法を以下で紹介します。

MediaQueryを使用したデバイスの幅・高さ取得

レスポンシブなデザインを実現するためには、デバイスの幅や高さを取得することが重要です。これには、MediaQueryウィジェットを使用します。

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

レスポンシブなボタンサイズの計算

デバイスの幅や高さに基づいて、ボタンサイズを計算します。以下の例では、デバイスの幅に応じてボタンの幅を変更しています。

double buttonWidth = screenWidth * 0.6; // デバイス幅の60%をボタン幅に設定

レスポンシブなボタンの作成

計算したボタンサイズを使用して、レスポンシブなボタンを作成します。

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('Responsive Button'),
  style: ElevatedButton.styleFrom(
    minimumSize: Size(buttonWidth, 50), // ボタンの最小サイズを設定
  ),
)

ブレークポイントを利用したデザイン変更

ブレークポイントを定義して、特定のデバイスサイズに応じてデザインを変更することもできます。

double buttonWidth;

if (screenWidth < 600) {
  buttonWidth = screenWidth * 0.8; // デバイス幅が600未満の場合、ボタン幅を80%に設定
} else {
  buttonWidth = screenWidth * 0.6; // デバイス幅が600以上の場合、ボタン幅を60%に設定
}

この方法で、デバイスや画面サイズに応じたレスポンシブなボタンデザインを実現できます。