[Chip Widget] #flutter https://widgettricks.substack.com/p/chip-notes https://dartpad.dev/?id=a4d2ea980cd75f1b1f07750fcc2cb68f

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        chipTheme: const ChipThemeData(
          selectedColor: Colors.blueAccent,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Chip Variations"),
        ),
        body: const Home(),
      ),
    ),
  );
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: ListView(
        children: const [
          ChipSelection(),
          ChoiceChipSelection(),
          FilterChipSelection(),
          ActionChipSelection(),
          InputChipSelection(),
        ],
      ),
    );
  }
}

class ChipSelection extends StatelessWidget {
  const ChipSelection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Chip"),
        Wrap(
          children: [
            for (int i = 0; i < 9; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Chip(
                  label: Text('Chip $i'),
                  onDeleted: () {},
                ),
              ),
          ],
        ),
        const Divider(),
      ],
    );
  }
}

class ChoiceChipSelection extends StatefulWidget {
  const ChoiceChipSelection({Key? key}) : super(key: key);

  @override
  _ChoiceChipSelectionState createState() => _ChoiceChipSelectionState();
}

class _ChoiceChipSelectionState extends State<ChoiceChipSelection> {
  int _selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Choice Chip"),
        Wrap(
          children: [
            for (int i = 0; i < 9; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ChoiceChip(
                  label: Text('Choice $i'),
                  selected: _selectedIndex == i,
                  onSelected: (selected) {
                    setState(() {
                      _selectedIndex = selected ? i : -1;
                    });
                  },
                ),
              ),
          ],
        ),
        const Divider(),
      ],
    );
  }
}

class InputChipSelection extends StatefulWidget {
  const InputChipSelection({Key? key}) : super(key: key);

  @override
  _InputChipSelectionState createState() => _InputChipSelectionState();
}

class _InputChipSelectionState extends State<InputChipSelection> {
  final _selected = <String>[];
  final _inputs = <String>[];
  final _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Input Chip"),
        TextField(
          controller: _textController,
          decoration: const InputDecoration(
            icon: Icon(Icons.message),
            hintText: 'Type your message',
          ),
        ),
        MaterialButton(
          child: const Text('Add'),
          onPressed: () {
            if (_textController.text.isNotEmpty) {
              setState(() {
                _inputs.add(_textController.text);
                _textController.clear();
              });
            }
          },
        ),
        Wrap(
          children: [
            for (int i = 0; i < _inputs.length; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: InputChip(
                  label: Text(_inputs[i]),
                  selected: _selected.contains(_inputs[i]),
                  onSelected: (selected) {
                    setState(() {
                      final input = _inputs[i];
                      if (selected) {
                        _selected.add(input);
                      } else {
                        _selected.remove(input);
                      }
                    });
                  },
                  onDeleted: () {
                    setState(() {
                      final input = _inputs[i];
                      _selected.remove(input);
                      _inputs.remove(input);
                    });
                  },
                ),
              ),
          ],
        ),
        const Divider(),
      ],
    );
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }
}

class FilterChipSelection extends StatefulWidget {
  const FilterChipSelection({Key? key}) : super(key: key);

  @override
  _FilterChipSelectionState createState() => _FilterChipSelectionState();
}

class _FilterChipSelectionState extends State<FilterChipSelection> {
  final _selected = <int>[];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Filter Chip"),
        Wrap(
          children: [
            for (int i = 0; i < 9; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: FilterChip(
                  label: Text('Filter $i'),
                  selected: _selected.contains(i),
                  onSelected: (selected) {
                    setState(() {
                      if (selected) {
                        _selected.add(i);
                      } else {
                        _selected.remove(i);
                      }
                    });
                  },
                ),
              ),
          ],
        ),
        const Divider(),
      ],
    );
  }
}

class ActionChipSelection extends StatelessWidget {
  const ActionChipSelection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Action Chip"),
        Wrap(
          children: [
            for (int i = 0; i < 9; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ActionChip(
                  avatar: const Icon(Icons.play_arrow),
                  label: Text('Action $i'),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Action $i Clicked'),
                      ),
                    );
                  },
                ),
              ),
          ],
        ),
        const Divider(),
      ],
    );
  }
}