【Flutter】基本的なボタン3種類とデザインの変更方法 | ヒヨコ プログラミング(ヒヨプロ)

【Flutter】基本的なボタン3種類とデザインの変更方法

Flutter

Flutter で使用できるボタンには、どのようなものがあるか基本的なものを紹介します。また、ボタンのデザインを変更する方法も一緒に紹介します。

基本的なボタンの種類

ボタン表示用 Widget には、基本的なものとして以下の3種類があります。

  • TextButton
  • OutlinedButton
  • ElevatedButton

TextButton

テキストのみのボタンです。

TextButton(
  child: const Text('TextButton'),
  onPressed: () {},
),

OutlinedButton

テキスト+枠線のボタンです。

OutlinedButton(
  child: const Text('OutlinedButton'),
  onPressed: () {},
),

ElevatedButton

背景と影が付いたボタンです。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
),

表示例

各ボタンを表示した例が下図です。

各ボタンの表示例

デザインの変更方法

上で紹介した各ボタンは、色やサイズ等のデザインを変更できます。ここからは、各種デザインの変更方法を紹介します。

カラー変更

テーマカラー

style パラメータに ***Button.styleFrom を指定し、primary に色を指定することで文字色や背景色の変更できます。

TextButton(
  child: const Text('TextButton'),
  onPressed: () {},
  style: TextButton.styleFrom(
    primary: Colors.green,   // 文字色変更
  ),
),

OutlinedButton(
  child: const Text('OutlinedButton'),
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    primary: Colors.green,   // 文字色変更
  ),
),

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.green,     // 背景色変更
    onPrimary: Colors.black,   // 文字色とリップルエフェクトカラーの変更
  ),
),

上記ソースコードの実行例です。

テーマカラーの変更例

タップ中のカラー

style パラメータに ButtonStyle を指定し、以下のソースコードのように記述することで、タップ中の色を変更することができます。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.green;  // タップ中の色
        }
        return Colors.blue;     // 通常の色 
      },
    ),
  ),
),

リップルエフェクトのカラー

ElevatedButton では、文字色を指定しておき、styleFrom の onPrimary に色を指定することで、リップルエフェクトの色だけ変更することもできます。

ElevatedButton(
  child: const Text(
    'ElevatedButton',
    style: TextStyle(color: Colors.white),    // 文字色を固定
  ),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.black,    // リップルエフェクトカラーのみ変更(文字色は固定しているので変更されない)
  ),
),

サイズ変更

最小サイズを指定

***Button.styleFrom の minimumSize で最小サイズを指定することができます。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    minimumSize: const Size(200, 70),
  ),
),

上記ソースコードの実行例です。

サイズの変更例

SizedBox を使用してサイズを指定

ボタン Widget を SizedBox の子要素に指定することで、サイズを指定することができます。

SizedBox(
  width: 200,
  height: 70,
  child: ElevatedButton(
    child: const Text('ElevatedButton'),
    onPressed: () {},
  ),
),

上記ソースコードの実行例です。

サイズの変更例

枠線のカスタマイズ

枠線の色・太さ

***Button.styleFrom の side に BorderSide を指定すると、color で枠線の色、width で枠線の太さを変更できます。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    side: const BorderSide(
      color: Colors.orange,
      width: 5,
    ),
  ),
),

上記ソースコードの実行例です。

枠の色・太さの変更例

枠線の形

***Button.styleFrom の shape で枠線の形を変更することができます。

以下のソースコードのように、StadiumBorder を使用することで、ボタンの左右を円形にすることができます。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: const StadiumBorder(),
  ),
),

上記ソースコードの実行例です。

枠の形の変更例1

また、RoundedRectangleBorder を使用すると角丸のボタンを作成できます。

ElevatedButton(
  child: const Text('ElevatedButton'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
),

上記ソースコードの実行例です。

枠の形の変更例2

まとめ

基本的なボタン表示用 Widget を3種類紹介しました!また、カラー変更やサイズ変更など、ボタンのデザインを変更する方法についても紹介しました!

  • 基本的なボタン表示用 Widget は、以下3種類
    • TextButton
    • OutlinedButton
    • ElevatedButton
  • ボタンの色や形、サイズなどのデザインを変更可能

以上で、【Flutter】基本的なボタン3種類とデザインの変更方法 は終わりです。

コメント

タイトルとURLをコピーしました