Implement ActionListener In Flutter
Listeners on the Action class should have their listener callbacks eliminated with Action.removeActionListener when the listener is disposed of. This widget assists with that. It gives a lifetime to the association between the listener and the Action. It additionally helps by taking care of the adding and removing of the listener at the right focuses in the widget lifecycle.
In this article, we will explore the Implement ActionListener In Flutter. We will implement an ActionListener demo program and how to use it in your flutter applications.
ActionListener class – widgets library – Dart API
A helper widget for making sure that listeners on action are removed properly. Listeners on the Action class must…api. flutter.dev
Table Of Contents::
Introduction:
ActionListener is the helper widget. You can utilize it to remove listeners from the activity. If you pay attention to an Action widget in a widget hierarchy, you should utilize this widget. If you are utilizing an Action outside of a widget context, you should call removeListener yourself.
Demo Module :
This demo video shows how to implement an ActionListener widget in a flutter. It shows how the ActionListener will work in your flutter applications. It shows where the user presses the action listener button, then a message will be shown on the bottom of a screen. It will be shown on your device.
Constructor:
To utilize ActionListener, you need to call the constructor underneath:
const ActionListener({
Key? key,
required this.listener,
required this.action,
required this.child,
})
In the above Constructor, all fields marked with @required must not be empty.
Properties:
There are some properties of ActionListener are:
- > action: This property is used to the action that the callback will be registered with.
- > child: This property is used to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.
- > hashCode: This property is used to the hash code for this object.
- > key: This property is used to control how one widget replaces another widget in the tree.
- > listener: This property is used to the ActionListenerCallback callback to register with the action.
- > runtimeType: This property is used to the representation of the runtime type of the object.
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.
First, we will create an ActionListenerDemo class on this dart file. We will create a bool variable _on is equal to false and the final MyAction class was _myAction variable.
bool _on = false;
late final MyAction _myAction;
Lets describe MyAction class are:
MyAction class was extended Action<MyIntent> and we will add three override methods. First, we will add addActionListener in the bracket we will add (ActionListenerCallback listener). When we enable that button then ‘Action Listener was added’ print on the terminal. Second, we will add removeActionListener in the bracket we will add (ActionListenerCallback listener). When we disable that button then ‘Action Listener was removed’ prints on the terminal. Third, we will add invoke in the bracket we will add (covariant MyIntent intent). They will work notifyActionListeners().
class MyAction extends Action<MyIntent> {
@override
void addActionListener(ActionListenerCallback listener) {
super.addActionListener(listener);
print('Action Listener was add');
}
@override
void removeActionListener(ActionListenerCallback listener) {
super.removeActionListener(listener);
print('Action Listener was remove');
}
@override
void invoke(covariant MyIntent intent) {
notifyActionListeners();
}
}
We will create an initState() method. In this method, we will add _myAction variable is equal to the MyAction() class.
@override
void initState() {
super.initState();
_myAction = MyAction();
}
We will create a _toggleState() method. In this method, we will add setState() function. This function will add _on bool variables equal to the not !_on.
void _toggleState() {
setState(() {
_on = !_on;
});
}
In the body, we will add the Padding widget. In this widget, we will add a Container with width and height. It’s child property, we will add OutlinedButton() widget. Inside the widget, we will add style, onPressed method, and its child property we will add text “_on? ‘Disable’: ‘Enable’ “. When _on bool variable is true then Enable button will be shown else Disable button will be shown.
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 100,
height: 38,
child: OutlinedButton(
style:OutlinedButton.styleFrom(primary: Colors.cyan, ) ,
onPressed: _toggleState,
child: Text(_on ? 'Disable' : 'Enable'),
),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will add ActionListener() widget. We will add if (action.intentType == MyIntent) then show a showSnackBar message and text ‘Action Listener Call’/ on listener. We will add an _myAction variable on action. We will add ElevatedButton() on its child property.
if (_on)
Padding(
padding: const EdgeInsets.all(8.0),
child: ActionListener(
listener: (Action<Intent> action) {
if (action.intentType == MyIntent) {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
backgroundColor: Colors.blueGrey,
content: Text('Action Listener Call'),
));
}
},
action: _myAction,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.cyan),
),
onPressed: () => const ActionDispatcher()
.invokeAction(_myAction, const MyIntent()),
child: const Text('Call Action Listener'),
),
),
),
if (!_on) Container(),
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_listner_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(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class ActionListenerDemo extends StatefulWidget {
const ActionListenerDemo({Key? key}) : super(key: key);
@override
State<ActionListenerDemo> createState() => _ActionListenerDemoState();
}
class _ActionListenerDemoState extends State<ActionListenerDemo> {
bool _on = false;
late final MyAction _myAction;
@override
void initState() {
super.initState();
_myAction = MyAction();
}
void _toggleState() {
setState(() {
_on = !_on;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan,
title: Text("Flutter ActionListener Demo")
),
body: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 100,
height: 38,
child: OutlinedButton(
style:OutlinedButton.styleFrom(primary: Colors.cyan, ) ,
onPressed: _toggleState,
child: Text(_on ? 'Disable' : 'Enable'),
),
),
),
if (_on)
Padding(
padding: const EdgeInsets.all(8.0),
child: ActionListener(
listener: (Action<Intent> action) {
if (action.intentType == MyIntent) {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
backgroundColor: Colors.blueGrey,
content: Text('Action Listener Call'),
));
}
},
action: _myAction,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.cyan),
),
onPressed: () => const ActionDispatcher()
.invokeAction(_myAction, const MyIntent()),
child: const Text('Call Action Listener'),
),
),
),
if (!_on) Container(),
],
),
),
);
}
}
class MyAction extends Action<MyIntent> {
@override
void addActionListener(ActionListenerCallback listener) {
super.addActionListener(listener);
print('Action Listener was add');
}
@override
void removeActionListener(ActionListenerCallback listener) {
super.removeActionListener(listener);
print('Action Listener was remove');
}
@override
void invoke(covariant MyIntent intent) {
notifyActionListeners();
}
}
class MyIntent extends Intent {
const MyIntent();
}
Conclusion:
In the article, I have explained the basic implementation of the ActionListener in a flutter; you can modify this code according to your choice. This was a small introduction to ActionListener On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the ActionListener in your flutter projects. We will show you what the Introduction is?. Show constructor and properties of the ActionListener. Make a demo program for working ActionListener, and it shows where the user presses the action listener button, then a message will be shown on the bottom of a screen in your flutter application. 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! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
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.
