Flutter図鑑

Toggle Button

ToggleButton Widgetは複数の選択肢から一つをユーザーに選択させる時に有効です。
ここではFlutterから提供されているToggleButton Widgetの使い方と応用例を解説します。

基本的な使用方法

  • ToggleButtons

Flutterでシンプルなトグルボタンを作成するためにはToggleButtonsが有効です。

final List<bool> selected = [true, false, false, false];
ToggleButtons(
  isSelected: selected,
  children: const [Text("S"), Text("M"), Text("L"), Text("XL")],
  onPressed: (int index) {
    setState(() {
      selected[index] = !selected[index];
    });
  },
)

Single selection

isSelectedに入る値を調整することで、単一選択にすることができます。

int selectedIndex = 0;
ToggleButtons(
  isSelected: selected,
  children: const [Text("S"), Text("M"), Text("L"), Text("XL")],
  onPressed: (int index) {
    setState(() {
      selectedIndex = index;
    });
  },
)

サイズの変更

constraintsの値を調整することで、ボタンのサイズ調整をすることができます。
横幅いっぱいにサイズを設定したい場合はMediaQueryを使用して調整できます。

ToggleButtons(
  isSelected: selected,
  constraints: BoxConstraints(
      minHeight: 40,
      minWidth: (MediaQuery.of(context).size.width - 36) / 4),
  onPressed: (int index) {
    setState(() {
      selected[index] = !selected[index];
    });
  },
  children: const [Text("S"), Text("M"), Text("L"), Text("XL")],
),

色の変更

selectedBorderColor（選択中のボーダーの色）など、細かく色の調整をすることができます。
また、borderRadiusを変更して、ボタンの丸みを調整することができます。

ToggleButtons(
  color: Colors.red,
  fillColor: Colors.red[300],
  borderColor: Colors.red[100],
  splashColor: Colors.red[300],
  selectedBorderColor: Colors.red[800],
  selectedColor: Colors.white,
  borderRadius: const BorderRadius.all(Radius.circular(10)),
  ...
),

アイコン付きのボタン

UXを向上させるためには、ボタンの意味をわかりやすくするアイコンを表示させるのが有効です。
Icon()を使用してボタンのテキストをアイコンに変更することができます。

ToggleButtons(
  ...
  children: const [
    Icon(Icons.sunny),
    Icon(Icons.nights_stay),
    Icon(Icons.brightness_4)
  ],
),

API

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

Previous
Next