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 プロパティがあります。
このプロパティに、 ElevatedButton の styleFrom を渡します。
そして、この styleFrom メソッド内で、ボタンの背景色を設定する primary プロパティに好きな色を渡してあげるだけです。
以下では、例としてデフォルトの色以外に、 3 つの異なる背景色を持ったボタンを設置してみます。
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: Text(
'default',
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () {},
child: Text(
'red',
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: 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(
'浮いているようなボタン',
),
),
],
),
