Flutter Chips Widget: A Comprehensive Guide with Examples
In Flutter, the Chip widget is an excellent way to display compact elements, such as tags, categories, or interactive buttons. It allows you to present information in a clean, concise manner while offering a variety of customization options. Chips ca...
parthshethflutterdeveloper.hashnode.dev6 min read
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, ), ); } }