Flutter Chips Widget: A Comprehensive Guide with Examples

For exploring, run this in DartPad or locally:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chips Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ChipsDemoScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Chips Demo'),
      ),
      body: const ChipsDemo(),
    );
  }
}

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

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

class _ChipsDemoState extends State<ChipsDemo> {
  bool isChoiceSelected = false; // State for ChoiceChip
  List<String> selectedTags = []; // State for FilterChip
  final List<String> tags = [
    'Flutter',
    'Dart',
    'React',
    'JavaScript'
  ]; // Tags list for FilterChip
  List<String> options = ['Option 1', 'Option 2', 'Option 3'];
  int selectedOptionIndex = -1; // -1 means no option selected
  final TextEditingController _controller = TextEditingController();
  List<String> inputChips = [];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: ListView(
        children: [
          // Basic Chip
          const SectionTitle(title: 'Basic Chip'),
          const Chip(
            label: Text('Basic Chip'),
            avatar: CircleAvatar(child: Text('B')),
          ),

          const Divider(),

          // Action Chip
          const SectionTitle(title: 'Action Chip'),
          ActionChip(
            label: const Text('Perform Action'),
            avatar: const Icon(Icons.flash_on),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Action Chip Pressed!')),
              );
            },
          ),

          const Divider(),

          // Choice Chip
          const SectionTitle(title: 'Choice Chip'),

          Wrap(
            spacing: 8.0,
            children: List.generate(options.length, (index) {
              return ChoiceChip(
                label: Text(options[index]),
                selected: selectedOptionIndex == index,
                selectedColor: Colors.blue.shade100,
                onSelected: (bool selected) {
                  setState(() {
                    selectedOptionIndex = selected ? index : -1;
                  });
                },
              );
            }),
          ),

          const Divider(),

          // Filter Chips
          const SectionTitle(title: 'Filter Chips'),
          Wrap(
            spacing: 8.0,
            children: tags.map((tag) {
              return FilterChip(
                label: Text(tag),
                selected: selectedTags.contains(tag),
                onSelected: (bool selected) {
                  setState(() {
                    if (selected) {
                      selectedTags.add(tag);
                    } else {
                      selectedTags.remove(tag);
                    }
                  });
                },
              );
            }).toList(),
          ),

          const Divider(),

          // Input Chip
          const SectionTitle(title: 'Input Chip'),
          Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Wrap(
      spacing: 8.0,
      children: inputChips.map((chip) {
        return InputChip(
          label: Text(chip),
          onDeleted: () {
            setState(() {
              inputChips.remove(chip);
            });
          },
        );
      }).toList(),
    ),
    TextField(
      controller: _controller,
      decoration: const InputDecoration(
        labelText: 'Add Chip',
      ),
      onSubmitted: (value) {
        setState(() {
          inputChips.add(value);
          _controller.clear();
        });
      },
    ),
  ],
),
        ],
      ),
    );
  }
}

// A simple widget for section titles
class SectionTitle extends StatelessWidget {
  final String title;

  const SectionTitle({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 16,
      ),
    );
  }
}