TextButton を使って、文字ボタンを表示します。
文字ボタンの表示
TextButton は、シンプルな文字ボタンを表示するための Widget です。
押下したときの動作 onPressed または onLongPress、中身の要素 child が必須の引数となります。
TextButton(
onPressed: () {
// ボタンが押されたときに発動される処理
},
onLongPressed: () {
// ボタンが長押しされたときに発動される処理
},
child: Text('TextButtonに表示する文字'),
),
具体的な使用例
TextButton は、以下のような用途で使用するときに役立ちます。
AppBar で使用
画面上部のツールバーを表示したいときには、 AppBar を設定します。
このツールバー内に、例えば、アプリ内の前画面に戻るボタンや、アプリの設定画面を開くボタンを設置した時に、とても便利です。
以下のコードのように、 AppBar の actions プロパティに TextButton を設置してみると、
appBar: AppBar(
backgroundColor: Colors.white10,
title: Text('AppBar'),
actions: <Widget>[
TextButton(
onPressed: () {
// ボタンが押されたときに発動される処理
},
child: Text('戻る'),
),
TextButton(
onPressed: () {
// ボタンが押されたときに発動される処理
},
child: Text("設定"),
),
],
),画面上部のツールバーに便利なボタンを追加することができます。
ダイアログで使用
今回の例では、アプリのユーザーに確認をしたい時に使用するダイアログの AlertDialog Widgetを使ってみます。
このダイアログ Widget は、例えばユーザーに同意を求める時やデータ削除前に本当に削除していいのかどうか確認する時によく使います。
以下のコードのように、 AlertDialog の actions プロパティに TextButton を設置してみると、
AlertDialog(
title: Text('確認のダイアログ'),
content: Text('Flutter は楽しいですか？'),
actions: <Widget>[
TextButton(
child: Text('NO'),
onPressed: () {
// ボタンが押されたときに発動される処理
},
),
TextButton(
child: Text('YES'),
onPressed: () {
// ボタンが押されたときに発動される処理
},
),
],
),ダイアログに、ユーザーに「YES」と「NO」を問う便利なボタンを追加することができます。
FlatButton から TextButton への切替推奨
TextButton は、2020 年 10 月にリリースされた Flutter バージョン 1.22 から新しく導入されたボタンです。
それ以前には、類似した機能を持っていたボタン FlatButton があります。
こちらの FlatButton は将来的に廃止される予定です。Flutter 公式チームが推奨するように、 TextButton を使いましょう。
上記の画像を見てみると、外見上のデフォルトのメインカラーが変わっていることが分かります。
それ以外で主な変更点として挙げられるのは、 Button のデザインを変える方法が大きく変わったことです。
以下では、TextButton のデザインが変える方法を例をあげて触れてみます。
TextButton のデザインを変える
デフォルトの TextButton のデザインに手を加えて、好みのボタンに変更してみましょう。
TextButton の デザインを変更する方法は、 ButtonStyle クラスで行います。
ここでは、 TextButton のプロパティ style に引数として ButtonStyle を渡して設定していきます。
TextButton の文字列の色を変える
TextButton の文字列の色を変える場合には、 ButtonStyle の foregroundColor プロパティで指定します。
引数で渡している MaterialStateProperty は、皆さんがまだ学習していない「状態」に関係しています。
このトピックでは深く触れませんが、状態（例えば、ボタンが押された / 押されていない等）に応じて、スタイルに変更を加える役割をしてくれます。
以下のコード例では、 MaterialStateProperty.all で、ボタンがどのような状態でも、文字列を Colors.red にすると指定しています。
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
),
onPressed: () {
// ボタンが押されたときに発動される処理
},
child: Text(
'文字列の色を変えた TextButton',
),
),
ボタンが押された時のスプラッシュの色を変える
これまでに使われてきた FlatButton には、 splashColor プロパティが存在していました。
しかし、 TextButton にはボタンが押された時にボタンの背景全体に広がるスプラッシュの色を直接編集するプロパティがありません。
そこで、ボタンのハイライト色を変更する overlayColor プロパティを使うと、スプラッシュの色を変更することができます。
以下のコードでは、 withOpacity メソッドを使って指定する色に透明度を付けて、綺麗なスプラッシュが表示される例をあげてみます。
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.all<Color>(
Colors.lightGreen.withOpacity(0.2),
),
),
onPressed: () {
// ボタンが押されたときに発動される処理
},
child: Text(
'スプラッシュの色を変えた TextButton',
),
),
