flutter actionchip avatar circleavatar icon

How to customize the Flutter ActionChip widget with ease

Various /

What can be customized in the Flutter ActionChip widget

You can customize the Flutter ActionChip widget in several ways. Some of the customizable properties include the label text and style, the background colour, the padding and margin, the avatar image, the tooltip message, and the onPressed action. These properties allow you to create customized ActionChips with different styles, colours, and functionalities to fit your app’s needs. Additionally, you can also customize the shape of the ActionChip by using the shape property, which allows them to choose between a circular or a rounded rectangle shape. Overall, the ActionChip widget is highly customizable and provides a lot of flexibility to create unique and engaging user interfaces.

Here are the ActionChip properties:

ActionChip ActionChip({
  Key? key,
  Widget? avatar
  required Widget label,
  TextStyle? labelStyle,
  EdgeInsetsGeometry? labelPadding,
  void Function()? onPressed,
  double? pressElevation,
  String? tooltip,
  BorderSide? side,
  OutlinedBorder? shape,
  Clip clipBehavior = Clip.none,
  FocusNode? focusNode,
  bool autofocus = false,
  Color? backgroundColor,
  Color? disabledColor,
  EdgeInsetsGeometry? padding,
  VisualDensity? visualDensity,
  MaterialTapTargetSize? materialTapTargetSize,
  double? elevation,
  Color? shadowColor,
  Color? surfaceTintColor,
  IconThemeData? iconTheme,
})

How to use an avatar in Flutter ActionChip

The avatar property in ActionChip allows you to add an avatar or icon to the left side of the chip. This is useful when you want to display an image or an icon to represent the action the chip represents.

To use an avatar with an ActionChip, you can use the CircleAvatar widget with the backgroundImage property. The backgroundImage property takes a NetworkImage as a value, which can be used to load the image from a URL.

Here’s an example code snippet that demonstrates how to use avatar with a network image in ActionChip:

ActionChip(
  avatar: CircleAvatar(
    backgroundImage: NetworkImage(
        'https://picsum.photos/250?image=9'),
  ),
  label: Text('My Action Chip'),
  onPressed: () {
    // Handle action here
  },
)
flutter actionchip avatar

In this example, we’re using CircleAvatar to display the avatar. We’re passing a NetworkImage object to the backgroundImage property to load the image from a URL. We then pass the CircleAvatar as the value of the avatar property in the ActionChip.

Flutter ActionChip widget avatar with Image

To use an asset image as the avatar of the ActionChip, you can use the AssetImage class from the Flutter framework. First, you need to add the image to your project’s assets folder and declare it in the pubspec.yaml file. Then, you can create an instance of the AssetImage class and use it as the child of a CircleAvatar widget, which will be set as the avatar of the ActionChip.

Here’s an example code snippet:

ActionChip(
  avatar: CircleAvatar(
    backgroundImage: AssetImage('assets/logo.png'),
  ),
  label: Text('My Action Chip'),
  onPressed: () {
    // do something
  },
)

Flutter ActionChip widget avatar with Icon

Similarly to the above, to use an icon as the avatar of the ActionChip, you can use the Icon widget from the Flutter framework. You can set the icon’s properties, such as colour and size, and wrap it in a CircleAvatar widget, which will be set as the avatar of the ActionChip.

Here’s an example code snippet:

ActionChip(
  avatar: CircleAvatar(
    child: Icon(
      Icons.add,
      color: Colors.white,
      size: 20.0,
    ),
    backgroundColor: Colors.blue,
  ),
  label: Text('My ActionChip'),
  onPressed: () {
    // do something
  },
)
flutter actionchip avatar circleavatar icon

In this example, we are using the “add” icon from the Flutter Icons library and wrapping it in a CircleAvatar widget with a blue background colour. You can customize the icon and the CircleAvatar to your liking to create the desired avatar for your ActionChip.

But, you do not have to use the CircleAvatar widget:

ActionChip(
  avatar: Icon(
    Icons.add,
    color: Colors.red,
    size: 20.0,
  ),
  label: Text('My Action Chip'),
  onPressed: () {
    // do something
  },
)
flutter actionchip avatar icon

How to customize the colours of the ActionChip in Flutter

To customize the colours of the ActionChip, you can use the following properties:

  1. backgroundColor: This property allows you to set the background colour of the chip when it is not selected. You can set it to any Color object. For example:
ActionChip(
  label: Text('My Action Chip'),
  backgroundColor: Colors.blue,
  onPressed: () {},
),
  1. disabledColor: This property allows you to set the colour of the chip when it is disabled. You can set it to any Color object. For example:
ActionChip(
  label: Text('My Action Chip'),
  disabledColor: Colors.grey,
  onPressed: null,
),
  1. shadowColor: This property allows you to set the colour of the chip’s shadow. You can set it to any Color object. For example:
ActionChip(
  label: Text('My Action Chip'),
  shadowColor: Colors.black,
  onPressed: () {},
),
  1. surfaceTintColor: This property allows you to set the tint colour of the chip’s surface. You can set it to any Color object. For example:
ActionChip(
  label: Text('My Action Chip'),
  surfaceTintColor: Colors.green,
  onPressed: () {},
),

Here’s an example that uses all of these properties:

ActionChip(
  label: Text('My Action Chip'),
  backgroundColor: Colors.blue,
  disabledColor: Colors.grey,
  shadowColor: Colors.black,
  surfaceTintColor: Colors.green,
  onPressed: () {},
),

How to use onPressed in Flutter ActionChip

The ActionChip widget in Flutter has an onPressed property that is triggered when the user taps on the chip. This property allows you to define an action that is performed when the user interacts with the widget.

To use the onPressed property in the ActionChip, you simply need to define a function that you want to execute when the user taps on the chip. You can then pass this function as an argument to the onPressed property.

Here’s an example code snippet that demonstrates how to use the onPressed property in an ActionChip:

ActionChip(
  label: Text('My Action Chip'),
  onPressed: () {
    // Add your action here
    print('Action triggered!');
  },
)

In this example, the ActionChip displays a label that says “My Action Chip”. When the user taps on the chip, the onPressed property triggers a function that prints a message to the console. You can replace this function with any action that you want to perform in response to the user’s interaction.

You can also pass null to the onPressed property if you want to disable the button.

ActionChip(
  label: Text('My Action Chip'),
  onPressed: null,
)

In the above code, the ActionChip widget is created with a label ‘My Action Chip’ and an onPressed property set to null. This disables the button, making it unresponsive to user interactions.

How to customize the Label in the Flutter ActionChip widget

You can customize the label in a Flutter ActionChip in several ways. Here are a few options with code examples:

Changing the ActionChip label text style:

Changing the text style: You can change the font, font size, colour, and other text style properties using the labelStyle property of the ActionChip widget. Here’s an example:

ActionChip(
  label: Text('My Action Chip'),
  labelStyle: TextStyle(
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
  onPressed: () {},
)

Changing the ActionChip label padding:

Using the labelPadding property: You can add padding to the label using the labelPadding property. Here’s an example:

ActionChip(
  label: Text('My Action Chip'),
  labelPadding: EdgeInsets.symmetric(horizontal: 20),
  onPressed: () {},
)

Adding an icon to the label in ActionChip:

You can add an icon to the label by using the Row widget and combining the Text and Icon widgets. Here’s an example:

ActionChip(
  label: Row(
    children: [
      Icon(Icons.star),
      SizedBox(width: 4.0),
      Text('My Action Chip'),
    ],
  ),
  onPressed: () {},
)

Changing the ActionChip label background colour:

You can change the background colour of the ActionChip by using the backgroundColor property. Here’s an example:

ActionChip(
  label: Text('My Action Chip'),
  backgroundColor: Colors.blue,
  onPressed: () {},
)

These are just a few examples of how you can customize the label in the Flutter ActionChip. You can experiment with different properties to create a customized ActionChip that meets your needs.

How to change the shape of the Flutter ActionChip

By default, an ActionChip has a rounded rectangle shape, but you can easily customize its shape using one of the following five built-in shapes:

  1. RoundedRectangleBorder: The RoundedRectangleBorder shape creates an ActionChip with rounded corners. To create an ActionChip with a RoundedRectangleBorder shape, you can use the following code:
ActionChip(
  label: Text('Rounded Rectangle'),
  onPressed: () {},
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
),
  1. StadiumBorder: The StadiumBorder shape creates an oval-shaped ActionChip. To create an ActionChip with a StadiumBorder shape, you can use the following code:
ActionChip(
  label: Text('Stadium'),
  onPressed: () {},
  backgroundColor: Colors.blue,
  shape: StadiumBorder(),
),
  1. CircleBorder: The CircleBorder shape creates a circular-shaped ActionChip. To create an ActionChip with a CircleBorder shape, you can use the following code:
ActionChip(
  label: Text('Circle'),
  onPressed: () {},
  backgroundColor: Colors.blue,
  padding: EdgeInsets.symmetric(vertical: 20),
  shape: CircleBorder(),
),
  1. ContinuousRectangleBorder: The ContinuousRectangleBorder shape creates an ActionChip with no rounded corners. To create an ActionChip with a ContinuousRectangleBorder shape, you can use the following code:
ActionChip(
  label: Text('Continuous Rectangle'),
  onPressed: () {},
  backgroundColor: Colors.blue,
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
),
  1. BeveledRectangleBorder: The BeveledRectangleBorder shape creates an ActionChip with bevelled corners. To create an ActionChip with a BeveledRectangleBorder shape, you can use the following code:
ActionChip(
  label: Text('Beveled Rectangle'),
  onPressed: () {},
  backgroundColor: Colors.blue,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
),

In each of the examples above, I set the shape property of the ActionChip to the corresponding built-in shape. I also set a label, an onPressed function, and a backgroundColor for each ActionChip. By combining these different properties, you can create ActionChip widgets with a variety of shapes to fit our app’s design needs.

Here are the all shapes in a Column:

Column(
  children: [
    ActionChip(
      label: Text('Rounded Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    ActionChip(
      label: Text('Rounded Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: RoundedRectangleBorder(
      ),
    ),
    ActionChip(
      label: Text('Stadium'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: StadiumBorder(),
    ),
    ActionChip(
      label: Text('Circle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      padding: EdgeInsets.symmetric(vertical: 20),
      shape: CircleBorder(),
    ),
    ActionChip(
      label: Text('Continuous Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: ContinuousRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    ActionChip(
      label: Text('Continuous Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: ContinuousRectangleBorder(
      ),
    ),
    ActionChip(
      label: Text('Beveled Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    ActionChip(
      label: Text('Beveled Rectangle'),
      onPressed: () {},
      backgroundColor: Colors.blue,
      shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  ],
)
flutter actionchip shapes

How to add a border to the Flutter ActionChip

To add a black border to a Flutter ActionChip widget we can use the “shape” property of the ActionChip widget to draw the border.

Here’s an example code snippet that adds a black border to an ActionChip which can be added to all of the five shapes mentioned above:

ActionChip(
  label: Text('ActionChip with Border'),
  onPressed: () {
    // ActionChip onPressed code goes here
  },
  avatar: Icon(Icons.add),
  backgroundColor: Colors.white,
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 2.0,
    ),
    borderRadius: BorderRadius.circular(10.0),
  ), // Choose the shape you want
),

In this example, we set the “shape” property of the ActionChip to a RoundedRectangleBorder with a black border of width 2.0. We also set a border radius of 10.0 to give it rounded corners.

For each shape, we just need to replace the shape property of the ActionChip with the corresponding shape such as StadiumBorder(), CircleBorder(), ContinuousRectangleBorder(), or BeveledRectangleBorder().

flutter actionchip shapes with borders
Column(
  children: [
    ActionChip(
      label: Text('ActionChip with Border'),
      onPressed: () {
        // ActionChip onPressed code goes here
      },
      avatar: Icon(Icons.add),
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 2.0,
        ),
        borderRadius: BorderRadius.circular(10.0),
      ), // Choose the shape you want
    ),
    ActionChip(
      label: Text('ActionChip with Border'),
      onPressed: () {
        // ActionChip onPressed code goes here
      },
      avatar: Icon(Icons.add),
      backgroundColor: Colors.white,
      shape: StadiumBorder(
        side: BorderSide(
          color: Colors.black,
          width: 2.0,
        ),
      ), // Choose the shape you want
    ),
    ActionChip(
      label: Text('Circled Border'),
      padding: EdgeInsets.symmetric(vertical: 50),
      onPressed: () {
        // ActionChip onPressed code goes here
      },
      backgroundColor: Colors.white,
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 2.0,
        ),
      ), // Choose the shape you want
    ),
    ActionChip(
      label: Text('ActionChip with Border'),
      onPressed: () {
        // ActionChip onPressed code goes here
      },
      avatar: Icon(Icons.add),
      backgroundColor: Colors.white,
      shape: ContinuousRectangleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 2.0,
        ),
        borderRadius: BorderRadius.circular(20.0),
      ), // Choose the shape you want
    ),
    ActionChip(
      label: Text('ActionChip with Border'),
      onPressed: () {
        // ActionChip onPressed code goes here
      },
      avatar: Icon(Icons.add),
      backgroundColor: Colors.white,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1.0,
        ),
        borderRadius: BorderRadius.circular(10.0),
      ), // Choose the shape you want
    ),
  ],
)

How to use a Flutter ActionChip as a Row of colour swatches

To use a Flutter ActionChip widget as a row of colour swatches, we can create an ActionChip for each colour and place them in a Row widget. Each ActionChip will have a CircleBorder shape and a background colour corresponding to the colour it represents. We can add a black border to the ActionChips by setting the side property of the shape to a BorderSide with a black colour and a width of 1.0. As an addition, you can also add some padding around the ActionChips to create some space between them using the EdgeInsets.all() method.

Here’s an example code snippet:

Row(
  children: <Widget>[
    ActionChip(
      backgroundColor: Colors.red,
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      onPressed: () {
        // Do something when red swatch is selected
      },
      label: SizedBox(width: 40, height: 40),
    ),
    // SizedBox(width: 10,),
    ActionChip(
      backgroundColor: Colors.blue,
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      onPressed: () {
        // Do something when blue swatch is selected
      },
      label: SizedBox(width: 40, height: 40),
    ),
    // SizedBox(width: 10,),
    ActionChip(
      backgroundColor: Colors.green,
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      onPressed: () {
        // Do something when green swatch is selected
      },
      label: SizedBox(width: 40, height: 40),
    ),
  ],
)
flutter actionchip colour swatches

In this example, we create a Row widget and add three ActionChips to it, each with a CircleBorder shape and a different background colour. We set the onPressed property for each ActionChip to handle what happens when the swatch is selected. The label property of the ActionChip is set to a SizedBox with a fixed width and height to create a circular swatch. We also set the shape property of the ActionChip to a CircleBorder with a black border and a width of 1.0 to create a border around the swatch.

Related Posts