すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】ChoiceChipで選択式のボタンを作成する

本エントリでは以下の流れで

ChoiceChipで選択するとハイライトされるボタンの作成方法

を説明する。



ChoiceChipとは

概要

ChoiceChipユーザーの選択したアイテムを表示するためのウィジェット。 単に表示するだけではなくボタンとしても使用できる

api.flutter.dev

ChoiceChipを用いると、以下の画像のようなボタンを作成できる。

youtubeの選択式ボタン

プロパティ

ChoiceChip各プロパティの役割は以下の通り。

  • label:ボタンの中央に表示する文字列を指定
  • selectedbool型の値を渡す。この値がtrueになると選択されたと認識される
  • backgroundColor:背景色
  • selectedColorselectedtrueになっているときの背景色
  • onSelectedウィジェットをタップされた際の挙動を指定。引数にはウィジェットが選択された際にtrueが渡される

ChoiceChipを使用したサンプルアプリ

ChoiceChipを用いて選択したボタンが白でハイライトされるアプリを作成する。

動作画像

サンプルアプリの動作は以下の通り。

ChoiceChip使用例

ソースコード

このサンプルアプリのコードは以下。

ソースコード解説

サンプルアプリの動作を簡単に解説する。

使用例では選択されているボタンのインデックスを_choiceIndexで管理している。

ボタンのどれかがタップされた際、setState_choiceIndexを新たに選択されたアイテムのインデックスに変更している。

また選択された際、未選択ボタンと見分けがつくようにbackgroundColorColors.whiteに指定し、選択されたボタンのみが白でハイライトされるように目立たせている。