【Flutter】OutlinedButtonの使い方｜立体ボタンを実装

2023年2月17日

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

「OutlinedButton」ではマテリアルデザインによる立体的なボタンを実装できます。

OutlinedButtonの基本的な使い方

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

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

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

OutlinedButton.styleFromで装飾する

角丸にする

角丸にするには「shape」＞「RoundedRectangleBorder」の「borderRadius」で指定できます。

「borderRadius」に「BorderRadius.circular」を渡して角丸を調整します。

OutlinedButton(
  child: Text('Click Me'),
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  onPressed: () {},
),

色を変更する

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

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

ボーダーをつける

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

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

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

以上です。

合わせて読みたい

参考サイト

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