ElevatedButtonは、マテリアルデザインに基づいた、RaisedButtonの代替として導入されたWidgetです。RaisedButtonは、ボタンの表面に立体感を出すことができるが、マテリアルデザインにおいては、この表現方法は適切ではないとされています。そこで、RaisedButtonに代わって、ElevatedButtonが登場したのです。
ElevatedButtonは、RaisedButtonよりもよりシンプルで、より自然な見た目を持ちます。RaisedButtonは影を使って立体感を出していましたが、ElevatedButtonは、背景色の変化を使ってボタンを浮かび上がらせます。また、ボタンの角が丸みを帯びたデザインになっています。
ElevatedButtonの使い方
ElevatedButtonは、Materialパッケージに含まれているため、import文を追加する必要があります。
import 'package:flutter/material.dart';ElevatedButtonを作成するには、以下のように記述します。
ElevatedButton(
onPressed: () {
// ボタンがタップされたときの処理
},
child: Text('ボタン'),
)onPressedには、ボタンがタップされたときに実行する処理を指定します。childには、ボタンのテキストを指定します。テキスト以外のWidgetをボタンにすることもできます。
ElevatedButtonの背景色を変更するには、styleプロパティを指定します。ElevatedButton.styleFrom()メソッドを使うことで、簡単にボタンのスタイルを変更することができます。
ElevatedButton(
onPressed: () {
// ボタンがタップされたときの処理
},
child: Text('ボタン'),
style: ElevatedButton.styleFrom(
primary: Colors.blue, // ボタンの背景色を青にする
onPrimary: Colors.white, // テキストの色を白にする
),
)上記の例では、primaryで背景色を指定し、onPrimaryでテキストの色を指定しています。他にも、ボタンの形状や影の大きさなどを変更することができます。
また、ボタンの有効/無効状態を切り替えるには、onPressedにnullを指定します。有効/無効状態を切り替えるときは、`onPressed`の値を変更するだけでOKです。
サンプルコード
最後に、ElevatedButtonのサンプルコードを紹介します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ElevatedButtonサンプル',
home: Scaffold(
appBar: AppBar(
title: Text('ElevatedButtonサンプル'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// ボタンがタップされたときの処理
print('ボタンがタップされました');
},
child: Text('ボタン'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // ボタンの背景色を青にする
foregroundColor: Colors.white, // テキストの色を白にする
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // ボタンの角を丸くする
),
),
),
),
),
);
}
}上記のコードでは、ElevatedButtonを使って、中央にボタンを配置しています。ボタンがタップされたときには、print()関数を使ってコンソールにメッセージを表示するようにしています。また、styleFrom()メソッドを使って、ボタンの背景色、テキストの色、角の丸みなどを設定しています。
まとめ
以上が、FlutterのElevatedButtonについての使い方の解説です。ElevatedButtonは、RaisedButtonよりも自然な見た目を持ち、マテリアルデザインに準拠したボタンを作るのに最適です。ぜひ、お試しください。