Cómo utilizar VoidCallback y Function(x) para comunicarse entre widgets en Flutter

En Flutter, la comunicación entre widgets puede utilizar VoidCallback y Function Callback.

VoidCallbacks son callbacks que no devuelven un valor al Widget padre. Esto es útil si sólo queremos notificar al widget padre de eventos que han ocurrido en el widget hijo.

El Callback Function es un callback que notifica al Widget Padre de un evento que ocurre en el Widget Hijo y también devuelve un valor al Widget Padre.

typedef VoidCallback = void Function();

Tanto VoidCallbacks como Function Callbacks son funciones. La única diferencia es que VoidCallback no tiene argumentos y no devuelve datos.

En este artículo, Bardimin dará un ejemplo sencillo del uso de VoidCallback y Function Callback en una aplicación simple

1. Crear un nuevo proyecto Flutter

Como primer paso, crea un nuevo proyecto Flutter con Android Studio. Puedes consultar la integración de Flutter y Android Studio en el artículo Cómo instalar Flutter fácilmente en Android Studio y Windows.

Una vez creado el nuevo proyecto, cambiaremos el archivo de ejemplo para crear una aplicación sencilla que utilice VoidCallback y Function Callback.

En el archivo «main.dart» cambia lo siguiente.

import 'package:flutter/material.dart';
import 'parent_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ParentWidgetPage(title: 'Flutter VoidCallback & Function Callback'),
    );
  }
}

2. Crear un widget padre

A continuación, cree un nuevo archivo con el nombre » parent_widget.dart . En este archivo, crearemos las funciones «_voidCallback» y «_functionCallback», que llamaremos desde el widget hijo.

We will call the “_voidCallback” function using “VoidCallback”.

  void _voidCallback() {
    setState(() {
      _counter++;
    });
  }

Llamaremos a la función «_functionCallback(int i)» con parámetros usando «Function(x) Callback».

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

El archivo «parent_widget.dart» que hemos creado está completo como sigue.

import 'package:flutter/material.dart';
import 'voidcallback_child_widget.dart';
import 'function_child_widget.dart';

class ParentWidgetPage extends StatefulWidget {
  const ParentWidgetPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<ParentWidgetPage> createState() => _ParentWidgetPageState();
}

class _ParentWidgetPageState extends State<ParentWidgetPage> {
  int _counter = 0;

  void _voidCallback() {
    setState(() {
      _counter++;
    });
  }

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            VoidChildWidgetPage(voidCallback: _voidCallback),
            FunctionChildWidgetPage(functionCallback: _functionCallback),
          ],
        ),
      ),
    );
  }
}

3. Crear un widget hijo VoidCallback

A continuación, cree un archivo » voidcallback_child_widget.dart . En este archivo, crearemos un botón que llamará a la función «_voidCallback» en el archivo «parent_widget.dart.

import 'package:flutter/material.dart';

class VoidChildWidgetPage extends StatelessWidget {
  final VoidCallback voidCallback;

  const VoidChildWidgetPage({Key? key, required this.voidCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => voidCallback(),
      child: const Text("Void Callback"),
    );
  }
}

4. Crear un widget hijo de devolución de llamada de función

A continuación, cree un archivo » function_ child_widget.dart». Al igual que antes, en este archivo, también vamos a crear un botón que llamará a la función «_functionCallback(int i)» en el archivo «parent_widget.dart» que devolverá un valor entero.

import 'package:flutter/material.dart';

class FunctionChildWidgetPage extends StatelessWidget {
  final Function(int) functionCallback;

  const FunctionChildWidgetPage({Key? key, required this.functionCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => functionCallback(5),
      child: const Text("Fx Callback"),
    );
  }
}

A continuación, ejecuta el proyecto. En el emulador verás que hay dos botones: «VoidCallback» y «Fx Callback.

Si hace clic en el botón «VoidCallback», el widget hijo VoidCallback simplemente llamará a la función «_voidCallback» del widget padre, sin devolver ningún valor.

Mientras tanto, si hace clic en el botón «Fx Callback», el widget hijo «Function Callback» llamará a la función «_functionCallback(int i)» del widget padre devolviendo un valor entero.