Comment développer votre application Flutter avec l’architecture BLoC


Le flutter est de plus en plus populaire chaque jour, bien qu’il s’agisse d’une technologie plutôt récente. Il est apparu pour la première fois en 2015 sous le nom de Sky, et en 2017, il est devenu le Flutter que nous connaissons et utilisons. Flutter est soutenu par Google et permet aux développeurs de créer des applications multiplateformes belles et rentables avec une sensation native.

Il existe de nombreuses architectures que vous pouvez utiliser pour créer des applications Flutter:

  • Vanille
  • InheritedWidget
  • ChangeNotifier + Fournisseur
  • Bloc
  • MobX
  • Redux

Cette liberté de choix peut être enrichissante, mais elle peut également conduire à des dénominations incohérentes et à des classes volumineuses. Dans cet article, je parlerai de l’architecture BLoC, qui est considérée comme l’un des meilleurs choix pour le développement Flutter par de nombreux programmeurs.

Quel est le modèle d’architecture BLoC?

BLoC signifie Business Logic Component, et comme son nom l’indique, c’est un modèle architectural qui a des composants séparés en son cœur. L’architecture BLoC (que vous pouvez utiliser en intégrant la bibliothèque BLoC dans votre projet) a été créée par Felix Angelov et a été introduite à Google I / O en 2019.

Notez que BLoC est un modèle, pas une architecture en soi. Vous devez toujours organiser les données de votre application selon une architecture telle que DDD, MVVM ou Clean.

BLoC aide à organiser les flux de données, et c’est aujourd’hui le modèle le plus populaire pour le développement Flutter. Découvrons pourquoi.

Avantages de l’architecture BLoC

L’architecture BLoC présente trois avantages principaux. Il est:

Qu’est-ce qui fait que c’est ainsi? L’architecture BLoC permet aux développeurs de séparer les différentes couches de votre application, à savoir les couches de présentation et de logique métier. Cela facilite le test et la réutilisation d’éléments dans différentes parties de votre code.

L’architecture BLoC aide également les développeurs à gérer l’état, car ils peuvent connaître l’état d’une application à tout moment. Cela facilite également les tests, car il est beaucoup plus pratique d’écrire des tests pour des parties spécifiques du code.

Séparer la présentation de la logique métier permet aux développeurs de réutiliser des éléments non seulement à l’intérieur d’une application, mais aussi entre les applications. Un autre avantage de l’approche BLoC est que plusieurs membres de l’équipe peuvent travailler de manière transparente sur une seule base de code. Et comme la logique métier est distincte, il est plus facile pour les développeurs de suivre les mêmes modèles.

Le principe principal de l’architecture BLoC est de créer des produits complexes à partir de blocs simples. Si vous avez un développeur junior sur votre projet, l’architecture BLoC lui permettra de comprendre facilement comment tout fonctionne sous le capot. Même pour les développeurs expérimentés, l’architecture BLoC réduit le temps nécessaire pour se familiariser avec un projet. Ceci est particulièrement important lorsque vous travaillez avec des délais serrés et pour le développement commercial.

Étant donné que cette architecture conserve des parties de l’application petites et séparées, vous pouvez facilement tester chaque aspect de votre application et savoir exactement ce qu’il faut corriger.

De plus, l’architecture BLoC applique une méthode unique pour modifier les états dans l’ensemble de l’application, ce qui rend la logique métier de votre application prévisible et cohérente.

Maintenant que nous avons discuté des avantages de l’architecture BLoC, je vais parler un peu de sa logique.

Fonctionnement de l’architecture BLoC

Avant de plonger dans la logique de l’architecture BLoC, apprenons ses principaux concepts.

  • Evénements et actions sont les entrées qui apparaissent lorsqu’un utilisateur interagit avec l’interface utilisateur: par exemple, les balayages ou les défilements.
  • États sont les réactions à ces actions, et elles changent en fonction de l’événement qu’un utilisateur déclenche en interagissant avec l’interface.
  • UNE Bloc est un composant responsable de la logique métier. Il convertit les événements en états et est l’élément de traitement qui reçoit les informations et répond en conséquence.
  • UNE courant est un flux de données asynchrone auquel réagissent l’interface utilisateur (UI) et BLoC.

La logique de l’architecture BLoC est la suivante: lorsqu’un utilisateur effectue une action en interagissant avec l’interface utilisateur, les informations relatives à cette action sont transmises au composant BLoC. Ensuite, le composant BLoC traite et interprète ces informations et répond en modifiant l’état du composant UI.

Intégration étape par étape de l’architecture BLoC

Vous devez d’abord organiser une application Flutter selon un modèle architectural tel que DDD, MVVM ou Clean. L’architecture BLoC fonctionne alors plus comme un modèle qui organise davantage les flux de données dans votre application.

Après avoir configuré votre architecture, vous devez y intégrer l’élément BLoC.

Étape 1: Ajoutez l’architecture BLoC à votre projet

Pour implémenter l’architecture BLoC, vous devez intégrer la bibliothèque BLoC dans votre projet. Pour ce faire, vous devez ajouter la dépendance flutter_bloc: ^ 2.0.1 à votre fichier pub spec.yaml. Félicitations! Vous disposez maintenant d’un package Flutter qui vous permettra d’implémenter le modèle BLoC.

Étape 2. Configurer les widgets dans la bibliothèque BLoC

Il existe trois widgets principaux dans la bibliothèque BLoC:

  • Bloc
  • BlocBuilder
  • BlocProvider

Vous en aurez besoin pour établir des BLoC, créer ces BLoC en fonction des changements d’état de l’application et configurer des dépendances. Voyons comment mettre en œuvre chaque widget et l’utiliser dans la logique métier de votre application.

Bloc

Le widget Bloc est le composant de base dont vous aurez besoin pour implémenter toute la logique métier. Pour l’utiliser, étendez la classe Bloc et remplacez le mapEventToState et Etat initial méthodes.

Dans mapEventToState, vous devrez gérer des arguments représentant des actions. Après cela, vous devrez renvoyer chaque argument en tant qu’état. Voici un exemple:

Comme vous pouvez le voir, ici vous obtenez le CounterEvent et le gérer en fonction du type d’événement. L’État (un int dans cet exemple) est ensuite renvoyée.

Si vous souhaitez personnaliser la réponse, vous pouvez créer un état ou un événement abstrait:

BlocBuilder

BlocBuilder est un widget qui répond aux nouveaux états en créant des BLoC. Ce widget peut être appelé plusieurs fois et agit comme une fonction qui répond aux changements d’état en créant des widgets qui apparaissent ensuite comme de nouveaux éléments d’interface utilisateur.

Pour obtenir un BLoC en tant que widget unique qui ne sera pas accessible via BlocProvider et BuildContext, vous devez spécifier le bloc comme suit:

Comme vous pouvez le voir, vous devez fournir une classe Bloc étendue dans l’argument bloc. Les instances de vos classes d’état apparaîtront dans BlocBuilder. N’oubliez pas que le premier état est celui qui a été précédemment créé dans le Etat initial méthode.

Pour éviter les fuites de mémoire, vous ne devez pas créer d’instance de la classe Bloc lors de la création d’une classe BlocBulider. Si vous le faites, vous ne pourrez pas fermer les flux dans la classe Bloc. Mon conseil est de créer une instance Bloc dans le initState méthode et fermez-la avec blocA.close () dans le disposer méthode.

BlocProvider

Ce widget fonctionne comme une injection de dépendances, ce qui signifie qu’il peut fournir des BLoC à plusieurs widgets à la fois appartenant au même sous-arbre. BlocProvider est utilisé pour créer des blocs qui seront ensuite disponibles pour tous les widgets de la sous-arborescence. Et comme BlocProvider crée des blocs, il est également capable de les fermer.

Notez que vous pouvez également utiliser BlocProvider pour fournir un bloc que vous avez déjà avec une nouvelle arborescence de widgets. De cette manière, vous pouvez étendre les capacités d’un bloc existant au lieu d’en créer un nouveau. Cependant, dans ce cas, BlocProvider ne fermera pas le bloc car il ne l’a pas créé.

Étape 3. Créez un événement

Pour effectuer n’importe quelle action avec des données – les gérer, les envoyer via Internet, les sauvegarder dans la base de données – vous devez créer un événement dans votre composant Bloc. Pour ce faire, il vous suffit d’appeler cette méthode:

C’est tout! Désormais, le composant Bloc pourra gérer votre événement.

Comme vous pouvez le voir, configuration de votre modèle d’architecture BLoC est très simple avec la bibliothèque BLoC.

Dernières pensées

Le modèle BLoC est l’un des meilleurs moyens d’améliorer et d’organiser l’architecture de votre application Flutter. Il est facile à configurer et à utiliser, et il rend votre code prévisible et facile à tester.

Pour implémenter le modèle BLoC dans votre application Flutter, il vous suffit d’intégrer la bibliothèque BLoC, puis de créer et de configurer les widgets nécessaires qui dicteront la logique et le comportement métier de votre application. Enfin, utilisez des événements pour manipuler les données de votre application et configurer la connexion entre les actions et les résultats.

Je recommande l’architecture BLoC pour tout projet Flutter, car elle rend le code maintenable et vous aide à vous débarrasser du code passe-partout et du code spaghetti en gardant chaque partie de votre application séparée et bien organisée.

Close Menu