Utilisation de Google Flutter pour un développement mobile multiplateforme

Flutter rend la construction d'applications mobiles multiplates-formes très facile. Cet article présente Flutter, le compare à d'autres plates-formes de développement mobiles et montre comment l'utiliser pour commencer à créer des applications.

Flutter est un framework de développement mobile multiplateforme open-source de Google. Il permet de créer de superbes applications hautes performances pour iOS et Android à partir d'une base de code unique. C'est également la plate-forme de développement du futur système d'exploitation Fuchsia de Google. De plus, il est conçu de manière à pouvoir être amené vers d'autres plateformes, via des intégrateurs de moteurs Flutter personnalisés .

Pourquoi Flutter a été créé et pourquoi l'utiliser?

historiquement pris l'une des deux approches:

• Ils enveloppent une vue web dans une application native et construisent l'application comme s'il s'agissait d'un site web.
• Ils enveloppent les contrôles de la plateforme native et fournissent une abstraction multiplateforme sur eux. ] Flutter adopte une approche différente pour tenter de rendre le développement mobile meilleur. Il fournit une application cadre sur laquelle les développeurs travaillent et un moteur avec un runtime portable pour héberger des applications. Le framework s'appuie sur la bibliothèque graphique de Skia, fournissant des widgets qui sont réellement rendus, au lieu d'être simplement des wrappers sur des contrôles natifs.

  Cette approche offre la flexibilité de créer une application multiplateforme de manière totalement personnalisée, comme l'encapsuleur Web. option fournit, mais en même temps offrant des performances en douceur. Pendant ce temps, la riche bibliothèque de widgets fournie avec Flutter, ainsi qu'une multitude de widgets open-source, en font une plate-forme très riche en fonctionnalités. Simplement, Flutter est la chose la plus proche que les développeurs mobiles aient eu pour le développement multi-plateforme avec peu ou pas de compromis.

  Dart

  Les applications Flutter sont écrites en Dart, qui est un langage de programmation développé à l'origine par Google. Dart est un langage orienté objet qui prend en charge à la fois la compilation anticipée et juste-à-temps, ce qui le rend idéal pour créer des applications natives, tout en assurant un flux de développement efficace avec le rechargement à chaud de Flutter. Flutter a récemment migré vers Dart version 2.0

  Le langage Dart offre de nombreuses fonctionnalités dans d'autres langages, notamment la récupération de place, l'attente asynchrone, le typage fort, les génériques, ainsi qu'une bibliothèque standard riche

  Dart propose un ensemble de fonctionnalités qui devraient être familières aux développeurs venant de plusieurs langages, tels que C #, JavaScript, F #, Swift et Java. De plus, Dart peut compiler en Javascript. Combiné avec Flutter, cela permet au code d'être partagé sur les plates-formes web et mobiles

  Historique des événements

  Comparaison avec d'autres plateformes de développement

  Apple / Android Native

  Les applications natives offrent le moins de friction fonctionnalités. Ils ont tendance à avoir des expériences utilisateur plus en phase avec la plate-forme donnée car les applications sont construites en utilisant les contrôles des fournisseurs de plates-formes eux-mêmes (Apple ou Google) et suivent souvent les directives de conception établies par ces fournisseurs. Dans la plupart des cas, les applications natives fonctionneront mieux que celles construites avec des offres multiplates-formes, bien que la différence puisse être négligeable dans de nombreux cas selon la technologie multiplateforme sous-jacente.

  Un gros avantage des applications natives nouvelles technologies Apple et Google créent immédiatement en version bêta si vous le souhaitez, sans avoir à attendre une intégration tierce. Le principal inconvénient de la création d'applications natives est le manque de réutilisation de code entre plates-formes, ce qui peut rendre le développement coûteux si vous ciblez iOS et Android.

  React Native

  React Native permet de générer des applications natives en utilisant JavaScript. Les contrôles réels utilisés par l'application sont des contrôles de plate-forme natifs, ce qui permet à l'utilisateur final d'avoir l'impression d'une application native. Pour les applications qui nécessitent une personnalisation au-delà de ce que l'abstraction de React Native fournit, le développement natif peut toujours être nécessaire. Dans les cas où la quantité de personnalisation requise est substantielle, l'avantage de travailler dans la couche d'abstraction de React Native diminue au point où, dans certains cas, développer l'application serait plus bénéfique.

  Xamarin

  En parlant de Xamarin, deux approches différentes qui doivent être évaluées. Pour leur approche la plus multiplateforme, il y a Xamarin.Forms. Bien que la technologie soit très différente de React Native, conceptuellement, elle offre une approche similaire en ce qu'elle permet d'abstraire les contrôles natifs. De même, il a des inconvénients similaires en ce qui concerne la personnalisation.

  Deuxièmement, il y a ce que de nombreux termes Xamarin-classique. Cette approche utilise les produits iOS et Android de Xamarin indépendamment pour créer des fonctionnalités spécifiques à la plate-forme, tout comme lorsque vous utilisez directement Apple / Android natif, en utilisant uniquement C # ou F # dans le cas de Xamarin. L'avantage avec Xamarin est que le code spécifique à une plate-forme, comme le réseau, l'accès aux données, les services web, etc. peut être partagé.

  Contrairement à ces alternatives, Flutter tente de fournir aux développeurs une solution multiplateforme plus complète. réutilisation, hautes performances, interfaces utilisateur fluides et excellents outils

  Présentation d'une application Flutter

  Création d'une application

  Après installation de Flutter créer une application avec Flutter est aussi simple que soit en ouvrant une ligne de commande et en entrant flutter create [app_name]en sélectionnant la commande "Flutter: New Project" dans VS Code, soit en sélectionnant "Start a new Flutter Project" dans Android Studio ou IntelliJ. vous choisissez d'utiliser un IDE ou la ligne de commande avec votre éditeur préféré, le nouveau modèle d'application Flutter vous donne un bon point de départ pour une application.

  L'application apporte le flutter / material.dart pour offrir un échafaudage de base pour l'application, comme une barre de titre, des icônes de matériaux et des thèmes. Il configure également un widget avec état pour montrer comment mettre à jour l'interface utilisateur lorsque l'état de l'application change

  

  Options d'outillage

  Flutter offre une flexibilité incroyable en ce qui concerne l'outillage. Les applications peuvent tout aussi bien être développées à partir de la ligne de commande avec n'importe quel éditeur, car elles peuvent provenir d'un IDE supporté comme VS Code, Android Studio ou IntelliJ. L'approche à adopter dépend largement de la préférence du développeur.

  Android Studio offre le plus de fonctionnalités, comme Flutter Inspector pour analyser les widgets d'une application en cours d'exécution et pour surveiller les performances des applications. Il offre également plusieurs refactorings qui sont pratiques lors du développement d'une hiérarchie de widgets.

  VS Code offre une expérience de développement plus légère dans la mesure où il a tendance à démarrer plus rapidement qu'Android Studio / IntelliJ. Chaque IDE offre des aides à l'édition intégrées, telles que l'achèvement du code, permettant l'exploration de diverses API ainsi qu'un bon support de débogage.

  La ligne de commande est également bien supportée par la commande flutter ce qui le rend Facile à créer, à mettre à jour et à lancer une application sans aucune autre dépendance d'outil au-delà d'un éditeur.

  

  Rechargement à chaud

  Quel que soit l'outillage, Flutter maintient un excellent support pour le rechargement à chaud d'une application. Cela permet à une application en cours d'être modifiée dans de nombreux cas, en conservant l'état, sans devoir arrêter l'application, reconstruire et redéployer.

  Le rechargement à chaud augmente considérablement l'efficacité du développement en permettant une itération plus rapide.

  Test

  Flutter inclut un utilitaire WidgetTester pour interagir avec les widgets d'un test. Le nouveau modèle d'application inclut un exemple de test pour montrer comment l'utiliser lors de la création d'un test, comme illustré ci-dessous:

   // Test inclus avec le nouveau modèle d'application Flutter
  
  import 'package: flutter / material.dart';
  import 'package: flutter_test / flutter_test.dart';
  
  import 'paquet: myapp / main.dart';
  
  void main () {
    testWidgets ('Le compteur augmente le test de fumée', (testeur WidgetTester) async {
      // Construire notre application et déclencher un cadre.
      attend tester.pumpWidget (new MyApp ());
  
      // Vérifie que notre compteur commence à 0.
      expect (find.text ('0'), findsOneWidget);
      attendre (find.text ('1'), findNothing);
  
      // Appuyez sur l'icône '+' et déclenchez une image.
      attend tester.tap (find.byIcon (Icons.add));
      attend tester.pump ();
  
      // Vérifie que notre compteur a été incrémenté.
      expect (find.text ('0'), findNothing);
      expect (find.text ('1'), findsOneWidget);
    });
  }
  
  

  Utilisation de packages et de plugins

  Flutter ne fait que commencer, mais il existe déjà un riche écosystème de développeurs: Une pléthore de packages et de plugins est déjà disponible pour les développeurs. plugin, incluez simplement la dépendance dans le fichier pubspec.yaml dans le répertoire racine de l'application. Ensuite, exécutez flutter packages obtenir soit à partir de la ligne de commande ou à travers l'IDE, et l'outillage de Flutter apportera toutes les dépendances nécessaires.

  Par exemple, pour utiliser le plugin de sélecteur d'image populaire pour Flutter, le pubspec.yaml n'a besoin de le lister qu'en tant que dépendance:

   dépendances:
    image_picker: "^ 0.4.1"
  

  Ensuite, exécuter les paquets flutter obtenir apporte tout ce dont vous avez besoin pour l'utiliser, après quoi il peut être importé et utilisé dans Dart:

   import 'package: image_picker / image_picker.dart';
  

  Widgets

  Tout dans Flutter est un widget. Cela inclut des éléments d'interface utilisateur, tels que ListView TextBox et Image ainsi que d'autres parties du cadre, y compris la mise en page, l'animation, la reconnaissance gestuelle, et thèmes, pour n'en nommer que quelques-uns.

  En ayant tout comme un widget, l'application entière, qui est accessoirement aussi un widget, peut être représentée dans la hiérarchie du widget. Avoir une architecture où tout est un widget indique clairement d'où viennent certains attributs et comportements appliqués à une partie d'une application. Ceci est différent de la plupart des autres frameworks d'application, qui associent les propriétés et le comportement de façon incohérente, parfois en les associant à d'autres composants dans une hiérarchie et d'autres fois sur le contrôle lui-même. est la fonction principale. Pour mettre un widget pour un élément d'interface utilisateur à l'écran, dans main () appelez runApp () et transmettez-lui le widget qui servira de racine de la hiérarchie du widget. 19659054] import 'paquet: flutter / material.dart';

  void main () {
    runApp (
      Conteneur (couleur: Colors.lightBlue)
    )
  }
  

  Il en résulte un widget bleu Container qui remplit l'écran:

  

  Widgets sans état ou avec état

  Les widgets ont deux goûts: sans état et avec état. Les widgets sans état ne modifient pas leur contenu après leur création et leur initialisation, tandis que les widgets avec état conservent un état qui peut changer pendant l'exécution de l'application, par ex. en réponse à l'interaction de l'utilisateur.

  Dans cet exemple, un widget FlatButton et un widget Text sont dessinés à l'écran. Le widget Texte commence avec une valeur par défaut String pour son état. Une pression sur le bouton entraîne un changement d'état qui entraîne la mise à jour du widget Text affichant une nouvelle String .

  Pour encapsuler un widget, créez une classe dérivée de StatelessWidget ou StatefulWidget . Par exemple, le conteneur bleu clair peut s'écrire comme suit:

   class MyWidget extends StatelessWidget {
    @passer outre
    Construction d'un widget (contexte BuildContext) {
      return Container (couleur: Colors.lightBlue);
    }
  }
  

  Flutter appelle la méthode de construction du widget lorsqu'il est inséré dans l'arbre des widgets afin que cette portion de l'interface utilisateur puisse être rendue

  Pour un widget avec état, dériver de StatefulWidget :

   class MyStatefulWidget étend StatefulWidget {
  
    MyStatefulWidget ();
  
    @passer outre
    Etat  createState () {
      retourne MyWidgetState ();
    }
  }
   

  Les widgets avec état renvoient une classe d'état qui est responsable de la construction de l'arbre du widget pour un état donné. Lorsque l'état change, la partie associée de l'arborescence du widget est reconstruite.

  Dans le code suivant, la classe State met à jour une chaîne lorsqu'un bouton est cliqué:

   la classe MyWidgetState étend l'état  {
    String text = "du texte";
  
    @passer outre
    Construction d'un widget (contexte BuildContext) {
      retour Container (
        couleur: Colors.lightBlue,
        enfant: Padding (
          remplissage: const EdgeInsets.all (50.0),
          enfant: Directionnalité (
            textDirection: TextDirection.ltr,
            enfant: Colonne (
              enfants: [
                FlatButton(
                  child: Text('Set State'),
                  onPressed: () {
                    setState(() {
                      text = "some new text";
                    });
                  },
                ),
                 Text(
                  text, 
                  style: TextStyle(fontSize: 20.0)),
              ],
            )
          )
        )
      )
    }
  }
   

  L'état est mis à jour dans une fonction transmise à setState () . Lorsque setState () est appelé, cette fonction peut définir n'importe quel état interne, tel que la chaîne dans cet exemple. Ensuite, la méthode build sera appelée, mettant à jour l'arborescence du widget avec état

  

  Notez également l'utilisation du widget Directionnalité pour définir la direction du texte de tous les widgets de son sous-arbre qui en ont besoin, tels que les widgets Text . Les exemples ici sont le code de construction à partir de zéro, donc Directionnalité est nécessaire quelque part dans la hiérarchie du widget. Toutefois, l'utilisation du widget MaterialApp comme avec le modèle d'application par défaut, définit implicitement la direction du texte.

  Layout

  La fonction runApp gonfle le widget pour remplir le écran par défaut. Pour contrôler la disposition du widget, Flutter offre une variété de widgets de mise en page. Il existe des widgets pour effectuer des mises en page qui alignent les widgets enfants verticalement ou horizontalement, développent des widgets pour remplir un espace particulier, limitent les widgets à une certaine zone, les centrent sur l'écran et permettent aux widgets de se chevaucher.

  Ligne et Colonne . Ces widgets effectuent des mises en page pour afficher leurs widgets enfants horizontalement (Row) ou verticalement (Column).

  L'utilisation de ces widgets de mise en page consiste simplement à les entourer d'une liste de widgets enfants. Le mainAxisAlignment contrôle comment les widgets sont positionnés le long de l'axe de mise en page, centré, au début, à la fin ou avec différentes options d'espacement.

  Le code suivant montre comment aligner plusieurs widgets enfants dans un Ligne ou Colonne :

   classe MyStatelessWidget étend StatelessWidget {
    @passer outre
    Construction d'un widget (contexte BuildContext) {
      return Row (// modifier en colonne pour la disposition verticale
        mainAxisAlignment: MainAxisAlignment.center,
        enfants: [
          Icon(Icons.android, size: 30.0),
          Icon(Icons.pets, size: 10.0),
          Icon(Icons.stars, size: 75.0),
          Icon(Icons.rowing, size: 25.0),
        ],
      )
    }
  }
  

  

  Répondre au toucher

  L'interaction tactile est gérée avec des gestes, qui sont encapsulés dans la classe GestureDetector . Comme il s'agit également d'un widget, l'ajout de reconnaissance de gestes est aussi simple que d'envelopper des widgets enfants dans un GestureDetector .

  Par exemple, pour ajouter une manipulation tactile à une Icon make it enfant d'un GestureDetector et définit les gestionnaires du détecteur pour les gestes souhaités à capturer.

   class MyStatelessWidget extends StatelessWidget {
    @passer outre
    Construction d'un widget (contexte BuildContext) {
      return GestureDetector (
        onTap: () => print ('vous avez tapé l'étoile'),
        onDoubleTap: () => print ('vous avez tapé deux fois sur l'étoile'),
        onLongPress: () => print ('vous avez appuyé longuement sur l'étoile'),
        enfant: Icône (Icons.stars, taille: 200.0),
      )
    }
  }
  

  Dans ce cas, lorsqu'un tapotement, un double appui ou une pression longue est effectué sur l'icône, le texte associé est imprimé:

   ? Pour recharger à chaud votre application à la volée, appuyez sur "r". Pour redémarrer l'application entièrement, appuyez sur "R".
  Un débogueur et un profileur d'observatoire sur l'iPhone X est disponible à: http://127.0.0.1:8100/
  Pour un message d'aide plus détaillé, appuyez sur "h". Pour quitter, appuyez sur "q".
  flutter: vous avez tapoté l'étoile
  Flutter: vous avez tapé deux fois l'étoile
  flutter: vous avez longtemps appuyé sur l'étoile
  

  En plus des simples gestes tapés, il y a une multitude de reconnaisseurs, pour tout, depuis le panoramique et la mise à l'échelle, jusqu'au glisser. Cela rend très facile la construction d'applications interactives

  Painting

  Flutter propose également une variété de widgets à peindre avec notamment des widgets qui modifient l'opacité, définissent des chemins de détourage et appliquent des décorations. Il prend même en charge la peinture personnalisée via le widget CustomPaint et les classes CustomPainter et Canvas associées

  Un exemple de widget de peinture est le DecoratedBox qui peut peindre un BoxDecoration à l'écran. L'exemple suivant montre comment l'utiliser pour remplir l'écran avec un remplissage dégradé:

   class MyStatelessWidget extends StatelessWidget {
    @passer outre
    Construction d'un widget (contexte BuildContext) {
      retourner new DecoratedBox (
        enfant: Icône (Icons.stars, taille: 200.0),
        décoration: nouveau BoxDecoration (
          gradient: LinearGradient (
            commencer: Alignment.topCenter,
            fin: Alignment.bottomCenter,
            couleurs: [Colors.red, Colors.blue, Colors.green],
            tileMode: TileMode.mirror
          ),
        ),
      )
    }
  }
  

  

  Animation

  Flutter inclut une classe AnimationController qui contrôle la lecture de l'animation dans le temps, y compris le démarrage et l'arrêt d'une animation, ainsi que la variation des valeurs d'une animation. De plus, il y a un AnimatedBuilder widget qui permet de construire une animation en conjonction avec un AnimationController .

  Tout widget, comme l'étoile décorée montrée précédemment, peut avoir ses propriétés animées. Par exemple, refactoriser le code en StatefulWidget puisque animer est un changement d'état, et en passant un AnimationController à la classe State permet d'utiliser la valeur animée lorsque le widget est construit.

   class StarWidget extends StatefulWidget {
    @passer outre
    Etat  createState () {
      retourne StarState ();
    }
  }
  
  classe StarState étend State  avec SingleTickerProviderStateMixin {
    AnimationController _ac;
    final double _starSize = 300.0;
  
     @passer outre
    void initState () {
      super.initState ();
  
      _ac = new AnimationController (
        duration: Durée (millisecondes: 750),
        vsync: ça,
      )
      _ac.forward ();
    }
  
    @passer outre
    Construction d'un widget (contexte BuildContext) {
  
      return new AnimatedBuilder (
        animation: _ac,
        constructeur: (Contexte BuildContext, Widget enfant) {
          retourner DecoratedBox (
            enfant: icône (Icons.stars, taille: _ac.value * _starSize),
            décoration: BoxDecoration (
              gradient: LinearGradient (
                commencer: Alignment.topCenter,
                fin: Alignment.bottomCenter,
                couleurs: [Colors.red, Colors.blue, Colors.green],
                tileMode: TileMode.mirror
              ),
            ),
          )
        }
     )
    }
  }
    

  Dans ce cas, la valeur est utilisée pour faire varier la taille du widget. La fonction de constructeur est appelée chaque fois que la valeur animée change, ce qui fait varier la taille de l'étoile sur 750 ms, créant ainsi une échelle:

  

  Caractéristiques

  Chaînes de plate-forme

  Afin de permettre l'accès aux API de plates-formes natives sur Android et iOS, une application Flutter peut utiliser les canaux de la plateforme. Ceux-ci permettent au code Flutter Dart d'envoyer des messages à l'application iOS ou Android d'hébergement. La plupart des plug-ins open-source disponibles sont construits en utilisant la messagerie sur les canaux de la plate-forme. Pour apprendre à travailler avec les canaux de la plateforme, la documentation de Flutter inclut un bon document qui montre comment accéder aux API de batterie natives.

  Conclusion

  Même en version bêta, Flutter offre une solution idéale pour multiplateformes applications. Avec son excellent outillage et son rechargement à chaud, il apporte une expérience de développement très agréable. La richesse des paquets open-source et une excellente documentation facilitent le démarrage. Pour l'avenir, les développeurs de Flutter pourront cibler Fuchsia en plus d'iOS et d'Android. Compte tenu de l'extensibilité de l'architecture du moteur, il ne me surprendrait pas de voir Flutter atterrir sur une variété d'autres plateformes. Avec une communauté grandissante, c'est un bon moment pour y entrer.

  Prochaines étapes

  (lf, ra, yk, il)