Flutterにおいて、TextButtonはテキストを表示し、それをタップすることでアクションを実行するためのウィジェットです。通常、ボタンのテキストは押された状態と非押された状態で色が変わります。
目次
TextButtonの使い方
まず、TextButtonを使用するためには、material.dartパッケージをインポートする必要があります。その後、以下のようにTextButtonを作成します。
TextButton(
onPressed: () {
// ボタンが押された時の処理
},
child: Text('ボタンのテキスト'),
),上記の例では、ボタンが押された時の処理を指定しています。childプロパティには、ボタンに表示するテキストを指定します。
さらに、以下のようにstyleプロパティを使用することで、テキストボタンの外観をカスタマイズすることもできます。
TextButton(
onPressed: () {
// ボタンが押された時の処理
},
child: Text('ボタンのテキスト'),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blue,
),
),上記の例では、テキストの色を白色、背景色を青色に設定しています。
サンプルコード
上記を確認するためのサンプルコードです。
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('TextButtonサンプル'),
),
body: Center(
child: TextButton(
onPressed: () {
// ボタンがタップされたときの処理
print('ボタンがタップされました');
},
child: Text('ボタン'),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
),
),
),
),
);
}
}
ボタンの無効化
TextButtonを無効化するには、onPressedプロパティにnullを設定します。
TextButton(
onPressed: null,
child: Text('ボタンのテキスト'),
),まとめ
以上が、FlutterにおけるTextButtonの基本的な使い方になります。TextButtonは、単純なボタンを作成する場合に便利なウィジェットです。また、外観をカスタマイズすることもできます。