Tutoriel Dart Mixins pour Flutter : Mise en route

La programmation orientée objet joue un rôle majeur dans le processus de développement logiciel. De nombreux modèles de conception utilisent le concept OOPs, il est donc important de savoir utiliser différentes méthodes pour rendre votre application plus évolutive et déboguer facilement. Si vous venez d’un milieu technologique, vous avez peut-être entendu parler de l’héritage, de l’abstraction et d’autres piliers des POO. Mixins vous aide à mettre en œuvre certains de ces piliers.
Dans cette section, vous découvrirez :

Mélanges
En quoi ils sont différents de l’héritage

Dans la première section de cet article, vous commencerez par télécharger les projets et les versions requises de Flutter et Android Studio. Il est temps de commencer.

Commencer

Téléchargez le projet de démarrage en cliquant sur le Télécharger les matériaux bouton en haut ou en bas du didacticiel.

Ouvrez le projet de démarrage dans Code VS ou Studio Android. Ce didacticiel utilise VS Code, vous devrez donc peut-être modifier certaines instructions si vous décidez d’utiliser Android Studio.

Après avoir ouvert le projet, exécutez Flutter Pub Get dans le terminal, pour installer les packages utilisés par ce projet.

Explorer le projet de démarrage

Construire et exécuter le projet de départ. Vous observerez l’écran suivant :

Lorsque vous générez et exécutez le projet, l’écran suivant apparaît. Il a deux boutons.
Si vous cliquez sur l’un de ces deux boutons, rien ne se passe. Au contraire, si vous ouvrez start_screen.dartvous trouvez deux TODOs où vous connecterez ces écrans.
Dans first_animation.dart et seconde_animation.dart fichier, les animations sont déjà en place. La tâche consiste à créer une base de code commune que vous implémenterez à l’aide de mixins.

Maintenant, vous êtes prêt à en savoir plus sur les mixins et à commencer à implémenter votre première classe de mixins.

Création de la Fondation Mixins

Avant d’apprendre mélanges dans Flutter, vous devez d’abord passer rapidement par les bases de la POO. Vous en apprendrez plus sur héritage et composition dans la rubrique suivante.

Rappel de l’héritage et de la composition

Définition de l’héritage: L’héritage signifie hériter/utiliser les méthodes et les fonctions de la classe parent dans la classe enfant.

Définition de composition: La composition est la relation entre différentes classes où les classes n’ont pas besoin d’être la classe parent et enfant. Il représente une a un relation. La composition représente une relation forte. Cela signifie que si la classe A a la classe B, alors la classe B ne peut pas exister sans la classe A.

Comment l’héritage diffère de la composition: L’héritage définit est un relation où la classe enfant est un type de classe parent. La composition définit un partie de relation où l’enfant fait partie du parent. Voici un exemple :

Voiture est une automobile ; c’est un exemple d’héritage.
Cœur fait partie de l’humain; c’est un exemple de composition.

Offres de succession couplage fortce qui rend difficile la modification ou l’ajout de fonctionnalités dans les classes parentes, alors que la composition offre couplage lâche. Vous vous demandez peut-être pourquoi vous utiliseriez toujours l’héritage alors que vous pouvez utiliser la composition. La réponse est que les deux ont des avantages et des cas d’utilisation, comme la façon dont différentes cannes à pêche ont leurs cas d’utilisation.

Héritages multiples dans Flutter: Flutter ne prend pas en charge les héritages multiples comme certains langages de programmation, tels que C++. Mais il existe des moyens d’obtenir la fonctionnalité de héritages multiples dans Flutter, que vous apprendrez dans les sections suivantes.

Maintenant, vous avez une image des différences entre l’héritage et la composition. Dans la section suivante, vous découvrirez les mixins.

Se lancer dans les Mixins

Que sont les Mixins ?

Les mixins sont un concept de langage qui permet de injecter du code dans une classe. En programmation Mixin, unités de fonctionnalité sont créés dans une classe puis mélangés avec d’autres classes. Une classe mixin agit comme la classe parent (mais n’est pas une classe parent), contenant la fonctionnalité souhaitée.

L’extrait de code mixin suivant vous aidera à mieux comprendre cela :

Sans utiliser la classe Mixin:

class WithoutMixinClass{
	void run(){
		print("Hey, without mixin class's method running!!");
	}
}

class OtherClass extends WithoutMixinClass{

}

void main(){
	OtherClass obj=OtherClass();
	obj.run();
}

Dans l’extrait ci-dessus, vous héritez WithoutMixinClassqui est hérité dans OtherClass en utilisant le extends mot-clé. Alors le OtherClass est la classe enfant de WithoutMixinClass.

Utilisation de la classe Mixin:

mixin MixinClass{
	void run(){
		print("Hey, mixin class's method is running!!");
	}
}

class OtherClass with MixinClass{}

void main(){
	OtherClass otherClassObj=OtherClass();
	otherClassObj.run();
}

Dans l’extrait ci-dessus, vous utilisez MixinClass dans OtherClass en utilisant le with mot-clé. Le OtherClass n’est pas la classe enfant. Vous devez utiliser le with mot-clé pour implémenter les mixins.

Êtes-vous confus entre le avec, met en oeuvre et s’étend mots-clés disponibles dans Dart ? Pas de soucis. La section suivante clarifiera votre compréhension.

Avec, implémente et étend

Si vous avez une expérience de base avec Flutter, vous avez peut-être déjà utilisé implements et extends. Dans cette section, vous apprendrez les différences entre with, implements et extends.

Prolonge le mot-clé:

Utilisé pour se connecter parent abstrait classes avec classes enfants.
Méthodes des classes abstraites n’a pas besoin d’être remplacé dans les classes enfants. Cela signifie que s’il y a 10 méthodes dans la classe abstraite, la classe enfant n’a pas besoin de remplacer les 10 méthodes.
Une seule classe peut être étendue par une classe enfant (Dart n’autorise pas l’héritage multiple)

Implémente le mot-clé:

Utilisé pour se connecter parent de l’interface classes avec d’autres classes. Étant donné que Dart n’a pas de mot-clé d’interface, les classes sont utilisées pour créer des interfaces.
Méthodes pour les classes d’interface besoin d’être remplacé dans les classes enfants. Cela signifie que s’il y a 10 méthodes dans l’interface, la classe enfant doit remplacer les 10 méthodes.
Plusieurs classes d’interface peuvent être implémentées.

Avec mot clé:

Habitué associé mélanger des classes avec d’autres classes.
Chaque méthode de la classe mixin est importée dans l’autre classe.
Plusieurs classes mixin peuvent être utilisées avec la même classe.

Une fois les bases claires, vous êtes prêt à implémenter la première classe mixin dans le projet Flutter. Vous en apprendrez plus à ce sujet dans la section suivante.

Implémentation de votre première classe Mixin

A ce stade, vous avez suffisamment de connaissances pour commencer à mettre en œuvre votre premier cours de mixin. Si vous avez parcouru la structure du projet, ouvrez base_screen.dart. Copiez et collez l’extrait de code suivant à la place de //1.TODO: create mixin class.

//1
mixin BasicPage<Page extends BaseScreen> on BaseState<Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: fab(),
        appBar: AppBar(
          title: Text(screenName()),
        ),
        body: Container(
          child: body(),
          color: Colors.black,
        ));
  }

  //2
  Widget fab();

  Widget body();
}

Voici comment fonctionne ce code.

Pour déclarer des mixins dans Flutter, vous devez utiliser le mixin mot-clé. BasicPage est le nom de mixin, qui a un type d’objet de Page qui prolonge la BaseScreen classe abstraite.
Ici, vous déclarez des fonctions que, si nécessaire, vous implémenterez dans les classes enfants.

Cela vient de configurer votre classe de mixage personnalisée. L’application du projet nécessite plusieurs mixins car vous utiliserez également SingleTickerProviderStateMixince qui crée téléscripteurs dans Flutter.

Note: Ticker peut être appelé comme une minuterie de période spéciale qui avertit lorsque Flutter Engine est sur le point de dessiner une nouvelle image. Vous pouvez lire les documents officiels sur Ticker ici : Ticker Class.

Dans la section suivante, vous connecterez des mixins et les observerez fonctionner.

Intégration de plusieurs Mixins

Dans la section précédente, vous avez créé un mixin personnalisé qui servira d’écrans de base pour les autres écrans des applications. Dans cette section, vous allez connecter des écrans et utiliser des mixins pour créer la sortie requise.

Ouvrir first_animation.dart fichier et remplacer //1. TODO: declare here avec la ligne suivante :

with BasicPage, SingleTickerProviderStateMixin

Utiliser plusieurs mixins dans Flutter, vous devez utiliser des virgules pour séparer les mixins.

Remplace le //2. TODO: Initialize controller here avec le code suivant :

controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 10))
          ..addListener(() {
            setState(() {});
          });

Ici, vous initialisez le contrôleur d’animation. Le this le mot clé utilisé ici est fourni par SingleTickerProviderStateMixinqui fournit le contexte actuel au contrôleur d’animation. Vsync garde une trace de l’écran de l’application et ne démarre l’animation que lorsque l’écran est affiché.

Dans le même fichier, recherchez //3.TODO: remove build method et retirer le construire bloc de code. Parce que vous avez étendu la classe avec le BasicPage classe, la body méthode sera remplacée et la body méthode présente dans le first_animation.dart sera utilisé.

Maintenant, vous devez vous connecter first_animation.dart avec le Écran de démarrage. Pour ce faire, recherchez et remplacez //1. TODO: Add here dans start_screen.dart avec le bloc de code suivant :

Navigator.of(context).push<void>(
  MaterialPageRoute(
      builder: (context) => const FirstAnimationScreen()),
);

C’est Navigateurce qui poussera le FirstAnimationScreen à la pile d’interface utilisateur. Importer first_animation.dart dans start_screen.dart pour que le code ci-dessus fonctionne.

Créez et exécutez l’application. Vous verrez le résultat suivant :

Vous avez créé un mixage personnalisé class et l’a connecté à l’application.

La partie suivante de cette section est un test pour vous. Vous utiliserez les choses apprises dans cette section et effectuerez une tâche.

Tester vos connaissances

Cette section est un petit test pour vous basé sur les choses que vous avez apprises dans les sections précédentes. Vous devez remplir le seconde_animation.dart déposer. Les TODO ont été marqués dans les fichiers pour votre facilité.

Si vous rencontrez des difficultés, vous pouvez vous référer au Solution d’essai ci-dessous ou passez par le final dossier dans le matériel de projet ci-joint.

Solution d’essai

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'base_screen.dart';

class SecondAnimation extends BaseScreen {
  const SecondAnimation({Key? key}) : super(key: key);
  @override
  _SecondAnimationState createState() => _SecondAnimationState();
}

class _SecondAnimationState extends BaseState<SecondAnimation>
    with BasicPage, SingleTickerProviderStateMixin {
  Duration duration = Duration.zero;
  late Ticker ticker;

  @override
  void initState() {
    super.initState();
    ticker = this.createTicker((elapsed) {
      setState(() => duration = elapsed);
    });
  }

  @override
  void dispose() {
    ticker.dispose();
    super.dispose();
  }

  @override
  String screenName() => 'Timer screen';

  @override
  Widget fab() {
    return FloatingActionButton.extended(
      onPressed: () {
        if (!ticker.isActive) {
          ticker.start();
        } else {
          ticker.stop();
        }
      },
      label: Text((!ticker.isActive) ? 'Start Timer' : 'Stop Timer'),
      icon: Icon(
          (!ticker.isActive) ? Icons.timer_outlined : Icons.timer_off_outlined,
          color: Colors.white),
    );
  }

  @override
  Widget body() {
    return Center(
      child: Text(
        duration.inSeconds.toString(),
        style: TextStyle(
          fontSize: 220,
          color: Theme.of(context).colorScheme.primary,
        ),
      ),
    );
  }
}

Créez et exécutez l’application. Vous verrez l’écran suivant :

Bon travail! Il est important de tester vos compétences nouvellement acquises pour voir si vous acquérez les connaissances. Si vous avez manqué quelque chose, vous pouvez revenir aux sections précédentes et vérifier ce qui manque. Voici un badge étoile pour vous :

Dans la section suivante, vous découvrirez le rôle de la hiérarchie dans les mixins.

Comprendre le rôle de la hiérarchie

Une chose intéressante à propos de l’utilisation de plusieurs mixins est que l’ordre dans lequel ils sont renvoyés détermine l’ordre d’appel de la méthode. Voici un exemple :

class A extends B with C, D{}

Dans la déclaration de classe ci-dessus, l’ordre dans lequel elles sont déclarées est de gauche à droite. Cela peut être compris en considérant la structure de données appelante comme une pile.

Maintenant, regardez votre projet.

Si vous regardez le first_animation.dart fichier, vous voyez le code suivant :
extends BaseState with BasicPage, SingleTickerProviderStateMixin

Selon cette ligne, la pile hiérarchique ressemble à ceci :

Cela implique que si vous vous déplacez de gauche à droite, les classes déclarées sont insérées dans la pile et le niveau d’importance augmente. Ainsi, dans toute fonction/méthode portant le même nom décrit dans les deux SingleTickerProviderStateMixin et BasicPagecelui du SingleTickerProviderStateMixin sera exécuté.

Vous comprenez maintenant ce que sont les mixins dans Dart, comment ils sont utilisés et comment ils fonctionnent. Ensuite, vous apprendrez pourquoi utiliser les mixins.

Pourquoi utiliser Mixins ?

Maintenant que vous en savez plus sur les mixins, il est important de savoir pourquoi on les utiliserait. Y a-t-il des avantages à utiliser des mixins par rapport à d’autres techniques, telles que l’héritage ?

Ne répétez pas le principe: Si votre projet utilise plusieurs fois le même code, il est recommandé d’utiliser un seul code et de l’étendre à vos classes requises. Cela signifie également la réutilisation du code. L’utilisation de mixins améliore la réutilisation du code.

Problème de diamant dans les POO: L’utilisation d’héritages multiples conduit souvent au problème du diamant. Les mixins ne sont pas un moyen d’utiliser plusieurs héritages dans Dart ; il s’agit plutôt d’un moyen de réutiliser le code de plusieurs hiérarchies sans utiliser le mot-clé extend. Lorsque vous utilisez des mixins, la classe mixins n’est pas parallèle mais se trouve au sommet de la classe qui l’utilise. Ainsi, les méthodes n’entrent pas en conflit les unes avec les autres et évitent le problème du diamant.

Le problème du diamant est une ambiguïté qui survient lorsque deux classes B et C héritent de A, et que la classe D hérite à la fois de B et C. S’il existe une méthode dans A que B et C ont remplacée, et que D ne la remplace pas, alors quelle version de la méthode dont D hérite : celle de B, ou celle de C ?

Jouer en toute sécurité avec Mixins

Vous avez parcouru l’introduction aux mixins et vu leurs avantages. Mais chaque fonctionnalité avec des avantages a ses inconvénients, et vous devez les connaître :

L’utilisation de plusieurs mixins peut entraîner une chaîne de mixins, ce qui peut rendre le débogage difficile.
Augmentation des dépendances.
Couplage élevé. Chaque nouvelle fonctionnalité ajoutée à la classe mixin est ajoutée à chaque classe enfant.

Où aller en partant d’ici?

Vous pouvez télécharger le projet complet en utilisant le Télécharger les matériaux bouton en haut ou en bas de ce didacticiel.

Dans cet article, vous avez appris :

Mélanges
Hiérarchie dans Mixins
Quand et quand ne pas utiliser Mixins

J’espère que vous avez apprécié cet article. Si vous souhaitez en savoir plus sur les concepts Mixins et OOP dans Dart, consultez les éléments suivants :

Si vous avez des suggestions ou des questions ou si vous souhaitez montrer ce que vous avez fait pour améliorer ce projet, rejoignez la discussion ci-dessous.