Greetings readers, today in our Flutter learning journey we will learn Callbacks in Flutter using functions.
Prerequisite
Before we dive into the flutter callbacks, we must have some basic idea of flutter and dart concepts. For this example, you must have a basic idea of how functions work in the flutter.
What are callbacks?
In technical terms, callbacks are the functions that you pass as an argument to other functions. They are executed at a later time, often in response to an event like user interactions, on-tap gestures or the completion of an asynchronous operation.
Imagine you have two screens and need to update the data on one screen when completing operations on the other screen. In Flutter, callbacks provide a convenient way to manage this interaction. It allows you to pass functions between screens to trigger updates seamlessly.
Implementation
In this section, we’ll explore how can we implement callbacks in the Flutter application using functions with a hands-on example.
For this example, we will use the default Flutter counter app and update the counter value from the next screen while the data will be changed on the main screen in real time.
Step 1:- Setup the Action with Functions
Assuming that your code is already set up, you need to create a separate functions that will handle the increment logic.
|
1 2 3 4 5 6 |
void _incrementCounterByCallBack() { setState(() { _counter++; }); } |
Step 2:- Create another view controller with the Add button
Now create a Stateful/Stateless second view controller with an add button that will call our method on the main screen and increase the count. Also, create a function type variable and initialize it on the constructor of your next view controller.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
class NextViewController extends StatelessWidget { const NextViewController({super.key, required this.addCounter}); final Function() addCounter; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Next View Controller"), ), body: Center( child: InkWell( onTap: addCounter, child: const CircleAvatar( radius: 40, child: Icon(Icons.add), ), )), ); } } |
Step 3:- Pass function while navigation
Now, you must initialize the addCounter function before using it so while navigating, you must pass the action function (_incrementCounterByCallBack) as an argument to the NextViewController class.
|
1 2 3 4 |
Navigator.of(context).push(MaterialPageRoute( builder: (context) => NextViewController( addCounter: _incrementCounterByCallBack), )); |
Since the function type of _incrementCounterByCallBack, addCounter and onTap of Inkwell are the same, we don’t need to add any argument to the respective functions.
With this, we are done setting up our callbacks and functions. Now click on the Add button of NextViewController and the counter at the main screen will be increased accordingly.
Output
Once you set up all the mentioned steps, you will see the output something like below.
How this works?
After navigating to the NextViewController, you can see a add button. Once you click on the add button the number of tap count will be updated on realtime on the Home View.
Conclusion
In this article, we learned about callbacks in Flutter using functions as parameters and completed a step-by-step implementation. You can also use callback through ValueChanged which is also a type of callback function.
You can keep learning about the Flutter Framework with our celebrated Mobikul Blogs.
Be the first to comment.