リファレンス
Reference

立体的なボタンを表示する

URLをコピーする Twitterでシェアする Facebookでシェアする

ElevatedButton を使って、立体的なボタンを表示します。

立体的なボタンの表示

ElevatedButton は、影の付いた立体的なボタンを表示するための Widget です。

押下したときの動作 onPressed または onLongPress、中身の要素 child が必須の引数となります。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {
        // ボタンが押されたときに発動される処理
      },
      onLongPressed: () {
        // ボタンが長押しされたときに発動される処理
      },
      child: Text('立体的なボタンの ElevatedButton'),
    ),
  ],
),

具体的な使用例

ElevatedButton は、以下のような用途で使用するときに役立ちます。

立体的な文字ボタンを使った計測アプリ

// 合計値 sum の変数を定義して、0 を代入(初期化)する。
var sum = 0;

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text(
      sum.toString(), // 変数 sum を文字列に変換
    ),
    Row(
      children: [
        ElevatedButton(
          onPressed: () {
            // sum の値から 1 引いて、画面に反映させる。
            setState(() {
              sum -= 1; // -> sum = sum - 1;
            });
          },
          child: Text('引く'),
        ),
        ElevatedButton(
          onPressed: () {
            // sum の値から 1 足して、画面に反映させる。
            setState(() {
              sum += 1; // -> sum = sum + 1;
            });
          },
          child: Text('足す'),
        ),
      ],
    ),
  ],
);

アイコン付きの立体的な文字ボタンの導入

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton.icon(
      onPressed: () {
        // ボタンが押されたときに発動される処理
      },
      icon: Icon(Icons.play_arrow),
      label: Text('PLAY'),
    ),
    ElevatedButton.icon(
      onPressed: () {
        // ボタンが押されたときに発動される処理
      },
      icon: Icon(Icons.stop),
      label: Text('STOP'),
    ),
    ElevatedButton.icon(
      onPressed: () {
        // ボタンが押されたときに発動される処理
      },
      icon: Icon(Icons.add_to_photos),
      label: Text('SAVE'),
    ),
    ElevatedButton.icon(
      onPressed: () {
        // ボタンが押されたときに発動される処理
      },
      icon: Icon(Icons.live_help_rounded),
      label: Text('HELP'),
    ),
  ],
),

RaisedButton から ElevatedButton への切替推奨

ElevatedButton は、2020 年 10 月にリリースされた Flutter バージョン 1.22 から新しく導入されたボタンです。

それ以前には、類似した機能を持っていたボタン RaisedButton があります。

こちらの RaisedButton は将来的に廃止される予定です。Flutter 公式チームが推奨するように、 ElevateButton を使いましょう。

上記の画像を見てみると、外見上のデフォルトのメインカラーが変わっていることが分かります。

それ以外で主な変更点として挙げられるのは、 Button のデザインを変える方法が大きく変わったことです。

以下では、ElevatedButton のデザインが変える方法を例をあげて触れてみます。

ElevatedButton のデザインを変える

デフォルトの ElevatedButton のデザインに手を加えて、好みのボタンに変更してみましょう。

ElevatedButton の デザインを変更する方法は、 ButtonStyle クラスで行います。

ここでは、 ElevatedButton のプロパティ style に引数として ButtonStyle を渡して設定していきます。

ボタンの背景色を変える

ElevatedButton には、ボタンのデザイン調整をする style プロパティがあります。

このプロパティに、 ElevatedButtonstyleFrom を渡します。

そして、この styleFrom メソッド内で、ボタンの背景色を設定する backgroudcolor プロパティに好きな色を渡してあげるだけです。

以下では、例としてデフォルトの色以外に、 3 つの異なる背景色を持ったボタンを設置してみます。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text(
        'default',
      ),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroudcolor: Colors.red,
      ),
      onPressed: () {},
      child: Text(
        'red',
      ),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroudcolor: Colors.teal,
      ),
      onPressed: () {},
      child: Text(
        'teal',
      ),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.black,
      ),
      onPressed: () {},
      child: Text(
        'black',
      ),
    ),
  ],
),

ボタンに浮いているようなエフェクトを加える

もう一つ、ボタンのデザインを簡単に変更できる styleFrom メソッドを使った例を挙げます。

この例では、ボタンの背景に見える影の大きさを拡大して、ボタンがより浮いているように見せるエフェクトを加えます。

使うプロパティは、 elevation です。例えば、この elevation に渡す値を 10 に設定しましょう。

また、違いが分かりやすいようにするため、 shadowColor プロパティを使って影の色を赤色に変えます。

すると、以下のようなエフェクトがついたボタンが設置できます。

elevation プロパティのデフォルト値は 2 に設定されています。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text(
        'デフォルト',
      ),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        elevation: 10,
        shadowColor: Colors.red,
      ),
      onPressed: () {},
      child: Text(
        '浮いているようなボタン',
      ),
    ),
  ],
),

参考リンク