Flutter – Working with Callback Functions
Last Updated :
21 Jun, 2022
In this article, we will see how we can use callback functions in flutter. We will learn about different methods to implement callback functions in flutter. Callback is basically a function or a method that we pass as an argument into another function or a method to perform an action. In the simplest words, we can say that Callback or VoidCallback are used while sending data from one method to another and vice-versa. It is very important to maintain a continuous flow of data throughout the flutter app.
Let’s assume that you are working on an app. This app displays some sort of data. Now to alter the values in the application, there are 2 approaches that you can take, either change the state using various state-altering techniques or change the value using a Callback. If we are to work with the Callback function there are 2 possible methods that we can use as shown below:
Method 1: Directly writing the callback
In this approach, we just define the function that is supposed to trigger a callback when a specific event occurs.
Example:
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text( 'GeeksForGeeks' ),
backgroundColor: const Color.fromRGBO(15, 157, 88, 1),
),
body: const MyApp(),
),
));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$count' ,
style: const TextStyle(fontSize: 50.0),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: () {
setState(() {
count++;
});
},
child: const Text( ''
'increase' ),
),
],
),
);
}
}
|
Output:
Method 2: Passing the callback function
In this approach, the callback is directly passed to the event. As shown in the below example, the onPressed action makes the direct callback function defined in the earlier part of the code.
Example:
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text( 'GeeksForGeeks' ),
backgroundColor: const Color.fromRGBO(15, 157, 88, 1),
),
body: const MyApp(),
),
));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
callBack() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$count' ,
style: const TextStyle(fontSize: 50.0),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: callBack,
child: const Text( 'increase' ),
),
],
),
);
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...