Transmettre les données entre pages dans Flutter
Transmettre les données entre pages dans Flutter
-
Objectif
- Dans cet article, nous allons voir comment transmettre des données à un widget “Stateful” dans Flutter avec des exemples pratiques.
-
Rappel
- Les widgets avec état (stateless) sont modifiables et mettent à jour leurs données chaque fois qu’un
setState((){data;})est appelé. - Les widgets sans état (statefulwidget) , quant à eux, sont immuables, c’est-à-dire qu’ils contiennent des données qui ne doivent pas changer pendant l’exécution.
-
Transmission de données à une autre “Statefulwidget”.
- Lorsque vous passez des données d’un écran à un autre (qui est un Statefulwidget ), le problème est que vous ne pouvez pas accéder directement à la variable. Cela signifie que si vous avez une variable “title” comme paramètre et que la valeur est transmise à partir de la page précédente, vous ne pouvez pas simplement écrire le “title” et afficher la valeur sur le deuxième page.
- Pour transmettre des données au “Statefulwidget“, créez tout d’abord deux pages. Maintenant, à partir de la première page, ouvrez la deuxième page et transmettez les données. À l’intérieur de la deuxième page, accédez à la variable à l’aide de widget. Par exemple widget.title.
-
Instructions étape par étape :
- Étape 1 : Créez la première page et ajoutez le ElevatedButton pour ouvrir la deuxième page.
- Étape 2 : Créez la deuxième page et écrivez une variable qui contiendra la valeur provenant de la première page.
- Étape 3 : Accédez à la première page, à l’intérieur de la méthode onPressed de ElevatedButton , ajoutez un code pour ouvrir la deuxième page et transmettez la valeur dans le nom du paramètre (défini dans la deuxième page).
- Étape 4 : Accédez à la deuxième page, à l’intérieur de la méthode de construction, accédez à la variable à l’aide du widget. Par exemple widget.title, widget.name, widget.age, etc.
- Étape 5 : Redémarrez l’application.
-
Exemple complet :
Cliquez ici
fichier main.dart
import 'package:flutter/material.dart';
import 'home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: PageOne(),
),
);
}
}
fichier home.dart
import 'package:flutter/material.dart';
import 'affichage.dart';
class PageOne extends StatefulWidget {
@override
_PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
String _textFieldValue = 'Le texte transmis est vide';
String _enteredText = '';
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextField(
onChanged: (String value) {
setState(() {
_textFieldValue = value;
_enteredText = value;
});
},
decoration: InputDecoration(
prefixIcon: const Icon(Icons.send),
hintText: 'Hint Text',
helperText: 'Helper Text',
counterText: '${_enteredText.length.toString()} caractère(s)',
border: const OutlineInputBorder(),
),
),
const Text(
'Choose the color (value to be passed) of the Next Page:'),
ElevatedButton(
style: ElevatedButton.styleFrom(
textStyle: const TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
child: const Text('Pink'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
// ignore: prefer_const_constructors
builder: (_) => PageTwo(
passedColor: Colors.pink,
passedColorName: 'Pink',
variabletext: _textFieldValue,
),
),
);
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(
textStyle: const TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
// ignore: prefer_const_constructors
builder: (_) => PageTwo(
passedColor: Colors.blueGrey,
passedColorName: 'Blue',
variabletext: _textFieldValue,
),
),
);
},
child: const Text('Blue'),
),
const SizedBox(
height: 250,
)
],
),
),
);
}
}
fichier affichage.dart
import 'package:flutter/material.dart';
class PageTwo extends StatefulWidget {
final Color passedColor;
final String passedColorName;
final String variabletext;
const PageTwo(
{Key? key,
required this.passedColor,
required this.passedColorName,
required this.variabletext}) //key:key is used
: super(key: key);
@override
_PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page 2'),
automaticallyImplyLeading: false, //to disable going back
),
body: Column(
children: [
Container(
height: 400,
width: double.infinity,
color: widget.passedColor,
child: Align(
alignment: Alignment.center,
child: Text(
'Texte transmit\n ${widget.variabletext} ',
style: const TextStyle(fontSize: 32),
),
),
),
Text('${widget.passedColorName} color was passed'),
ElevatedButton(
style: ElevatedButton.styleFrom(
textStyle: const TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
onPressed: () {
Navigator.pop(context);
},
child: const Text('<- Go back'))
],
),
);
}
}
// Use this if u want to later make changes to the passed value in the code. Full code in the file below
// NOTE: Here 'foo' means 'your value'
// class MyStateful extends StatefulWidget {
// final String foo;
// const MyStateful({Key key, this.foo}): super(key: key);
// @override
// _MyStatefulState createState() => _MyStatefulState(foo: this.foo);
// }
// class _MyStatefulState extends State<MyStateful> {
// String foo;
// _MyStatefulState({this.foo});
// @override
// Widget build(BuildContext context) {
// return Text(foo);
// },}
