×
×

Spread the love

This tutorial explains how to use chip widget in flutter with example.

Flutter Chip Widget

Chip is a material widget in flutter that represents information in compact form. For example, you might have composed a mail in Gmail app. You can observe the ‘to address’ turns into a chip when we choose a contact from suggestion or when we move to the subject field. Flutter provides a widget called Chip which allows us to add a chip to our application. If we provide the onDeleted callback a delete button will be displayed on the chip.

Types of chips in flutter

Flutter offers four types of chips for different scenarios. They are

Creating Chip In Flutter

To create a chip in flutter we have to call the constructor of the chip class provided by flutter. There is one required property for a chip widget which is label property. To use the chip widget we have to provide this property with a value.

Flutter Chip Constructor :

Chip(
    {Key? key,
    Widget? avatar,
    required Widget label,
    TextStyle? labelStyle,
    EdgeInsetsGeometry? labelPadding,
    Widget? deleteIcon,
    VoidCallback? onDeleted,
    Color? deleteIconColor,
    bool useDeleteButtonTooltip,
    String? deleteButtonTooltipMessage,
    BorderSide? side,
    OutlinedBorder? shape,
    Clip clipBehavior,
    FocusNode? focusNode,
    bool autofocus,
    Color? backgroundColor,
    EdgeInsetsGeometry? padding,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? materialTapTargetSize,
    double? elevation,
    Color? shadowColor}
) 

Below is the example code to add a chip to our flutter application.

Chip(
       label: Text("Flutter"),
    ),

Flutter Chip Properties

The properties of chip widget are :

  • avatar
  • label
  • labelStyle
  • labelPadding
  • deleteIcon
  • onDeleted
  • deleteIconColor
  • side
  • shape
  • backgroundColor
  • padding
  • elevation
  • shadowColor

avatar and label

We will use avatar property to display an avatar prior to the chip’s label, usually a CircleAvatar widget. The label property is used to display content of the chip.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
        ),
      ),

Output :

flutter chip avatar and label

labelStyle

We will use this property to style the label of the chip. It takes TextStyle as value. We can also style the label by using style property of the text widget provided to label.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.green),
        ),
      ),

Output :

flutter chip label style

labelPadding

To provide padding to chip label we will use this property. It takes EdgeInsets Geometry as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.green),
          labelPadding: EdgeInsets.all(10),
        ),
      ),

Output :

flutter chip label padding

onDeleted

This callback is called when the user taps the delete icon to delete the chip. If the callback is set to null, the delete button will not appear on the chip. The chip will not automatically remove itself, this just tells the app that the user tapped the delete button. By default this callback will display a ‘ x ‘ icon.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          onDeleted: (){},
        ),
      ),

Output :

flutter chip on delete

deleteIcon

We will use this property to change the delete icon of the chip. This only works when the onDelete callback is used.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          onDeleted: (){},
          deleteIcon: Icon(Icons.close),
        ),
      ),

Output :

flutter chip delete icon

deleteIconColor

We will use this property to change the color of the chip’s delete icon. It takes material color as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          onDeleted: (){},
          deleteIconColor: Colors.green,
        ),
      ),

Output :

flutter chip delete icon color

side

We will use this property to provide border and border color to the chip. It takes borderSide as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          onDeleted: (){},
          deleteIconColor: Colors.green,
          side: BorderSide(
              color: Colors.green, 
              width: 1, 
              style: BorderStyle.solid
          ),
        ),
      ),

Output :

flutter chip side

shape

We will use this property to change the shape of the chip. I’ m using BeveledRectangleBorder in the below example. If you want to try other shapes refer flutter RaisedButton example.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.green,
          ),
          label: Text("Codesinsider"),
          onDeleted: (){},
          deleteIconColor: Colors.green,
          shape: BeveledRectangleBorder(
             borderRadius: BorderRadius.circular(10)
          )
        ),
      ),

Output :

flutter chip shape

backgroundColor

To change the background color of the chip we will use this property. It takes material color as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.white,
          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: Colors.green,
          ),
        ),

Output :

flutter chip background color

padding

We will use this property to apply padding to the chip. It takes EdgeInsets geometry as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle, size: 15,),
            backgroundColor: Colors.white,

          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: Colors.green,
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
          ),
        ),

Output :

flutter chip padding

elevation

To add elevation to the chip we will use this property. It takes double as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.white,

          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: Colors.green,
          elevation: 10,
          ),
        ),

Output :

flutter chip elevation

shadowColor

To set a color to the shadow when the chip is elevated we will use this property. It takes material color as value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: Chip(
          avatar: CircleAvatar(
            child: Icon(Icons.account_circle),
            backgroundColor: Colors.white,
          ),
          label: Text("Codesinsider"),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: Colors.green,
          elevation: 10,
          shadowColor: Colors.deepOrange,
          ),
        ),

Output :

flutter chip shadow color

Flutter Chip Example

Let’s see an example which shows the usage of chip widget in flutter. In this example we will display some chips with different colors. We will also implement the code for deleting the chip. We will use a pojo class and a List for creating chips.

For this example we need a pojo class for holding the data of chip like label and background color.

Tech class ( pojo ) :

class Tech
{
  String label;
  Color color;
  Tech(this.label, this.color);
}

Now we need to create a List of type Tech (pojo) and provide the data for chips.

List<Tech> _chipsList = [
    Tech("Android", Colors.green),
    Tech("Flutter", Colors.blue),
    Tech("Ios", Colors.grey),
    Tech("Python", Colors.purple),
  ];

Now let’s see the code for generating and deleting the chips. Let’s create a iterable function techchips() that will return chip widgets.

Iterable<Widget> get techChips sync* {
    for (final Tech tech in _chipsList) {
      yield Padding(
        padding: const EdgeInsets.only(left:10, right: 5),
        child: Chip(
          avatar: CircleAvatar(
            child: Text(
                tech.label[0].toUpperCase()
            ),
            backgroundColor: Colors.white,
          ),
          label: Text(tech.label),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: tech.color,
          onDeleted: () {
            setState(() {
              _chipsList.removeWhere((Tech entry) {
                return entry.label == tech.label;
              });
            });
          },
        ),
      );
    }
  }

We will set the above function to children property of wrap widget in body.

Wrap(
        direction: Axis.horizontal,
        children: techChips(),
      )

Complete Code :

Let’s sum up all the code snippets above to complete our chip example.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_app_learning/NavDrawer.dart';
import 'package:flutter_app_learning/contact.dart';
void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class Tech
{
  String label;
  Color color;
  Tech(this.label, this.color);
}

class _MyHomePageState extends State<MyHomePage> {
  List<Tech> _chipsList = [
    Tech("Android", Colors.green),
    Tech("Flutter", Colors.blue),
    Tech("Ios", Colors.grey),
    Tech("Python", Colors.purple),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Chip"),
      ),
      body: Wrap(
          direction: Axis.horizontal,
          children: techChips.toList()
      ),
    );
  }

  Iterable<Widget> get techChips sync* {
    for (final Tech tech in _chipsList) {
      yield Padding(
        padding: const EdgeInsets.only(left:10, right: 5),
        child: Chip(
          avatar: CircleAvatar(
            child: Text(
                tech.label[0].toUpperCase()
            ),
            backgroundColor: Colors.white,
          ),
          label: Text(tech.label),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: tech.color,
          onDeleted: () {
            setState(() {
              _chipsList.removeWhere((Tech entry) {
                return entry.label == tech.label;
              });
            });
          },
        ),
      );
    }
  }
}

Output :

flutter chip example output

That’s all about the tutorial on how to create and display or show Chip in flutter. We have also seen an example where we’ve used Chip widget and customized it. Let’s catch up with some other widget in the next post. Have a great day!!

Do like & share my facebook page. Subscribe to newsletter if you find this post helpful. Thank you!!

Reference : Flutter Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.