Comment afficher ou faire disparaitre du contenu après un délai dans Flutter ?
Créer une transition avec un timer dans Flutter est assez facile à mettre en place. Je vous explique ici comment faire, grâce à un code d’exemple que vous pouvez adapter selon vos besoins.
Étape 1 : Importer les packages nécessaires
La première chose à faire, si vous ne l’avez pas déjà faite, est d’importer les deux packages dont vous aurez besoin pour mettre en place un Timer et construire vos pages :
- package/material.dart : Ce paquet est la bibliothèque de base pour le développement d’applications Flutter avec Material Design.
- dart async : Ce paquet est nécessaire pour utiliser le Timer.
import 'dart:async';
import 'package:flutter/material.dart';Étape 2 : Mise en place de la structure de votre application
Comme pour n’importe quelle application, vous allez d’abord devoir mettre en place une fonction main void() pour la lancer. Vous aurez également besoin de créer un widget A qui correspond à la page montrée initialement et un widget B qui s’affichera à l’issue du Timer.
main() {
runApp(const MyApp());
}
//MY APP
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: IntroScreen(),
);
}
}Ici, la fonction runApp, va lancer mon widget myApp, qui par défaut contient le widget IntroScreen (widget A).
Mon widget A qui sert de page d’introduction :
class IntroScreen extends StatefulWidget {
const IntroScreen({super.key});
@override
State<IntroScreen> createState() => _IntroScreenState();
}
class _IntroScreenState extends State<IntroScreen>
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
color: Color.fromARGB(255, 239, 132, 124),
child: const Center(child: Text("Ma page d'intro", style: TextStyle(fontSize: 25),))));
}
}Mon widget B qui me sert de page principale :
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
color: const Color.fromARGB(255, 121, 164, 186),
child: const Center(
child: Text("Ma page principale", style: TextStyle(fontSize: 25)),
)),
);
}
}Étape 3 : Mettre en place le timer
Enfin, ne reste plus qu’à placer le timer dans votre widget A, qui va se lancer dès que l’écran est in initialisé ( iniState() ). Une fois, le décompte écoulé, la fonction que vous aurez définie va se lancer. Dans le cas présent, ma page d’introduction va disparaitre après 3 seconde, pour être remplacée par ma page principale :
class IntroScreen extends StatefulWidget {
const IntroScreen({super.key});
@override
State<IntroScreen> createState() => _IntroScreenState();
}
class _IntroScreenState extends State<IntroScreen>
{
@override
void initState() {
super.initState();
Timer(const Duration(seconds: 3), () {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen()));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
color: Color.fromARGB(255, 239, 132, 124),
child: const Center(child: Text("Ma page d'intro", style: TextStyle(fontSize: 25),))));
}
}Enfin, vous pouvez bien-sûr ajouter un effet de transition entre vos pages ou ajouter des déclarations conditionnelles pour rediriger vers une page différente selon différents cas de figures. Tout cela devra alors être ajouté dans la fonction iniState().
