タグ入力（チップ入力） Tag Input / Chip Input

文字を打って Enter を押すと、その言葉が丸いチップになって欄の中に並ぶ。×を押すと消える。

別名: タグ入力チップ入力宛先入力ハッシュタグ入力複数入力キーワード入力Chips InputToken Field
動き: Enter でチップになる ×で消える空で⌫を押すと最後が消える
作り方: 自作標準ウィジェットの組み合わせで自分で作ります

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

別タブで大きく開く ↗

どんなもの？

メールの宛先やタグのように、言葉をいくつも入れてもらう欄です。

Wrap の中に InputChip を並べ、最後に枠なしの TextField を置いて、まとめて1つの入力欄に見せます。

Enter で打った言葉を一覧に足して入力欄を空にし、チップの onDeleted で取り除きます。

onSubmitted を使うと Enter のたびにフォーカスが外れるので、onEditingComplete で受けると続けて打てます。

空の状態で ⌫（バックスペース）を押したら最後のチップを消すと、キーボードだけで直せます。

同じ言葉の重複や空白だけの入力は、足す前に取り除いておきます。

こんなときに

タグ・宛先・キーワードなど、短い言葉を複数入れてもらう

避けたい場面

選べる言葉が決まっている（選ぶだけのチップ「FilterChip」にする）

最小コード

InputDecorator(
  decoration: const InputDecoration(border: OutlineInputBorder()),
  child: Wrap(spacing: 6, children: [
    for (final t in tags)
      InputChip(
        label: Text(t),
        onDeleted: () => setState(() => tags.remove(t)),
      ),
    SizedBox(
      width: 140,
      child: TextField(
        controller: input,
        decoration: const InputDecoration.collapsed(hintText: 'タグを追加'),
        // onSubmitted だと Enter でフォーカスが外れる。onEditingComplete なら続けて打てる
        onEditingComplete: () {
          final t = input.text.trim();
          if (t.isNotEmpty && !tags.contains(t)) setState(() => tags.add(t));
          input.clear();
        },
      ),
    ),
  ]),
)