This tutorial is about how to use ActionChip in Flutter.
Material Design has compact elements called chips. Action chip is one of the chips. Usually it's used to trigger an action when the user presses the chip. Flutter makes it easier for us to create an action chip by providing a widget called ActionChip. How to use and customize the visual of the widget? Find out in this tutorial.
Other chip types include InputChip, FilterChip, and ChoiceChip.
Creating ActionChip
Flutter's ActionChip has a lot of properties you can use to build your desired design. However, there are only two required arguments you need to pass on the constructor. The first one is label whose type is Widget, typically a Text. The second is a callback function
ActionChip(
label: Text('Delete'),
onPressed: () {
print('Processing to delete item');
}
)Output:
Adding Avatar
It's quite common to have an avatar inside a chip. It can be a CircleAvatar containing a photo, a Text, an Icon, or any other widget that's suitable to be used as an avatar.
ActionChip(
label: Text('Delete'),
avatar: Icon(Icons.delete),
onPressed: () {
print('Processing to delete item');
}
)Output:
Customizing Label
You can set the TextStyle for the label using labelStyle property. It's also possible to customize the padding of the label using labelPadding property.
ActionChip(
label: Text('Delete'),
labelStyle: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
labelPadding: EdgeInsets.all(10.0),
avatar: Icon(Icons.delete),
onPressed: () {
print('Processing to delete item');
}
)Output:
Customizing Colors
To set the background color of the chip, use backgroundColor property. For the label color, as I've shown in the previous example, you can set the color using labelStyle property. For the color of the avatar, it depends on what kind of widget you pass as avatar. For example, if the avatar widget is an Icon, you can use Icon's color property to set the color.
ActionChip(
label: Text('Delete'),
labelStyle: TextStyle(color: Colors.white),
avatar: Icon(Icons.delete, color: Colors.white),
backgroundColor: Colors.black54,
onPressed: () {
print('Processing to delete item');
}
)Output:
Adding Tooltip
A tooltip is a text displayed when the user does long press on the widget. You can use tooltip property to set the text toe be displayed.
ActionChip(
label: Text('Delete'),
avatar: Icon(Icons.delete),
tooltip: 'Delete the item',
onPressed: () {
print('Processing to delete item');
}
)Output:
Setting Elevation and Shadow Color
You can use elevation property to set the elevation when the widget is not pressed. For setting the elevation when the widget is pressed, use pressElevation property.
ActionChip(
label: Text('Delete'),
avatar: Icon(Icons.delete),
elevation: 10,
pressElevation: 5,
shadowColor: Colors.teal,
onPressed: () {
print('Processing to delete item');
}
)Output:
Full Code
Action chips are quite common to be placed inside a Card widget. Below is the full code where some action chips are inside a Card widget.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: _ActionChipExample(),
);
}
}
class _ActionChipExample extends StatefulWidget {
@override
_ActionChipExampleState createState() =>
new _ActionChipExampleState();
}
class _ActionChipExampleState extends State<_ActionChipExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'assets/images/galaxy.jpg',
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align (
alignment: Alignment.centerLeft,
child: Wrap(
spacing: 10.0,
children: <Widget>[
ActionChip(
avatar: CircleAvatar(
backgroundColor: Color.fromARGB(0, 250, 250, 250),
foregroundColor: Colors.black,
child: Icon(Icons.open_in_browser),
),
label: Text('Open'),
tooltip: 'Open the item',
onPressed: () {
print('Processing to open item');
}
),
ActionChip(
avatar: CircleAvatar(
backgroundColor: Color.fromARGB(0, 250, 250, 250),
foregroundColor: Colors.black,
child: Icon(Icons.edit),
),
label: Text('Edit'),
tooltip: 'Edit the item',
onPressed: () {
print('Processing to edit item');
}
),
ActionChip(
avatar: CircleAvatar(
backgroundColor: Color.fromARGB(0, 250, 250, 250),
foregroundColor: Colors.black,
child: Icon(Icons.delete),
),
label: Text('Delete'),
clipBehavior: Clip.hardEdge,
tooltip: 'Delete the item',
onPressed: () {
print('Processing the delete item');
}
),
]
),
),
),
],
),
)
),
);
}
}
Output:
Properties
Here's the list of properties of ActionChip you can pass to the constructor.
Key key: The widget key, used to control if it should be replaced.Widget avatar: A widget displayed before the label.Widget label*: The primary content of the chip.TextStyle labelStyle: The text style for the label.EdgeInsetsGeometry labelPadding: The padding for the label.VoidCallback onPressed*: A callback function that will be called when the widget is pressed.double pressElevation: The elevation when the widget is pressed.String tooltip: Tooltip that will be displayed by long pressing the chip.ShapeBorder shape: TheShapeBorderto draw around the chip..Clip clipBehavior: Defines how to clip the content. Defaults toClip.none.FocusNode focusNode: Focus node for the widget.bool autofocus: Whether this widget will be set as initial focus. Defaults tofalse.Color backgroundColor: Color for enabled, unselected chip's background.EdgeInsetsGeometry padding: The padding between the contents of the chip and the outside shape.VisualDensity visualDensity: The compactness of the chip's layout.MaterialTapTargetSize materialTapTargetSize: The the minimum size of the tap target.double elevation: Elevation relative to its parent.Color shadowColor: Color of the chip's shadow if the elevation is greater than 0.
*: required
