Flutter - Chip Widget - GeeksforGeeks

12 Nov, 2021
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.
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}
)
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 libraryvoid 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"), //NetwordImage            ), //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.
sagartomar9927
singghakshay
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
Flutter - Flexible Widget
ListView Class in Flutter
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Format Dates in Flutter