チップ
チップ（Chip）はラベル型のコンポーネントです。実際にChipを入力コンポーネントとして利用するには、表1のコンポーネントを使います。ただし、ActionChipは入力コンポーネントとして利用するものではなく、ボタンとして利用するためのものです。
| クラス | 説明 |
|---|---|
| InputChip | Chipクラスを入力コンポーネントとして扱うための基本的コンポーネント |
| ChoiceChip | 選択／非選択を想定した汎用Chipコンポーネント |
| FilterChip | 値のフィルター操作を想定した選択/非選択のChipコンポーネント |
| ActionChip | ボタン利用を想定したChipコンポーネント |
InputChip
InputChipは、Chipを使ったより汎用型の入力コンポーネントです。後述するChoiceChipやFilterChipを含めて、同じようなことを実現することができます。それだけに用途を開発者が自由に決められますが、同時に使い方が難しくなるコンポーネントと言えます。
ChoiceChipやFilterChipと違って、自身の表示自体を消すための機能があることが異なります。例えば、図3のようなタグの選択と解除のような入力を作成することが可能です。また、その実行コード例がリスト3です。
class _InputChipWidget extends State<InputChipWidget> {
// （1） 選択済みの値を保存する変数
List values = [false, false, false];
@override
Widget build(BuildContext context) {
return Container(
// : （省略）
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Text("選択済み"),
createSelectedTag(context),
Divider(),
Text("未選択"),
createUnSelectedTag(context),
]));
}
Widget createSelectedTag(BuildContext context) {
return Wrap(
children: [
if(values[0]) createSelectedTagChip(context, "Java", 0),
// : （省略）
]);
}
Widget createUnSelectedTag(BuildContext context) {
return Wrap(
children: [
if(!values[0]) createNotSelectedChip(context, "Java", 0),
// : （省略）
]);
}
// 選択された状態のInputChipを作る
InputChip createSelectedTagChip(BuildContext context, String label, int index){
return InputChip(
// （2） 表示するラベル
label: Text(label),
// （3） ラベルの右側に削除用に表示するアイコン
deleteIcon: Icon(Icons.close),
// （4） 削除アイコンがタップされた時の処理
onDeleted : () {
setState(() {
values[index] = false;
});
});
}
// 選択されていない状態のInputChipを作る
InputChip createNotSelectedChip(BuildContext context, String label, int index){
return InputChip(
label: Text(label),
// （5） タップされた時の処理
onSelected: (value){
setState(() {
values[index] = value;
});
}
);
}
}
（1）は選択済みの値を保存する変数です。（2）labelプロパティに表示するラベルを指定します。（3）deleteIconプロパティでは削除のためのウィジェットをラベルの右側に表示します。そして、（4）onDeletedは削除アイコンのウィジェットをタップした時の処理です。一方、ラベルをタップした時の処理は（5）onSelectedで指定します。
ChoiceChip
ChoiceChipは、選択と非選択をコントロールするためのチップです。InputChipと異なり削除用のプロパティとメソッドが用意されていません。実際には、図4のような表示になります。その実行コード例がリスト4です。
class _ChoiceChipWidget extends State<ChoiceChipWidget> {
List values = [false, false, false];
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment.center,
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Wrap(
spacing: 5.0,
runSpacing: 5.0,
children: [
createChoiceChip(context, 'Java',0),
// : （省略）
],
)
]));
}
ChoiceChip createChoiceChip(BuildContext context,String label,int index){
return ChoiceChip(
// （1） ラベルの左側に表示するウィジェット
avatar: values[index]
? Icon(Icons.check_box_outlined)
: Icon(Icons.check_box_outline_blank),
label: Text(label),
selected: values[index],
onSelected: (value) {
setState(() {
values[index] = value;
});
},
// （2） 選択された時の色・ラベルスタイルの変更
selectedColor: Colors.blueAccent,
labelStyle: TextStyle(color: values[index] ? Colors.white : Colors.black),
);
}
}
（1）avatarはラベルの左側に表示するウィジェットを指定するためのプロパティです。選択された状態のUIと非選択時のUIはデフォルトで何も変わりません。そのため、開発者がそれらの違いを指定する必要があります。例えば、色で状態を表したい場合には（2）selectedColorで指定可能です。ただし、ラベルのスタイルは（3）labelStyleで指定します。
FilterChip
FilterChipは、ChoiceChipの利用用途をより具体化したコンポーネントです。データをフィルターする際の条件を設定するような場合を想定したコンポーネントで、図5のような表示になります。また、その実行コード例がリスト5です。
選択された状態の時にラベルの左側に表示されるアイコンがデフォルトで指定されていることがChoiceChipと異なりますが、ChoiceChipでも同じことが実現できますので、どちらを使ってもよいと思います。
class _FilterChipWidget extends State<FilterChipWidget> {
List values = [false, false, false];
// : （省略）
FilterChip createFilterChip(BuildContext context, String label, int index) {
// （1） ChoiceChipと同様
return FilterChip(
label: Text(label),
selected: values[index],
onSelected: (value) {
setState(() {
values[index] = value;
});
},
// : （省略）
);
}
}
FilterChipは（1）ChoiceChipと同様の使い方になりますので、細かい説明は割愛させていただきます。
まとめ
スマホアプリではできるだけキーボードを使わず入力できることが望まれます。また、入力値の制御の観点からもできるだけ利用者が自由な値を入力できない方が望ましいことでしょう。
例えば、スライダーは、利用者が具体的な数値を把握することなく制御上必要な数値を入力させたい場合などに有効です。今回紹介したコンポーネントは前回紹介した入力コンポーネントでも同じ機能は作成することができますが、より利用用途を限定した使い方をする際に、よりアプリに適した表示と操作を提供するコンポーネントです。次回は、日付選択を含めた入力コンポーネントを紹介します。
