In this quick and short tutorial we’ll see how we can use chip in flutter. Chip is a material design component widget.
Flutter Chips represent complex entities in small blocks, and that starts from locations, rules to contacts, or something else.
There are different types of Chip widgets available in flutter material design component library.
Before digging further, let’s check what are the different types of Chips that are available in Flutter. In addition, we’ll also learn what are their roles.
Certainly, in separate articles we’ll discuss those Chip widgets in detail.
There is InputChip that represents various piece of information, such as person, place, or conversational text.
Subsequently, we can name FilterChip. As the name suggests, we can use FilterChip as tags or descriptive words as a way to filter contents.
On the contrary, ChoiceChip allows us to select from a set of options. As a result, those options contain related text, or categories.
Finally, we can think of ActionChip that represents an action related to the content displayed on the Chip.
Enough talking, let us first see a simple list of Chips on our flutter app.
As we can see that Chips are compact elements that represent an attribute, text, etc. However, it has another interesting parameter that we can use to delete any particular chip from the list.
Before discussing that parameter, let’s see the full code snippet first.
import 'package:flutter/material.dart';
class WrapExample extends StatelessWidget {
const WrapExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '',
home: WrapHome(),
);
}
}
class WrapHome extends StatelessWidget {
const WrapHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Wrap Example'),
),
body: Center(
child: Wrap(
spacing: 18.0, // gap between adjacent chips
runSpacing: 14.0, // gap between lines
children: <Widget>[
Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
child: Text(
'Choose Locations',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 60,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(
height: 10,
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('WB'),
),
label: const Text(
'West Bengal',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
onDeleted: () {},
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('MH'),
),
label: const Text(
'Maharastra',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('TM'),
),
label: const Text(
'Tamilnadu',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('AP'),
),
label: const Text(
'Andhra Pradesh',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
),
],
),
),
);
}
}The above image shows us we are asking user to choose any locations from a given set of options. However, user cannot delete any one of them.
Right?
To solve that, let’s first check one Chip code snippet first.
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('WB'),
),
label: const Text(
'West Bengal',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
),This Chip represents the very first location. But it has no option that allows users to delete it.
To make it happen, let’s add a non-null onDeleted callback that will cause the chip to include a button for deleting the chip.
Watch the code below, we’ve added a non-null onDeleted callback with the first code.
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: const Text('WB'),
),
label: const Text(
'West Bengal',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
shadowColor: Colors.black,
elevation: 20,
onDeleted: () {},
),As a result, the first screenshot changes to the following image.
As a result, the first Chip has a delete button added next to the text.
To sum up, the ancestors of any Chip widget must have many material component widgets that include Material, MediaQuery, Directionality, and MaterialLocalizations.
You have guessed it right. All of these widgets are provided by MaterialApp and Scaffold. And remember that two parameters of any Chip Widget could never be null, they are label and clipBehavior arguments.
Leave a Reply