Flutter: trabajar con funciones de devolución de llamada

En este artículo, veremos cómo podemos usar las funciones de devolución de llamada en flutter. Aprenderemos sobre diferentes métodos para implementar funciones de devolución de llamada en flutter. La devolución de llamada es básicamente una función o un método que pasamos como argumento a otra función o método para realizar una acción. En las palabras más simples, podemos decir que Callback o VoidCallback se utilizan al enviar datos de un método a otro y viceversa. Es muy importante mantener un flujo continuo de datos en toda la aplicación flutter.

Supongamos que está trabajando en una aplicación. Esta aplicación muestra algún tipo de datos. Ahora, para modificar los valores en la aplicación, hay 2 enfoques que puede tomar, ya sea cambiar el estado usando varias técnicas de alteración del estado o cambiar el valor usando una devolución de llamada. Si vamos a trabajar con la función de devolución de llamada, hay 2 métodos posibles que podemos usar como se muestra a continuación:

Método 1: escribir directamente la devolución de llamada

En este enfoque, solo definimos la función que se supone que debe activar una devolución de llamada cuando ocurre un evento específico.

Ejemplo:

import 'package:flutter/material.dart';
 
 
// function to trigger the app build process
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      // appbar
      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
  // ignore: library_private_types_in_public_api
  _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'),
          ),
 
          // RaisedButton is deprecated and shouldn't be used.
          // Use ElevatedButton insetad.
           
          // RaisedButton(
          //   // callback function
          //   // this increments the value
          //   // by 1 each time the Raised button is pressed
          //   onPressed: () {
          //     setState(() {
          //       count++;
          //     });
          //   },
          //   child: const Text(''
          //       'increase'),
          // )
        ],
      ),
    );
  }
}

Producción:

Método 2: pasar la función de devolución de llamada

En este enfoque, la devolución de llamada se pasa directamente al evento. Como se muestra en el siguiente ejemplo, la acción onPressed realiza la función de devolución de llamada directa definida en la parte anterior del código. 

Ejemplo: 

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      // appbar
      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
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  int count = 0;
 
  // callback function
  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'),
          ),
 
          // RaisedButton is deprecated and shouldn't be used.
          // Use ElevatedButton insetad.
 
          // RaisedButton(
          //   // callback on Button press
          //   onPressed: callBack,
          //   child: Text(''
          //       'increase'),
          // )
        ],
      ),
    );
  }
}

Producción: