Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Working with Callback Functions

  • Last Updated : 15 Feb, 2021

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 as a callback when a specific event occurs.

Example:



Dart




import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        
      // appbar
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatefulWidget {
  @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: TextStyle(fontSize: 50.0),
          ),
          RaisedButton(
              
              // callback function
              // this increments the value 
              // by 1 each time the Raised button is pressed
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              child: 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: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  int count = 0;
    
  // callback function
  VoidCallback callBack() {
    setState(() {
      count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '$count',
            style: TextStyle(fontSize: 50.0),
          ),
          RaisedButton(
              
              // callback on Button press
              onPressed: callBack,
              child: Text(''
                  'increase'))
        ],
      ),
    );
  }
}

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :