BLOG
マテリアルデザイン3(Material Design3)シリーズ Chip
Material design 3
2024.06.19
2024.06.21
2024.06.19
2024.06.21
1. 今回のテーマ
今回のテーマは、Chipです。
Chipは、Material Design ComponentsのSelectionに分類される入力支援、フィルターなどに利用されるコンポーネントです。
詳細はこちらを御覧ください。
https://m3.material.io/components/chips/overview
2. パターン
Chipは、Material Desinでは4種類に分類されます。
Flutterで定義されているクラスとは、以下のような関係性があります。
以下以外にも、Chipクラスも存在します。
| パターン | 役割 | Fluterのクラス |
|---|---|---|
| アシスト | ユーザに次に期待する操作等をガイドする。 | ActionChip |
| フィルタ | 様々なオプションからコンテンツを絞り込む。 | FilterChip |
| 入力 | 入力支援の候補を表示する。 | InputChip |
| サジェスト | おすすめの候補を表示する。 | ActionChip |
3. サンプルコード
3.1. アシスト (Assist Chip)
AssistChipは、ActionChipクラスを利用します。
アイコンを付与するには、avatarにアイコンを設定します。なお、ChipはWrapと合わせて利用すると便利です。Wrapは、Chipが１行に収まらないときに自動で改行して調整してくれるウィジェットです。
import 'package:flutter/material.dart';
class MultipleChoiceChipScreen extends StatefulWidget {
const MultipleChoiceChipScreen({super.key});
@override
State<MultipleChoiceChipScreen> createState() =>
_MultipleChoiceChipScreenState();
}
class _MultipleChoiceChipScreenState extends State<MultipleChoiceChipScreen> {
List<String> choices = ['回答１', '回答２', '回答３', '回答４', '回答５'];
List<bool> selectedIndices = List.generate(5, (_) => false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Multiple Choice Chip'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: List.generate(
choices.length,
(index) {
return ActionChip(
avatar: Icon(selectedIndices[index]
? Icons.favorite
: Icons.favorite_border),
label: Text(choices[index]),
onPressed: () {
setState(() {
selectedIndices[index] = !selectedIndices[index];
});
},
);
},
),
),
),
);
}
}3.2. フィルタ(FilterChip)
FilterChipは、FilterChipクラスを利用します。
チェックアイコンを付与するには、showCheckmarkにtrue設定します。
import 'package:flutter/material.dart';
class MultipleChoiceChipScreen extends StatefulWidget {
const MultipleChoiceChipScreen({super.key});
@override
State<MultipleChoiceChipScreen> createState() =>
_MultipleChoiceChipScreenState();
}
class _MultipleChoiceChipScreenState extends State<MultipleChoiceChipScreen> {
List<String> choices = ['回答１', '回答２', '回答３', '回答４', '回答５'];
List<bool> selectedIndices = List.generate(5, (_) => false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Multiple Choice Chip'),
),
body: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(8.0),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: List.generate(
choices.length,
(index) {
return FilterChip(
showCheckmark: true,
label: Text(choices[index]),
onSelected: (value) {
setState(() {
selectedIndices[index] = value;
});
},
selected: selectedIndices[index],
);
},
),
),
),
);
}
}3.3. 入力(InputChip)
InputChipは、InputChipクラスを利用します。
削除アイコンを表示するには、deleteIconに削除アイコンを設定します。また、削除時のイベントは、onDeletedメソッド内に実装します。
import 'package:flutter/material.dart';
class MultipleChoiceChipScreen extends StatefulWidget {
const MultipleChoiceChipScreen({super.key});
@override
State<MultipleChoiceChipScreen> createState() =>
_MultipleChoiceChipScreenState();
}
class _MultipleChoiceChipScreenState extends State<MultipleChoiceChipScreen> {
List<String> choices = ['回答１', '回答２', '回答３', '回答４', '回答５'];
List<bool> selectedIndices = List.generate(5, (_) => false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Multiple Choice Chip'),
),
body: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(8.0),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: List.generate(
choices.length,
(index) {
return InputChip(
avatar: const Icon(Icons.location_pin),
label: Text(choices[index]),
onSelected: (value) {},
deleteIcon: const Icon(Icons.close),
onDeleted: () {},
);
},
),
),
),
);
}
}3.4. サジェスト(SuggestionChip)
SuggestionChipは、ActionChipクラスを利用します。
アシストと同様のため、割愛します。
4. カスタマイズ
4.1. テーマの変更
Chipの背景色を変更する場合は、colorに背景色を設定します。
Chip内のテキストカラーは、Textのstyleで設定します。
ActionChip(
color: WidgetStateProperty.all(
selectedIndices[index] ? Colors.blueAccent : Colors.white,
),
label: Text(
choices[index],
style: TextStyle(
color: selectedIndices[index] ? Colors.white : Colors.black,
),
),
onPressed: () {
setState(() {
selectedIndices[index] = !selectedIndices[index];
});
},
)アイコンカラーを変更するには、アイコンのColorを設定します。
ActionChip(
avatar: Icon(Icons.favorite_border,
color: selectedIndices[index]
? Colors.white
: Colors.blueAccent),
color: WidgetStateProperty.all(
selectedIndices[index] ? Colors.blueAccent : Colors.white,
),
label: Text(
choices[index],
style: TextStyle(
color: selectedIndices[index] ? Colors.white : Colors.black,
),
),
onPressed: () {
setState(() {
selectedIndices[index] = !selectedIndices[index];
});
},
)5. まとめ
今回は、Material Desing3のChipを紹介しました。Chipは、入力支援やフィルターなど様々な用途で利用できる便利なコンポーネントです。また、Flutterでは用途別にクラスも細分化されています。
ただし、Chipでも一通り包含されているため、用途に合わせて最適なクラスを選択されることをオススメします。
