How to Use Chip Widget in Flutter

Published December 17, 2021

Chip is a material design widget that 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 or any indicator that you want to show

So, in today's tutorial, we will see how chip widgets are used in Flutter.

Let's start


Step 1: Create a new Flutter Application.

Step 2: Now inside the body, we will take Column Widget and inside that, we will take Chip Widget

It has different properties

Chip({

    Key? key,

    this.avatar,

    required this.label,

    this.labelStyle,

    this.labelPadding,

    this.deleteIcon,

    this.onDeleted,

    this.deleteIconColor,

    this.useDeleteButtonTooltip = true,

    this.deleteButtonTooltipMessage,

    this.side,

    this.shape,

    this.clipBehavior = Clip.none,

    this.focusNode,

    this.autofocus = false,

    this.backgroundColor,

    this.padding,

    this.visualDensity,

    this.materialTapTargetSize,

    this.elevation,

    this.shadowColor,

  }) : assert(label != null),

       assert(autofocus != null),

       assert(clipBehavior != null),

       assert(elevation == null || elevation >= 0.0),

       assert(useDeleteButtonTooltip != null),

       super(key: key);

 

But the most commonly used property is label which shows the text inside rounded shape widget

for example

Chip(

                  label: const Text(

                    'This is Chip',

                    style: TextStyle(fontSize: 20),

                  ), //Text

                ),

 

We can Customize it with different properties as we want using background color, adding icons or any Widget inside it.

for example

Chip(

                  elevation: 20,

                  padding: const EdgeInsets.all(8),

                  backgroundColor: Colors.greenAccent[100],

                  shadowColor: Colors.black,

                  avatar: CircleAvatar(

                    backgroundImage: NetworkImage(

                        "https://images.pexels.com/photos/9647962/pexels-photo-9647962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"), //NetwordImage

                  ), //CircleAvatar

                  label: const Text(

                    'This is Chip',

                    style: TextStyle(fontSize: 20),

                  ), //Text

                ),

 

you can also have different functions for the chip as onDelete which can be used to trigger a function when you click on the chip.

for example

Chip(

                  onDeleted: () {

                    print('Deleted');

                  },

                  backgroundColor: Colors.blue,

                  deleteIcon: const Icon(Icons.close),

                  deleteIconColor: Colors.red,

                  shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(10)),

                  label: Text('data'),

                ),

 

Full Source Code to try

import 'package:flutter/material.dart';

 

//Material design library

void main() {

  runApp(

    //widget tree starts here

    MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Scaffold(

        appBar: AppBar(

          title: Text('RRTutor'),

          backgroundColor: Colors.greenAccent[400],

          centerTitle: true,

        ), //AppBar

        body: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Row(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                Chip(

                  elevation: 20,

                  padding: const EdgeInsets.all(8),

                  backgroundColor: Colors.greenAccent[100],

                  shadowColor: Colors.black,

                  avatar: CircleAvatar(

                    backgroundImage: NetworkImage(

                        "https://images.pexels.com/photos/9647962/pexels-photo-9647962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"), //NetwordImage

                  ), //CircleAvatar

                  label: const Text(

                    'This is Chip',

                    style: TextStyle(fontSize: 20),

                  ), //Text

                ),

                const SizedBox(

                  width: 20,

                ),

                Text('With Customization')

              ],

            ),

            const SizedBox(

              height: 20,

            ),

            Row(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                Chip(

                  onDeleted: () {

                    print('Deleted');

                  },

                  backgroundColor: Colors.blue,

                  deleteIcon: const Icon(Icons.close),

                  deleteIconColor: Colors.red,

                  shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(10)),

                  label: Text('data'),

                ),

                const SizedBox(

                  width: 20,

                ),

                const Text('With only Delete Function')

              ],

            ),

            Row(

              mainAxisAlignment: MainAxisAlignment.center,

              children: const [

                Chip(

                  label: Text('data'),

                ),

                SizedBox(

                  width: 20,

                ),

                Text('With only label')

              ],

            )

          ],

        ), //Center

      ), //Scaffold

    ), //MaterialApp

  );

}

 


Output: 

 

Conclusion: In this way, we have learned how you can use Chip widget in Flutter.

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

230 Views