Bonjour à tous ! Dans cet article, nous allons explorer le concept des AppState Variables dans FlutterFlow. Tout comme les PageState, les AppState sont des données locales mais elles sont accessibles à l’échelle de toute l’application. Contrairement aux PageState qui sont limitées à une seule page, les AppState vous permettent de gérer des informations globales comme les préférences utilisateur. Plongeons ensemble dans la création et l’utilisation des AppState Variables avec FlutterFlow.
Qu’est-ce que les App State Variables ?
Les App State Variables sont des variables locales à l’application qui, à la différence des PageState, sont accessibles à l’échelle de toute l’application. Cela signifie que vous pouvez les utiliser pour stocker des données importantes qui doivent être accessibles partout dans votre application, comme les préférences de langue d’un utilisateur ou des paramètres initiaux spécifiques.
Cas d’usage typiques
- Préférences utilisateur : Sauvegarder la langue préférée de l’utilisateur.
- Paramètres initiaux : Stocker des configurations spécifiques nécessaires lors de l’initialisation de l’application.
- Authentification : Utiliser des tokens d’authentification qui doivent être accessibles dans toute l’application.
Création d’une App State Variable
Pour créer une App State Variable, suivez les étapes ci-dessous :
- Accéder à l’onglet App State : Dans la barre de navigation FlutterFlow, rendez-vous sur l’onglet « App Value » et sélectionnez « App State ».
- Créer une nouvelle AppState : Cliquez sur « Créer un nouveau », nommez votre App State (par exemple, « Langue »), et sélectionnez son type de données. FlutterFlow propose divers types de données comme chaîne de caractères, integer, dates, etc.
- Configurer l’App State : Vous pouvez choisir si c’est une liste ou non et si elle doit être persistée (sauvegardée même après la fermeture de l’application).
Utilisation des App State Variables dans l’interface utilisateur
Sauvegarder une App State Variable
Pour sauvegarder une App State Variable :
- Créer une action updateAppState : Sur votre page, créez une action « update App State ». Cela vous permettra de sélectionner l’App State que vous souhaitez mettre à jour, par exemple « Langue ».
- Initialiser la valeur : Associez la valeur de l’App State à un widget TextField ou autre élément utilisateur.
Les options de mise à jour incluent :
- NoRebuild : Met à jour le field sans rafraîchir la page.
- RebuildCurrentPage : Rafraîchit la page courante.
- RebuildAllPage : Rafraîchit toutes les pages actives de l’application.
Afficher une App State Variable
Pour afficher la valeur d’une App State Variable :
- Ajouter un widget texte : Supprimez l’élément TextField et ajoutez un widget texte.
- Sélectionner l’App State : Dans les paramètres du widget texte, allez dans la partie variable, sélectionnez « App State » et choisissez l’App State approprié (par exemple, « Langue »).
Exemples de cas d’utilisation
Préférences de langue
Imaginons que vous souhaitez sauvegarder la préférence de langue d’un utilisateur :
- Créer une App State « Langue » : Suivez les étapes de création d’App State.
- Sauvegarder la langue : Utilisez l’action updateAppState pour sauvegarder la sélection de langue de l’utilisateur.
- Afficher la langue : Utilisez un widget texte pour afficher la langue sauvegardée sur différentes pages de l’application.
Token d’authentification
Si vous utilisez une authentification personnalisée via une API, vous aurez besoin de stocker un token d’authentification :
- Créer une AppState « AuthToken » : Suivez les étapes de création d’App State.
- Stocker le token : Utilisez updateAppState pour stocker le token d’authentification.
- Utiliser le token : Le token sera accessible partout dans l’application pendant la session de l’utilisateur.
Conclusion
Les App State Variables dans FlutterFlow sont un outil puissant pour gérer des données globales dans votre application. Elles vous permettent de sauvegarder et de récupérer facilement des informations cruciales à l’échelle de toute l’application, rendant ainsi votre développement plus flexible et organisé. N’hésitez pas à expérimenter avec les App State pour voir comment elles peuvent simplifier la gestion de vos données dans vos projets FlutterFlow.
Merci d’avoir lu cet article ! Si vous avez des questions, laissez-les en commentaire. Vous trouverez également l’article détaillé en description de la vidéo.
