Action Chip In Flutter
Material Design has conservative components called chips. Action chip is one of the chips. Typically, it’s utilized to set off an action when the user presses the chip. Flutter makes it more straightforward for us to make an action chip by giving us a widget called ActionChip.
This blog will explore the Action Chip In Flutter. We perceive how to execute a demo program. We will learn how to use the Action Chip and how to customize your flutter applications.
ActionChip class – material library – Dart API
A Material Design action chip. Action chips are a set of options that trigger an action related to primary content…api. flutter.dev
Table Of Contents::
Introduction:
ActionChip is a material widget in a flutter. The actual name proposes that they are utilized to set off some action. Action chips ought to be made progressively founded on the context of the essential substance.
We can’t incapacitate an action chip so showing it to the user without its purpose is better not. Flutter gives a widget called ActionChip which permits us to add an action chip to our application.
Demo Module::
This demo video shows how to use the action chip in a flutter and shows how an action chip will work in your flutter applications. We will show a user press the chip then, the chip will trigger an action. It will be shown on your devices.
Constructor:
To utilize ActionChip, you need to call the constructor underneath:
To make an action chip in flutter we need to call the constructor of the ActionChip class given by flutter. ActionChip has two required properties label and onPressed callback.
const ActionChip({
Key? key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
required this.onPressed,
this.pressElevation,
this.tooltip,
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,
})
Without utilizing these properties we can’t make an action chip. We need to set the label with a widget, typically a text widget. The onPressed callback is utilized to play out any action when the chip is squeezed.
Properties:
There are some properties of ActionChip are:
- > avatar — This property is used to add an avatar to the action chip.
- > shape — This property is used to change the shape of the action chip.
- > shadowColor — This property is used to apply color to the shadow which appears when the chip has elevation.
- > pressElevation — This property is used to provide elevation when the chip is pressed.
- > onPressed — This property is used to perform some action when we press the chip.
- > labelStyle — This property is used to apply a style to the label like changing font size, font family, text color, etc.
- > backgroundColor — This property is used to change the background color of the action chip.
- > side — This property is used to apply a border to the action chip.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class MyHomePage(). In this class, we will create a bool selected that is equal to the false.
bool selected = false;
In the body, we will add a Center widget. In this widget, we will add a Column widget and add an image with height and width. Also, we will add a Container widget.
Center(
child: Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Container(
alignment: Alignment.topCenter,
margin: const EdgeInsets.only(top: 20),
child: ActionChip(
backgroundColor: Colors.brown.shade200,
padding: const EdgeInsets.only(top: 20,left: 20, right: 20,bottom: 20),
avatar: selected ? const CircularProgressIndicator() : null,
label: Text(selected ? "Cancel" : "Download",style: const TextStyle(fontSize: 16),),
onPressed: () {
selected = !selected;
setState(() {});
},
elevation: 8),
),
],
),
)
On this widget, we will add an alignment was the topCenter and add an ActionChip widget. Inside the widget, we will add backgroundColor, padding, avatar, label, elevation, and onPressed function. In this function, we will add selected equal not selected.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_action_chip_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: const Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool selected = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"Flutter Action Chip Demo",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.brown.shade200,
),
body: Center(
child: Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Container(
alignment: Alignment.topCenter,
margin: const EdgeInsets.only(top: 20),
child: ActionChip(
backgroundColor: Colors.brown.shade200,
padding: const EdgeInsets.only(
top: 20, left: 20, right: 20, bottom: 20),
avatar: selected ? const CircularProgressIndicator() : null,
label: Text(
selected ? "Cancel" : "Download",
style: const TextStyle(fontSize: 16),
),
onPressed: () {
selected = !selected;
setState(() {});
},
elevation: 8),
),
],
),
));
}
}
Conclusion:
In the article, I have explained the Action Chip basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Action Chip User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Action Chip in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Action Chip, and make a demo program for working with Action Chip in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
