Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flutter Widget In Focus - Chips (Know It All)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ChipDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
darkTheme: ThemeData.dark(),
theme: ThemeData(brightness: Brightness.dark),
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Chip Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
bool isDelete = true;
bool isSelected = false;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _value = 1;
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'),
];
List<String> _filters = <String>[];
Iterable<Widget> get actorWidgets sync* {
for (ActorFilterEntry actor in _cast) {
yield 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;
});
}
});
},
),
);
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Visibility(
visible: widget.isDelete,
child: Chip(
label: Text('David'),
avatar: CircleAvatar(
backgroundColor: Theme.of(context).accentColor,
child: Text('D'),
),
backgroundColor: Colors.amber,
labelStyle:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
labelPadding: EdgeInsets.all(8),
elevation: 16,
shadowColor: Colors.amberAccent,
deleteIcon: Icon(
Icons.cancel,
),
onDeleted: () {
setState(() {
widget.isDelete = !widget.isDelete;
});
},
deleteIconColor: Colors.redAccent,
deleteButtonTooltipMessage: 'Remove this chip',
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(8),
topLeft: Radius.circular(8)),
),
),
),
Chip(
label: Text('David'),
avatar: CircleAvatar(
backgroundColor: Theme.of(context).accentColor,
child: Text('D'),
),
backgroundColor: Colors.amber,
labelStyle:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
labelPadding: EdgeInsets.all(8),
elevation: 16,
shadowColor: Colors.amberAccent,
deleteIcon: Icon(
Icons.cancel,
),
onDeleted: () {
setState(() {
widget.isDelete = !widget.isDelete;
});
},
deleteIconColor: Colors.redAccent,
deleteButtonTooltipMessage: 'Remove this chip',
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(8),
topLeft: Radius.circular(8)),
),
),
SizedBox(
height: 50,
),
InputChip(
avatar: CircleAvatar(
backgroundColor: Theme.of(context).accentColor,
child: Text('D'),
),
label: Text('David'),
onPressed: () {
print('David got clicked');
},
),
InputChip(
label: Text('Wifi'),
labelStyle: TextStyle(
fontSize: 20,
color: widget.isSelected ? Colors.black : Colors.white),
padding: EdgeInsets.all(16),
pressElevation: 25,
onSelected: (isSelected) {
setState(() {
widget.isSelected = !widget.isSelected;
});
},
selected: widget.isSelected,
selectedColor: Colors.amber,
selectedShadowColor: Colors.amber[200],
checkmarkColor: Theme.of(context).accentColor,
),
Wrap(
children: [
ChoiceChip(
label: Text('Small'),
selected: false,
onSelected: (bool selected) {
setState(() {});
},
),
SizedBox(
width: 10,
),
ChoiceChip(
label: Text('Big'),
selected: true,
onSelected: (bool selected) {
setState(() {});
},
selectedColor: Theme.of(context).accentColor,
),
],
),
Wrap(
children: [
FilterChip(
label: Text('Popcorn'),
selected: false,
onSelected: (bool selected) {
setState(() {});
},
),
SizedBox(
width: 10,
),
FilterChip(
label: Text('Coke'),
labelStyle: TextStyle(
color: widget.isSelected ? Colors.black : Colors.white),
selected: widget.isSelected,
onSelected: (bool selected) {
setState(() {
widget.isSelected = !widget.isSelected;
});
},
selectedColor: Theme.of(context).accentColor,
checkmarkColor: Colors.black,
),
],
),
Wrap(
children: [
ActionChip(
label: Text('Play'),
onPressed: () {
//TODO
},
),
SizedBox(
width: 10,
),
ActionChip(
avatar:
widget.isSelected ? CircularProgressIndicator() : null,
label: Text(
'${widget.isSelected ? 'Downloading...' : 'Download'}'),
labelStyle: TextStyle(color: Colors.white),
onPressed: () {
setState(() {
widget.isSelected = !widget.isSelected;
});
},
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
children: actorWidgets.toList(),
),
Text('Look for: ${_filters.join(', ')}'),
],
),
ActionChip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Text('AB'),
),
label: Text('Aaron Burr'),
onPressed: () {
print(
"If you stand for nothing, Burr, what’ll you fall for?");
})
],
),
),
);
}
}
class ActorFilterEntry {
const ActorFilterEntry(this.name, this.initials);
final String name;
final String initials;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.