@kq1231
Flutter Developer
Nothing here yet.
Nothing here yet.
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 Wid get 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 Wid get 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 Wid get 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 Wid get build ( BuildContext context ) { return Text( title, style : const TextStyle( fontWeight: FontWeight.bold, fontSize : 16 , ), ); } }