JazakAllah akh

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, ), ); } }

Mashaa Allah, really nice. Would be amazing if yoiu could share images for each chip