Dans Flutter, la communication entre les widgets peut utiliser VoidCallback et Function Callback.
Les VoidCallbacks sont des callbacks qui ne renvoient pas de valeur au Widget parent. C’est utile si l’on veut seulement notifier le Widget Parent des événements qui se sont produits sur le Widget Enfant.
La fonction Callback est une fonction de rappel qui notifie le Widget parent d’un événement qui se produit dans le Widget enfant et qui renvoie également une valeur au Widget parent.
typedef VoidCallback = void Function();
Les VoidCallbacks et les Function Callbacks sont tous deux des fonctions. La seule différence est que VoidCallback n’a pas d’arguments et ne renvoie aucune donnée.
Dans cet article, Bardimin donne un exemple simple d’utilisation de VoidCallback et de Function Callback dans une application simple.
Autres articles intéressants
1. Créer un nouveau projet Flutter
Dans un premier temps, créez un nouveau projet Flutter avec Android Studio. Vous pouvez consulter l’intégration de Flutter et d’Android Studio dans l’article How to Easily Install Flutter on Android Studio and Windows.
Une fois le nouveau projet créé, nous allons modifier le fichier d’exemple pour créer une application simple qui utilise VoidCallback et Function Callback.
Dans le fichier « main.dart », modifiez comme suit.
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. Créer un widget parent
Créez ensuite un nouveau fichier avec le nom » parent_widget.dart . Dans ce fichier, nous créerons les fonctions « _voidCallback » et « _functionCallback », que nous appellerons depuis le Child Widget.
Nous appellerons la fonction « _voidCallback » en utilisant « VoidCallback ».
void _voidCallback() {
setState(() {
_counter++;
});
}
Nous appellerons la fonction « _functionCallback(int i) » avec des paramètres en utilisant « Function(x) Callback.
void _functionCallback(int i) {
setState(() {
_counter += i;
});
}
Le fichier « parent_widget.dart » que nous avons créé est complété comme suit.
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. Créer un widget enfant VoidCallback
Ensuite, créez un fichier » voidcallback_child_widget.dart « . Dans ce fichier, nous créerons un bouton qui appellera la fonction « _voidCallback » dans le fichier « 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. Créer un widget enfant de rappel de fonction
Créez ensuite un fichier » function_ child_widget.dart « . Comme précédemment, dans ce fichier, nous créerons également un bouton qui appellera la fonction « _functionCallback(int i) » dans le fichier « parent_widget.dart » qui renverra une valeur entière.
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"),
);
}
}
Lancez ensuite le projet. Sur l’émulateur, vous verrez qu’il y a deux boutons, à savoir les boutons « VoidCallback » et « Fx Callback ».
Si vous cliquez sur le bouton « VoidCallback », le widget enfant VoidCallback appellera simplement la fonction « _voidCallback » du widget parent, sans renvoyer de valeur.
Parallèlement, si vous cliquez sur le bouton « Fx Callback », le widget enfant Function Callback appellera la fonction « _functionCallback(int i) » du widget parent en renvoyant une valeur entière.