Last active
February 28, 2022 04:34
-
-
Save maheshj01/bf2fdbf2b779dd90c8dcd4d0f44a9770 to your computer and use it in GitHub Desktop.
filter chip sample showing single and multiple chip select
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(const MyApp()); | |
class MyApp extends StatelessWidget { | |
const MyApp({Key? key}) : super(key: key); | |
static const String _title = 'Flutter Code Sample'; | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: _title, | |
home: Home(), | |
); | |
} | |
} | |
class ActorFilterEntry { | |
const ActorFilterEntry(this.name, this.initials); | |
final String name; | |
final String initials; | |
} | |
class Home extends StatefulWidget { | |
Home({Key? key}) : super(key: key); | |
@override | |
State<Home> createState() => _HomeState(); | |
} | |
class _HomeState extends State<Home> { | |
final List<ActorFilterEntry> _cast = <ActorFilterEntry>[ | |
const ActorFilterEntry('Aaron Burr', 'AB'), | |
const ActorFilterEntry('Alexander Hamilton', 'AH'), | |
const ActorFilterEntry('Eliza Hamilton', 'EH'), | |
const ActorFilterEntry('James Madison', 'JM'), | |
]; | |
final List<String> _filters = <String>[]; | |
Iterable<Widget> get actorWidgets { | |
return _cast.map((ActorFilterEntry actor) { | |
return Padding( | |
padding: const EdgeInsets.all(4.0), | |
child: FilterChip( | |
avatar: CircleAvatar(child: Text(actor.initials)), | |
label: Text(actor.name), | |
selected: selected.toLowerCase().contains(actor.name.toLowerCase()), | |
/// _filters.contains(actor.name), | |
onSelected: (bool value) { | |
/// single chip selection | |
setState(() { | |
selected = actor.name; | |
}); | |
}, | |
), | |
); | |
}); | |
} | |
Iterable<Widget> get actorWidgetsMultiSelect { | |
return _cast.map((ActorFilterEntry actor) { | |
return Padding( | |
padding: const EdgeInsets.all(4.0), | |
child: FilterChip( | |
avatar: CircleAvatar(child: Text(actor.initials)), | |
label: Text(actor.name), | |
selected: _filters.contains(actor.name), | |
onSelected: (bool value) { | |
setState(() { | |
if (value) { | |
_filters.add(actor.name); | |
} else { | |
_filters.removeWhere((String name) { | |
return name == actor.name; | |
}); | |
} | |
}); | |
}, | |
), | |
); | |
}); | |
} | |
String selected = ''; | |
@override | |
Widget build(BuildContext context) { | |
return Material( | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
const Padding( | |
padding: EdgeInsets.symmetric(vertical: 28.0), | |
child: Text('Single chip select'), | |
), | |
Wrap( | |
children: actorWidgets.toList(), | |
), | |
const Padding( | |
padding: EdgeInsets.symmetric(vertical: 28.0), | |
child: Text('mulitple chip select'), | |
), | |
Wrap( | |
children: actorWidgetsMultiSelect.toList(), | |
), | |
], | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment