Flutter - Chip Widget

Last Updated : 25 Apr, 2025

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}
)

Property	Description
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.

Complete Application Code

main.dart:

Dart

import 'package:flutter/material.dart';

// Material design library
void main() {
  runApp(
      
    // widget tree starts here
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent,
          foregroundColor: Colors.white,
          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.

Flutter - Empty Widget

ankit_kumar_

Improve

Article Tags :

Flutter - Chip Widget

Constructor of Chip Class:

Properties of Chip Widget:

Complete Application Code

Output:

Similar Reads

Flutter - Chip Widget

Constructor of Chip Class:

Properties of Chip Widget:

Complete Application Code

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?