Cómo comunicarse entre widgets con Flutter usando VoidCallback y Function(x)

Introducción

Un buen paradigma para tus proyectos Flutter es separar tus widgets en unidades pequeñas y comprobables que puedan adaptarse a su contexto.

Flutter ofrece VoidCallbacky Function(x)(donde xpuede ser un tipo diferente) para eventos de estilo de devolución de llamada entre widgets secundarios y primarios.

En este artículo, utilizará eventos de estilo de devolución de llamada para comunicarse entre widgets con Flutter.

Prerrequisitos

Para seguir este artículo necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este artículo fue verificado con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_widget_communication

Navegue hasta el nuevo directorio del proyecto:

cd flutter_widget_communication

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Desarrollarás el código generado para experimentar con eventos de estilo de devolución de llamada.

Paso 2: Pasar datos de un widget principal a un widget secundario

Creará un widget principal ( CounterPage) y un widget secundario ( Count). El countvalor del principal se mostrará en el secundario.

Ábrelo main.darten tu editor de código y modifícalo para usar CounterPage():

lib/main.dart

import 'package:flutter/material.dart';import 'counter_page.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Widget Communication',      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: CounterPage(),    );  }}

Este código mostrará el CounterPage.

Crea un nuevo counter_page.dartarchivo y agrega las siguientes líneas de código:

lib/counter_page.dart

import 'package:flutter/material.dart';import 'count.dart';class CounterPage extends StatefulWidget {  _CounterPageState createState() = _CounterPageState();}class _CounterPageState extends StateCounterPage {  int count = 0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text("Widget Communication")),      body: Center(        child: Count(count),      ),    );  }}

Este código pasará counta un widget secundario.

Crea un nuevo count.dartarchivo y agrega las siguientes líneas de código:

lib/count.dart

import 'package:flutter/material.dart';class Count extends StatelessWidget {  final int count;  Count(this.count);  @override  Widget build(BuildContext context) {    return Text("$count");  }}

Compila tu código y ejecútalo en un emulador:

Esto mostrará el count(actualmente configurado en el número cero) en la pantalla.

A continuación, agregarás un VoidCallback.

Paso 3 — UsoVoidCallback

Para el propósito de este tutorial, querrá crear un Buttonque registre los clics y notifique al padre CounterPage.

Como no desea devolver un valor aquí, deberá registrar un VoidCallback. También agregará llaves a los elementos dentro del Countconstructor para convertirlos en parámetros con nombre .

Revisar count.darty agregar onCountSelected:

lib/count.dart

class Count extends StatelessWidget {  final int count;  final VoidCallback onCountSelected;  Count({    @required this.count,    this.onCountSelected,  });  @override  Widget build(BuildContext context) {    return FlatButton(      child: Text("$count"),      onPressed: () = onCountSelected(),    );  }}

Luego, vuelva a visitar counter_page.darty escuche la onCountSelecteddevolución de llamada:

lib/counter_page.dart

import 'package:flutter/material.dart';import 'count.dart';class CounterPage extends StatefulWidget {  _CounterPageState createState() = _CounterPageState();}class _CounterPageState extends StateCounterPage {  int count = 0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text("Widget Communication")),      body: Center(        child: Count(          count: count,          onCountSelected: () {            print("Count was selected.");          },        )      ),    );  }}

Compila tu código y ejecútalo en un emulador. Interactúa con el botón y observa el resultado en tu consola:

OutputCount was selected.

En este punto, sin embargo, el countvalor seguirá siendo cero.

A continuación, agregarás un Function(x).

Paso 4 — UsoFunction(x)

VoidCallbackes útil para eventos de devolución de llamada sin valor esperado. Para situaciones en las que desea devolver un valor al padre, deberá utilizar Function(x).

Revisar count.darty agregar Function(int) onCountChanged:

lib/count.dart

import 'package:flutter/material.dart';class Count extends StatelessWidget {  final int count;  final VoidCallback onCountSelected;  final Function(int) onCountChanged;  Count({    @required this.count,    @required this.onCountChanged,    this.onCountSelected,  });  @override  Widget build(BuildContext context) {    return Row(      mainAxisAlignment: MainAxisAlignment.center,      children: Widget[        IconButton(          icon: Icon(Icons.add),          onPressed: () {            onCountChanged(1);          },        ),        FlatButton(          child: Text("$count"),          onPressed: () = onCountSelected(),        ),        IconButton(          icon: Icon(Icons.remove),          onPressed: () {            onCountChanged(-1);          },        ),      ],    );  }}

Luego, vuelva a visitar counter_page.darty escuche la onCountChangedevolución de llamada:

lib/counter_page.dart

import 'package:flutter/material.dart';import 'count.dart';class CounterPage extends StatefulWidget {  _CounterPageState createState() = _CounterPageState();}class _CounterPageState extends StateCounterPage {  int count = 0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text("Widget Communication")),      body: Center(        child: Count(          count: count,          onCountSelected: () {            print("Count was selected.");          },          onCountChanged: (int val) {            setState(() = count += val);          },        )      ),    );  }}

Cuando se hace clic en un botón, el valor de cambio se pasa del Countwidget secundario al widget principal. Luego, se realiza CounterPagela suma entre valy y se actualiza.countcount

Compila tu código y ejecútalo en un emulador:

Interactúe con los botones Agregar ( +) y Quitar ( ), el valor debe incrementar y disminuir respectivamente.-count

Conclusión

En este artículo, aprendió a usar VoidCallbacky Function(x)utilizar eventos de estilo de devolución de llamada para comunicarse entre widgets con Flutter.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.