チップ Chips

小さな角丸のボタン。絞り込み・並び替えの選択、入力したタグの表示、すぐ実行できる提案などに使う。

別名: タグフィルターチップピルカプセルボタン絞り込みボタンFilter ChipChoice ChipPill
動き: 押すと選択 ×で消える横に並ぶ
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

見た目は同じ「チップ」ですが、役割で4種類を使い分けます。

FilterChip は複数選べる絞り込み、ChoiceChip は1つだけ選ぶ選択、

InputChip はユーザーが入力したもの（タグ・宛先）で onDeleted を渡すと×が付きます。

ActionChip は押すとすぐ何かが起きる提案（「現在地で探す」など）です。

たくさん並ぶときは Wrap で包んで折り返させます。

こんなときに

検索結果の絞り込み、タグの表示、ちょっとした提案

避けたい場面

画面の主役になる重要な操作（チップは控えめなので気づかれにくい）

最小コード

Wrap(spacing: 8, children: [
  for (final g in genres)
    FilterChip(
      label: Text(g),
      selected: selected.contains(g),
      onSelected: (on) => setState(() => on ? selected.add(g) : selected.remove(g)),
    ),
]),

InputChip(label: const Text('駅近'), onDeleted: () => removeTag('駅近')),
ActionChip(label: const Text('現在地で探す'), onPressed: searchNearby),