Flutter図鑑

Button

FlutterではさまざまなButton Widgetが提供されています。
ここではFlutterから提供されているボタンの基本的な使用方法をご紹介します。

基本的な使用方法

  • TextButton
  • OutlinedButton
  • ElevatedButton

Flutterからデフォルトで提供されているボタンには上記3つの種類があります。
ボタンWidgetはクリックを検知し、ユーザーからアクションを促すことができます。

TextButton(
  onPressed: () {},
  child: const Text("TextButton"),
),
OutlinedButton(
  onPressed: () {},
  child: const Text("OutlinedButton"),
),
ElevatedButton(
  onPressed: () {},
  child: const Text("ElevatedButton"),
),

TextButton Widget

TextButtonはTextButton.styleFrom()でスタイルの変更をすることができます。
また、無効化するにはonPressedにNULLを設定することで対応できます。

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.orange[900],
  ),
  child: const Text(
    "Warning",
  ),
),

OutlinedButton Widget

OutlinedButtonはデフォルトではアウトラインの色の変更はされない仕様になっています。
変更したい場合はOutlinedButton.styleFormのsideを使用して対応することができます。

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    side: const BorderSide(width: 1, color: Colors.orange),
    foregroundColor: Colors.orange[900],
  ),
  child: const Text(
    "Warning",
  ),
),

ElevatedButton Widget

ElevatedButtonは色合いが強く、重要度の高いアクションで使用するのに最も適しています。

ElevatedButton(
  style: ElevatedButton.styleFrom(
      backgroundColor: Colors.orange,
      foregroundColor: Colors.orange[900]),
  onPressed: () {},
  child: const Text(
    "Warning",
    style: TextStyle(color: Colors.white),
  ),
),

サイズの変更

ボタンのサイズを変更したい場合は、fontSizeの変更が有効です。
また、フォントのサイズを変更せずにボタンのサイズを変更したい場合は、EdgeInsets.symmetricの値を変更して対応することができます。

ElevatedButton(
  style: ElevatedButton.styleFrom(
      textStyle: const TextStyle(fontSize: 30),
      padding: const EdgeInsets.symmetric(
          vertical: 16, horizontal: 20)),
  onPressed: () {},
  child: const Text("Large"),
),

アイコン付きのボタン

ボタンの意味をわかりやすくするために、アイコンをつけるのが有効です。
TextButton, OutlinedButton, ElevatedButton 全てにつけることができます。

ElevatedButton.icon(
  onPressed: () {},
  icon: const Icon(
    Icons.download,
    size: 16,
  ),
  label: const Text('Download'),
),

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Next