Imaginez que vous utilisez une application pour effectuer une tâche importante : remplir un long formulaire ou passer d'un écran à un autre. Cependant, vous êtes interrompu au milieu ou le téléphone redémarre. Qu'avons-nous lorsque nous revenons après un certain temps ?
Vous constatez que tout est comme avant !
C'est l'élégance de restauration de l'état dans Flutter, faites exactement ce que son nom suggère, en vous assurant de ne pas perdre votre tâche en cours dans l'application.
Dans ce blog, vous découvrirez comment Flutter accompagne ses développeurs dans préserver l'état de l'application en permettant aux utilisateurs de reprendre leur travail à n'importe quelle session. Découvrez également comment la classe de restauration personnalisée va encore plus loin pour permettre aux développeurs de gérer des scénarios complexes.
Qu’est-ce que la restauration de l’état dans Flutter ?
La gestion de l'état est un aspect essentiel du développement d'applications mobiles modernes. Mais parfois, cela ne parvient pas à résoudre les cas où le système tue l'état de l'application ou où l'utilisateur décide de mettre l'application en pause puis de continuer à l'utiliser. C'est là restauration de l'état est utile – permettant à l'application de rappeler où elle se trouvait avant de reprendre l'état afin de conserver les données utilisateur lors de certains changements d'état.
La restauration d'état fait référence au processus dans lequel l'état d'une application et des widgets est préservé lorsque l'application est fermée ou qu'elle n'est plus utilisée. Si l'utilisateur revient dans l'application, l'état reprend pour que l'utilisateur puisse poursuivre sa progression, améliorant ainsi l'expérience utilisateur.
Pourquoi une restauration personnalisée est-elle requise ?
Flutter propose des solutions pour la gestion de l'état, mais il existe des cas où l'ensemble de l'état de l'application doit être sauvegardé, ce qui peut demander plus d'efforts. Considérez une application avec des opérations utilisateur complexes : formulaires ou étapes, ailes de navigation ou interfaces orientées saisie.
Dans de tels cas, il devient possible que le programme de restauration par défaut de Flutter ne puisse pas répondre aux besoins de l'état de l'application. Cependant, pour appliquer des modifications flexibles à n’importe quel état d’application, la restauration de l’état personnalisé peut être la meilleure approche.
Gestion de l'état par défaut et restauration de l'état
Flutter fournit des systèmes de gestion d'état intégrés, tels que Provider, Bloc et Riverpod, qui aident à maintenir l'état au cours d'une session en cours. Cependant, ces systèmes ne gèrent pas automatiquement la restauration lorsqu'un système d'exploitation ferme ou suspend une application. Restauration de l'État garantit que les données sont préservées même lorsque l'application est complètement arrêtée, offrant une approche de gestion de l'état plus robuste.
Cas d'utilisation pour la restauration de l'état
La restauration de l'état est obligatoire dans les applications qui doivent préserver la progression de l'utilisateur au fil des sessions.
Par exemple:
- Les formulaires en plusieurs étapes sont longs et les utilisateurs peuvent les laisser à mi-chemin pour les reprendre plus tard.
- Naviguer à travers plusieurs écrans d'applications de commerce électronique ou similaires sur lesquels les utilisateurs souhaitent revenir au dernier écran qu'ils ont visité.
- Effectuer des opérations gourmandes en entrées dans les interfaces d’applications de jeu où les utilisateurs souhaitent reprendre exactement là où ils s’étaient arrêtés.
Comment fonctionne la restauration d'état intégrée de Flutter ?
Les mécanismes de restauration d'état de Flutter sont implémentés dans le Framework pour prendre en charge les interfaces utilisateur au cas où elles seraient fermées par l'utilisateur ou perturbées. Cette fonctionnalité est utile pour créer des applications mobiles, dans lesquelles les utilisateurs souhaitent accéder à d'autres sessions sans interruption. Le système de restauration étatique s’articule autour de trois concepts clés :
- RestaurationMixin:
- Il s'agit d'un mixin puissant qui peut être implémenté sur n'importe quel widget.
- Enregistre automatiquement l'état d'un widget lorsque l'application effectue les tâches en arrière-plan ou lorsqu'elle est fermée.
- Restaure l'état précédent du widget lorsque l'application est rouverte sans nécessiter de logique complexe pour le chargement des données.
- Simplifie le développement de l'application, afin que les développeurs puissent se concentrer sur la création de fonctionnalités complexes.
- ID de restauration :
- Un identifiant unique qui connecte l'état d'un widget à une étendue de restauration particulière.
- Un widget doit avoir un ID de restauration unique pour conserver son état.
- Garantit que l'application doit récupérer l'état correct pour chaque widget lors de sa restauration.
- Aide à maintenir plusieurs états sur divers widgets, favorisant ainsi une gestion organisée des états.
- RestaurationPortée:
- Définit l'environnement dans lequel les widgets fournissent les mêmes ID de restauration.
- Il est crucial de regrouper collectivement les widgets qui nécessitent une restauration de l’état.
- Garantit que plusieurs widgets sur une page ou une fonctionnalité récupèrent leurs états à partir du même contexte.
- Maintient la cohérence en regroupant les états associés et améliore ainsi l’expérience utilisateur.
En conclusion, puisque la restauration de l’État fait déjà partie du cadre du flutter, elle utilise RestaurationMixin, ID de restaurationet RestaurationPortée offrir un mécanisme fiable et très efficace pour la gestion de l'état des applications afin d'améliorer encore la convivialité de ces applications sans trop demander d'efforts supplémentaires de la part des développeurs.
Un guide pour configurer la restauration de l'état de base dans Flutter
Vous souhaitez implémenter la restauration de l’état dans Flutter ? C'est simple, suivez les étapes de base indiquées ci-dessous :
- Ajoutez le RestorationMixin au widget.
- Implémentez la méthode restaurerState, elle spécifie comment chaque état doit être restauré.
- Utilisez RestorationId pour vous assurer que chaque widget possède une clé unique qui se connecte à son état.
Exemple de code : application de compteur de base avec restauration d'état
class RestorableCounter extends StatefulWidget {
@override
_RestorableCounterState createState() => _RestorableCounterState();
}
class _RestorableCounterState extends State with RestorationMixin {
final RestorableInt _counter = RestorableInt(0);
@override
String get restorationId => 'counter';
@override
void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
registerForRestoration(_counter, 'counter');
}
void _incrementCounter() {
setState(() {
_counter.value++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('State Restoration Example')),
body: Center(
child: Text('Counter: ${_counter.value}'),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
);
}
} Dans cet exemple, l'état du compteur est enregistré et restauré au fil des sessions d'application, offrant ainsi une expérience transparente.
Implémentation de la restauration d'état personnalisée dans Flutter
Flutter propose divers Propriété restaurable des types comme RestorableBool, RestorableInt et RestorableTextEditingController pour prendre en charge la gestion de l'état pour les types de données intégrés. Cependant, pour gérer les types de données personnalisés, utilisez RestorableCustomValue.
Exemple de code : données restaurables personnalisées dans une application complexe
Par exemple, si vous souhaitez enregistrer et restaurer la saisie du formulaire ajoutée par l'utilisateur, utilisez simplement une propriété restaurable pour stocker les données.
class RestorableUserFormData extends RestorableCustomValue {
RestorableUserFormData() : super(UserFormData());
@override
UserFormData fromPrimitives(Object? data) {
final json = data as Map;
return UserFormData.fromJson(json);
}
@override
Object toPrimitives() {
return value.toJson();
}
} Dans cet exemple, RestorableCustomValue gère un type de données personnalisé (UserFormData) qui peut être stocké et restauré à l'aide de JSON.
Meilleures pratiques pour la restauration de l’état Flutter
Pour mettre en œuvre efficacement la restauration de l’état, suivez les meilleures pratiques mentionnées ci-dessous pour le développement et la conception de code. Voici quelques lignes directrices :
- Utilisez RestorationMixin judicieusement:
- Implémentez RestorationMixin uniquement lorsque cela est nécessaire pour éviter les goulots d’étranglement des performances.
- Limitez son utilisation aux widgets qui gèrent les interactions des utilisateurs ou les états importants pour que la restauration reste efficace.
- Organisez soigneusement les identifiants de restauration:
- Fournissez des RestorationIds uniques pour chaque widget dans la portée.
- Structurez soigneusement vos identifiants de restauration dans des états complexes, pour éviter les duplications et les conflits.
- Taille de l'état limite:
- Évitez de restaurer des objets volumineux ou complexes directement au sein de l’État.
- Stockez les références telles que les identifiants et récupérez uniquement les données requises de manière asynchrone. Cela minimise la surcharge de mémoire et accélère la restauration.
- Restaurer les états des widgets imbriqués:
- Assurez-vous que la restauration de l'état couvre tous les widgets imbriqués dans l'application pour maintenir la cohérence dans l'ensemble de l'interface utilisateur.
- Utilisez RestorationScope pour garantir la restauration des widgets associés, sans rompre la hiérarchie.
- Gérer correctement les données asynchrones:
- Vérifiez et répertoriez les widgets qui dépendent des données asynchrones lors de la restauration de l'état.
- Assurez-vous que la récupération des données se déroule sans problème une fois la restauration de l'état terminée, en préservant les espaces réservés ou en chargeant les indicateurs si nécessaire.
- Testez de manière approfondie la restauration de l'état:
- Appliquez un test pour garantir que les états restaurés sont cohérents et prévisibles dans les différents états de l'appareil.
- Testez les cas extrêmes tels que le changement rapide d'application, l'arrière-plan et les scénarios de mémoire insuffisante pour vous assurer que le système les gère correctement.
Le rôle de la conception de l'interface utilisateur dans la restauration de l'état : Figma to Flutter
L'interface utilisateur est la clé de la manière dont les utilisateurs parviennent à afficher l'état restauré dans une application. En général, la conception efficace de l'interface utilisateur vise à permettre aux utilisateurs de poursuivre leurs activités avec peu de confusion ou d'interruption.
- L'interface utilisateur comme guide visuel pour la restauration de l'état:
- L'interface utilisateur doit informer les utilisateurs de l'état restauré de l'application lorsqu'ils reprennent l'état de l'application (dans le même état qu'ils ont quitté).
- Encore une fois, des composants tels que les panneaux à onglets, les contrôles de formulaire et les barres de navigation doivent conserver leur emplacement et leurs états de valeur précédents.
- Concevoir pour la restauration dans Figma:
- Lors de la conception d'un composant dans Figma, les barres de progression, les curseurs et les entrées de formulaire doivent être pris en compte en vue de la restauration.
- Accompagnez les conceptions de prototypage de Figma de visuels pour indiquer où l'utilisateur a été interrompu. Répliquez ces conceptions sous forme de widgets Flutter.
- Cohérence de Figma à Flutter:
- Assurez-vous que les systèmes de conception de Figma correspondent correctement à l'architecture basée sur les widgets de Flutter.
- Les concepteurs transmettent les maquettes d'interface utilisateur aux développeurs principalement dans Figma. Ainsi, après la restauration, les éléments Figma des concepteurs doivent correspondre aux widgets de Flutter après la conversion de Figma en Flutter.
Améliorez l'expérience utilisateur avec la restauration de l'état
La restauration d'état est un outil important dans l'arsenal de Flutter qui améliore l'expérience utilisateur en préservant les états d'une session à l'autre. Bien que le système de restauration intégré de Flutter fonctionne parfaitement pour les cas d'utilisation simples, la gestion d'applications complexes nécessite des solutions personnalisées.
C'est là que le cadre flexible de restauration d'état de Flutter et RestorableCustomValue gèrent bien le travail. Grâce à ces fonctionnalités, les développeurs peuvent garantir que même les widgets avec état les plus complexes sont préservés de manière transparente.
Préparez-vous à l'utiliser dans vos applications Flutter !
Consultez le guide officiel de la restauration de l'état dans Flutter et essayez-le sur votre prochain projet. Si vous recherchez une bonne mise en œuvre de votre vision dans une application mobile, engagez des développeurs Flutter possédant les meilleures compétences. Dans l'ensemble, l'intégration de la restauration d'état aidera les développeurs à améliorer l'expérience utilisateur avec la restauration des états consommés et à créer une expérience fluide et intuitive !
