Comment changer le thème de l'application à l'exécution à l'aide du motif BLoC dans Flutter.

Dans de nombreux cas, vous souhaiterez peut-être prendre en charge plusieurs thèmes dans votre application et laisser l'utilisateur les modifier de manière dynamique. Laissez-moi vous expliquer comment procéder dans ce didacticiel en utilisant le modèle «composant de logique métier», également appelé BLoC.

TL; DR; Pour ceux que le code intéresse, voici le code décrit dans cet article: https://github.com/jorgecoca/theme_switcher/tree/theme-switcher-tutorial-1

Nous allons construire une application Flutter qui comprend:

  • Un MaterialApp à la base de notre application
  • Deux pages: la page d'accueil et la page de sélection de thème
  • Un composant BLoC qui recevra un thème sélectionné et émettra un objet ThemeData

Commençons par créer une application nommée theme_switcher, en remplaçant le contenu de main.dart et en créant le fichier home_page.dart qui représentera l’écran «initial» de notre application.

Nous venons de créer une application simple avec, basée sur MaterialApp, une AppBar, un texte centré et un FloatingButton. Devrait ressembler à ceci:

Notre prochaine étape consistera à ouvrir la page ThemeSelectorPage à partir de l’icône que nous avons ajoutée à la barre d’application. Pour ce faire, créons un theme_selector_page.dart et modifions notre page d’accueil pour l’ouvrir lorsque vous appuyez sur le bouton d’icône

Maintenant, notre application ressemble à ceci:

Comme vous pouvez le constater, nos boutons ne font toujours rien. La prochaine étape consiste donc à ajouter des fonctionnalités à ces boutons. Pour cela, nous allons créer un nouveau fichier que nous nommerons themes.dart. Ce fichier aura deux missions:

  • Écoutez les événements de bouton. Ainsi, lorsque nous recevons un événement, nous pouvons émettre un objet ThemeData contenant les spécifications du thème sélectionné.

Pour ce faire, nous utiliserons Stream et Sink. Vous pouvez considérer Sink comme une entrée asynchrone de votre BLoC et Stream comme la même chose, mais comme une sortie.

En utilisant un peu de RxDart, notre mission principale ici est de transformer l’entrée du nom de thème sélectionné et de le transformer en objet ThemeData. Cela ressemble à quelque chose comme ça:

selectedTheme.distinct (). map ((theme) => theme.data);

Nous utilisons distinct () ici pour éviter de repeindre le même thème.

Pour utiliser RxDart, nous devrons ajouter un nouveau paquet à notre publication pubspec et mettre à jour nos dépendances avec rxdart: ^ 0.18.1.

Avec cette information, notre fichier themes.dart ressemblera à ceci:

Nous avons défini un modèle DemoTheme qui constituera notre entrée BLoC et notre classe ThemeBloc a défini un Sink pour traiter les entrées, une sortie Stream pour émettre nos thèmes et notre thème initial.

Maintenant, nous pouvons mettre à jour notre page ThemeSelectorPage pour lier nos événements de bouton au puits dans le BLoC:

Nous avons ajouté un constructeur pour marquer notre ThemeBloc en tant que dépendance.

La prochaine étape consiste à modifier nos fichiers main.dart et home_page.dart afin de réagir aux nouveaux thèmes émis:

Décrivons ces changements:

  • Notre ThemeSwitcherApp renvoie maintenant un StreamBuilder, qui nous aidera à configurer l'état initial du widget, mais il est également responsable du traitement de la communication avec le Stream du ThemeBloc.
  • Mais pourquoi avons-nous besoin de modifier la page d'accueil? Eh bien, puisque nous accédons à la page ThemeSelector à partir d'ici, il ne s'agit que d'un simple passage pour l'objet ThemeBloc. Si nous créons deux instances de ThemeBloc, nous pourrions émettre des événements dans un objet et écouter des thèmes sur un autre. Il y a de meilleures façons de le faire, comme je l'expliquerai plus loin, mais cela fonctionne pour le moment.

Avec toutes ces pièces réunies, nous pouvons tester notre sélecteur de thèmes:

Hourra!!! Notre application fonctionne !!! Cependant, il y a encore quelques détails que nous pouvons améliorer:

  • Afin d'utiliser la même instance de ThemeBloc, nous avons modifié HomePage, car il s'agissait du lien entre notre ThemeSwitcherApp et notre ThemeSelectorPage.
  • Nous n'avons écrit aucun test! Et ça, "mi amigo", c'est inacceptable!

Nous allons améliorer ces deux cas dans les articles suivants;)

J'espère que vous avez apprécié ce tutoriel autant que moi!