【Flutter】TextButtonの使い方｜テキストボタンを実装

2023年2月17日

Flutterのウィジェット「TextButton」の使い方を紹介します。

「TextButton」ではマテリアルデザインによるテキストボタンを実装できます。

TextButtonの基本的な使い方

「TextButton」の基本的な使い方は下記コードの通りです。

「child」でボタン上に表示されるウィジェットを指定し、「onPressed」でボタンがクリックされた時の処理を書きます。

TextButton(
  child: Text('Click Me'),
  onPressed: () {},
),

TextButton.styleFromで装飾

色を変更する

ボタンの背景色は「backgroundColor」、前景色は「foregroundColor」で指定できます。

TextButton(
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    backgroundColor: Colors.purple,
    foregroundColor: Colors.yellow,
  ),
  onPressed: () {},
),

ボーダーをつける

ボーダーは「side」＞「BorderSide」で実装できます。

「BorderSide」の「color」でボーダー色、「width」でボーダーの幅を指定できます。

TextButton(
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    side: BorderSide(
      color: Colors.greenAccent,
      width: 5,
    ),
  ),
  onPressed: () {},
),

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/TextButton-class.html