Skip to content

Instantly share code, notes, and snippets.

@maheshj01
Last active February 28, 2022 04:34
Show Gist options
  • Save maheshj01/bf2fdbf2b779dd90c8dcd4d0f44a9770 to your computer and use it in GitHub Desktop.
Save maheshj01/bf2fdbf2b779dd90c8dcd4d0f44a9770 to your computer and use it in GitHub Desktop.
filter chip sample showing single and multiple chip select
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