Flutter – Chip Widget

Chip is a material design widget which comes built-in with flutter. It can simply be described as a compact element holding an icon and text, usually a rounded rectangle in the background. It can serve many purposes, like it can be simply used as a button, representing a user with a CircleAvatar and text, or topic tags in the blog articles, etc.

Constructor of Chip Class:

const Chip(
{Key key,
Widget avatar,
@required Widget label,
TextStyle labelStyle,
EdgeInsetsGeometry labelPadding,
Widget deleteIcon,
VoidCallback onDeleted,
Color deleteIconColor,
String deleteButtonTooltipMessage,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
Color backgroundColor,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
MaterialTapTargetSize materialTapTargetSize,
double elevation,
Color shadowColor}
)

Properties of Chip Widget:

• autofocus: This property takes in a boolean value as the object to decide whether the widget will be selected on the initial focus or not.
• avatar: This property holds in a widget as the object to be displayed before the Chip label.
• backgroundColor: This property assigns a background color to the Chip widget by taking in Color class as the object.
• clipBehavior: This property takes Clip enum as the object to decide whether the content inside the Chip widget will be clipped or not.
• deleteButtonTooltipMessage: This property takes in a string as the object to be used for the tooltip of the delete button.
• deleteIcon: This property takes in a widget as the object to be displayed when onDelete function is called.
• deleteIconColor: This property assigns a color to the delete icon by taking in the Color class as the object.
• elevation: This widget holds a double value as the object decide the elevated height of the Chip widget.
• focusNode: The focusNode property takes in FocusNode class as the object assign an additional focus node to the widget.
• label: The label property takes in a widget as the object to be placed inside the chip widget as the primary element.
• labelPadding: This property controls the padding around the label by taking in EdgeInsetsGeometry as the object.
• labelStyle: The labelStyle property takes in TextStyle class as the object to style label text.
• materialTapTargetSize: This property determines the size of the area which is tapped on click. It takes in MaterialTapTargetSize as the object.
• onDeleted: The onDelete property holds VoidCalback typedef as the object. It controls the action after the delete icon is tapped.
• padding: This property controls the empty space in the Chip widget. It takes EdgeInsetsGeometry class as the object.
• shadowColor: This controls the color of the shadow beneath the Chip widget. It takes Color class as the object.
• shape: This defines the shape of the Chip widget. It holds ShapeBorder class as the object.
• visualDensity: This property controls the compactness of the Chip widget by taking in VisualDensity class as the object.

Example: 

Dart

import 'package:flutter/material.dart';

//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          /** Chip Widget **/
          child: Chip(
            elevation: 20,
            padding: EdgeInsets.all(8),
            backgroundColor: Colors.greenAccent[100],
            shadowColor: Colors.black,
            avatar: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
            ), //CircleAvatar
            label: Text(
              'GeeksforGeeks',
              style: TextStyle(fontSize: 20),
            ), //Text
          ), //Chip
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation: In this flutter application the parent widget in the body is Center which is taking Chip widget as it child. Inside the chip widget the elevation property is set to 20 px which is making the Chip widget appear elevated from the background. Then we have the padding property adding 8 px empty space in the Chip. The backgroundColor is greenAccent[400] and the avatar is taking in CircleAvatar which is holding a gfg logo (NetworkImage). And at last the label property is holding text whose font-size is 20 px. Doing all this we get a nice looking Chip widget which can find it use in many places.