×
×

Spread the love

In this tutorial we will learn how to use inputChip widget in flutter.

Flutter InputChip Widget

InputChip is a material widget in flutter that represents a complex piece of information in a compact form. Flutter provides a widget called InputChip which allows us to add an input chip to our application. Input chip by default is disabled. We can enable it by setting onSelected. We can provide a label, leading and trailing icons to it.

Other types of chips are Chip, ChoiceChip, ActionChip & FilterChip.

Creating InputChip

To create an Input chip in flutter we have to use the constructor of InputChip class provided by flutter. There is one required property for InputChip widget which is label property. The label can be any widget usually a text widget. To use the InputChip widget we have to provide this property with a value.

Flutter InputChip Constructor :

InputChip(
    {Key? key,
    Widget? avatar,
    required Widget label,
    TextStyle? labelStyle,
    EdgeInsetsGeometry? labelPadding,
    bool selected,
    bool isEnabled,
    ValueChanged<bool>? onSelected,
    Widget? deleteIcon,
    VoidCallback? onDeleted,
    Color? deleteIconColor,
    bool useDeleteButtonTooltip,
    String? deleteButtonTooltipMessage,
    VoidCallback? onPressed,
    double? pressElevation,
    Color? disabledColor,
    Color? selectedColor,
    String? tooltip,
    BorderSide? side,
    OutlinedBorder? shape,
    Clip clipBehavior,
    FocusNode? focusNode,
    bool autofocus,
    Color? backgroundColor,
    EdgeInsetsGeometry? padding,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? materialTapTargetSize,
    double? elevation,
    Color? shadowColor,
    Color? selectedShadowColor,
    bool? showCheckmark,
    Color? checkmarkColor,
    ShapeBorder avatarBorder}
) 

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

InputChip(
          label: Text("Codesinsider"),
        ),

Flutter InputChip Properties

The properties of Inputchip widget are :

  • avatar
  • label
  • labelStyle
  • labelPadding
  • deleteIcon
  • onDeleted
  • deleteIconColor
  • side
  • shape
  • backgroundColor
  • padding
  • elevation
  • shadowColor
  • selected
  • onSelected
  • isEnabled
  • onPressed
  • pressElevation
  • disabledColor
  • selectedColor
  • selectedShadowColor
  • showCheckmark
  • checkmarkColor
  • avatarBorder

Most of the properties of Inputchip widget are similar to basic Chip Widget. Since we can’t discuss all the properties in one article we will discuss the dissimilar ones. If you want to learn the similar ones refer flutter chip widget.

selected

We will use this property to set the chip’s state to selected or unselected. It takes a boolean value setting true will make the chip selected and false will make the chip unselected.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
          avatar: CircleAvatar(
            child: Text("C"),
            backgroundColor: Colors.white,
          ),
          label: Text("Codesinsider"),
          selected: false,
          onSelected:(bool value)
            {
              
            }
        ),
      )

Output :

flutter input chip selected false
Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
          avatar: CircleAvatar(
            child: Text("C"),
            backgroundColor: Colors.white,
          ),
          label: Text("Codesinsider"),
          selected: true,
          onSelected:(bool value)
            {
              
            }
        ),
      )

Output :

flutter input chip selected true

onSelected

We will use this property to update the selected or unselected state of the Input chip and also to perform some actions when the chip is selected or unselected.

bool isSelected = false;
Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
        avatar: CircleAvatar(
            child: Text("C"),
            backgroundColor: Colors.white,
        ),
        label: Text("Codesinsider"),
        selected: isSelected,
        onSelected:(bool value)
          {
            setState(() {
              isSelected = value;
            });
              // Do whatever you want when the inputchip is selected or unselected 
          }
        ),
      )

isEnabled

We will use this property to enable or disable the inputchip. It take a boolean value. By default the value is true. Even if we set this property to true we have to set one of the callbacks onSelected, onDelete or onPressed to enable the button.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onSelected:(bool value)
            {
              setState(() {
                isSelected = value;
              });
              // Do whatever you want when the inputchip is selected or unselected
            },
          isEnabled: false,
        ),
      )

Output :

flutter inputchip isenabled false

onPressed

We will use this property if we want to perform some action when we press the chip.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onPressed: ()
            {
              setState(() {
                isSelected = !isSelected;
              });
            },
        ),
      )

pressElevation

We will use this property to change the amount of elevation we want to apply when we press the chip.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onPressed: ()
            {
              setState(() {
                isSelected = !isSelected;
              });
            },
          pressElevation: 20,
        ),
      )

Output :

flutter input chip press elevation

disabledcolor

To apply a color to the inputChip when the chip is disabled we will use this property. So to disable the button i’m removing all the callbacks.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            disabledColor: Colors.green,
        ),
      )

Output :

flutter input chip disabled color

selectedColor

We will use this property to apply color to the chip when the chip is selected.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onSelected: (bool value)
            {
              setState(() {
                isSelected = value;
              });
            },
            selectedColor: Colors.deepOrange,
        ),
      )

Output :

flutter inputchip selected color

selectedShadowColor

We will use this property to apply shadow color to the chip when the chip is transforming from selected state to unselected state.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onSelected: (bool value)
            {
              setState(() {
                isSelected = value;
              });
            },
          pressElevation: 20,
            selectedShadowColor: Colors.green,
        ),
      )

Output :

flutter input chip selected shadow color

showCheckmark

We will use this property to show / hide the checkmark that appears when we select the chip. It takes a boolean value.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onSelected: (bool value)
            {
              setState(() {
                isSelected = value;
              });
            },
          showCheckmark: false,
        ),
      )

Output :

flutter input chip show checkmark false

checkmarkColor

We will use this property to change the color of the checkmark.

Container(
        alignment: Alignment.topCenter,
        margin: EdgeInsets.only(top: 20),
        child: InputChip(
            avatar: CircleAvatar(
              child: Text("C"),
              backgroundColor: Colors.white,
            ),
            label: Text("Codesinsider"),
            selected: isSelected,
            onSelected: (bool value)
            {
              setState(() {
                isSelected = value;
              });
            },
          checkmarkColor: Colors.green,
        ),
      )

Output :

flutter inputchip checkmark color

Flutter InputChip Example

Let’s see an example where we display some InputChips with different colors. We will also implement the code for selecting, unselecting and deleting the chip in this example.

For this example we need a pojo class for holding the data of Inputchip. The pojo class will have three parameters label, color and isSelected. The label will hold the label of the chip, color will hold the backgroundColor and isSelected will hold the selected or unselected state of the Input chip.

Tech class ( pojo ) :

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

Now let’s create a List of type Tech (pojo) and provide the data for chips.

List<Tech> _chipsList = [
    Tech("Android", Colors.green, false),
    Tech("Flutter", Colors.blueGrey, false),
    Tech("Ios", Colors.deepOrange, false),
    Tech("Python", Colors.cyan, false),
  ];

Now we will write the code for generating, selecting, unselecting and deleting the chips. Let’s create a function techChips() which will return a List of widgets which will be input chips in our case.

List<Widget> techChips () {
    List<Widget> chips = [];
    for (int i=0; i< _chipsList.length; i++) {
      Widget item = Padding(
        padding: const EdgeInsets.only(left:10, right: 5),
        child: InputChip(
          avatar: CircleAvatar(
            child: Text(
                _chipsList[i].label[0].toUpperCase()
            ),
            backgroundColor: Colors.white,
          ),
          label: Text(_chipsList[i].label),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: _chipsList[i].color,
          selected: _chipsList[i].isSelected,
          onDeleted: () {
            setState(() {
              _chipsList.removeAt(i);
              });
          },
          onSelected: (bool value)
          {
            setState(() {
              _chipsList[i].isSelected = value;
            });
          },
        ),
      );
      chips.add(item);
    }
    return chips;
  }

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

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

Complete Code :

Now let’ s merge all the code snippets above to complete the input 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;
  bool isSelected;
  Tech(this.label, this.color, this.isSelected);
}

class _MyHomePageState extends State<MyHomePage> {
  List<Tech> _chipsList = [
    Tech("Android", Colors.green, false),
    Tech("Flutter", Colors.blueGrey, false),
    Tech("Ios", Colors.deepOrange, false),
    Tech("Python", Colors.cyan, false),
  ];

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

  List<Widget> techChips () {
    List<Widget> chips = [];
    for (int i=0; i< _chipsList.length; i++) {
      Widget item = Padding(
        padding: const EdgeInsets.only(left:10, right: 5),
        child: InputChip(
          avatar: CircleAvatar(
            child: Text(
                _chipsList[i].label[0].toUpperCase()
            ),
            backgroundColor: Colors.white,
          ),
          label: Text(_chipsList[i].label),
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: _chipsList[i].color,
          selected: _chipsList[i].isSelected,
          onDeleted: () {
            setState(() {
              _chipsList.removeAt(i);
              });
          },
          onSelected: (bool value)
          {
            setState(() {
              _chipsList[i].isSelected = value;
            });
          },
        ),
      );
      chips.add(item);
    }
    return chips;
  }
}

Output :

flutter chip example output

That’s all about the tutorial on how to create and display or show InputChip in flutter. We have also seen an example where we’ve used InputChip 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. Required fields are marked *