Coder une application Android avec Flutter et Dart

Si vous recherchez des approches alternatives au développement d’applications Android, vous devriez envisager de donner à Google Battement, un cadre basé sur la Dard langage de programmation, un essai.

Les applications créées avec Flutter sont largement identiques à celles créées à l’aide du SDK Android, à la fois en termes d’apparence et de performances. De plus, avec des modifications mineures, ils peuvent également être exécutés sur les appareils iOS.

Dans ce didacticiel, je vais vous présenter les bases de Flutter en vous montrant comment créer une application simple de calcul de pourboire pour Android.

Conditions préalables

Pour pouvoir suivre ce tutoriel, vous aurez besoin de:

  • la dernière version de IDÉE IntelliJ
  • Studio Android 2.2 ou supérieur
  • un appareil ou un émulateur exécutant Android 4.4 ou version ultérieure
  • un ordinateur exécutant Mac ou Linux

1. Pourquoi utiliser Flutter?

Fonctionnant à 60 ips, les interfaces utilisateur créées avec Flutter fonctionnent bien mieux que celles créées avec d’autres frameworks de développement multiplateformes tels que React Native et Ionic. Si cela ne vous excite pas, voici quelques autres raisons pour lesquelles vous pourriez vouloir utiliser Flutter:

  1. Flutter utilise Dart, un langage rapide orienté objet avec plusieurs fonctionnalités utiles telles que les mixins, les génériques, les isolats et les types statiques facultatifs.
  2. Flutter a ses propres composants d’interface utilisateur, ainsi qu’un moteur pour les rendre sur les plates-formes Android et iOS. La plupart de ces composants d’interface utilisateur, dès la sortie de la boîte, sont conformes aux directives de Material Design.
  3. Les applications Flutter peuvent être développées à l’aide d’IntelliJ IDEA, un IDE très similaire à Android Studio.

2. Installation de Flutter

Vous pouvez obtenir la dernière version de Flutter en clonant son référentiel GitHub.

Flutter a plusieurs dépendances, telles que les polices Dart SDK et Material Design. Heureusement, la première fois que vous exécutez l’outil de diagnostic de Flutter, tous sont installés automatiquement.

Outil de diagnostic Logs of Flutters

Pour pouvoir créer des applications Android, vous devez également pointer Flutter vers le répertoire dans lequel vous avez installé Android Studio.

3. Configuration d’IntelliJ IDEA

Bien que vous puissiez directement utiliser la CLI de Flutter pour créer et exécuter de nouvelles applications, vous aurez probablement une bien meilleure expérience de développement si vous utilisez un IDE. L’IDE recommandé pour Flutter est IntelliJ IDEA.

Avant de commencer à développer des applications Flutter avec, cependant, vous devez installer des plugins pour Dart et Flutter. Pour ce faire, commencez par sélectionner Configurer> Plugins dans l’écran d’accueil d’IntelliJ.

Le menu Configurer

Dans la boîte de dialogue qui apparaît, appuyez sur le bouton Parcourir les référentiels … et recherchez le Dard brancher. Une fois que vous l’avez trouvé, appuyez sur le Installer bouton pour l’installer.

Boîte de dialogue du plugin Dart

De même, recherchez et installez le Battement brancher.

Boîte de dialogue du plugin Flutter

Une fois les deux plugins installés, redémarrez IntelliJ IDEA.

Vous devez maintenant pointer le plugin Flutter vers le répertoire dans lequel vous avez installé Flutter. Pour ce faire, sélectionnez Configurer> Paramètres dans l’écran d’accueil et, dans la boîte de dialogue qui apparaît, accédez à Langues et cadres> Flutter. dans le Chemin du SDK Flutter , saisissez le chemin absolu du répertoire.

Boîte de dialogue de configuration du plugin Flutter

presse D’accord pour terminer la configuration.

4. Créer un nouveau projet

Pour créer un nouveau projet Flutter, appuyez sur la touche Créer un nouveau projet bouton dans l’écran d’accueil. dans le Nouveau projet dialogue, choisissez Battement et appuyez sur Suivant.

Vous pouvez maintenant donner un nom significatif à votre projet et appuyer sur terminer.

Nouvelle boîte de dialogue de projet

Une fois le projet généré, je vous propose d’appuyer sur le bouton Courir pour vous assurer que le SDK Dart, les plugins et le framework Flutter sont tous correctement configurés. Si tel est le cas, après plusieurs secondes, vous devriez voir l’écran suivant sur votre appareil ou votre émulateur:

En relation :  Les 7 meilleures applications pour les enseignants à utiliser en classe
Application de démonstration Flutter

Notez qu’à partir de ce moment, vous n’avez plus besoin d’appuyer sur la touche Courir bouton à nouveau même après avoir modifié le code. Supports Flutter rechargement à chaud, une fonctionnalité qui vous permet de pousser instantanément les mises à jour vers l’application sans la redémarrer.

Bouton de l'application Hot Reload

5. Créer des widgets

Dans ce didacticiel, nous allons créer une application de calcul de pourboire avec les widgets suivants:

  • une TextField accepter un montant de facture
  • une TextField accepter un pourcentage de pourboire
  • une RaisedButton l’utilisateur peut appuyer sur pour calculer le pourboire

Chaque widget Flutter peut être un StatelessWidget ou un StatefulWidget. Comme son nom l’indique, un StatefulWidget a un State objet qui lui est associé, ce qui lui permet non seulement de stocker des données, mais également de réagir aux modifications des données.

UNE StatelessWidget, d’autre part, est un objet plus simple, non conçu pour stocker de manière persistante des données. Pour garder ce tutoriel court, nous allons créer notre calculateur de pourboire en tant que StatelessWidget. Par conséquent, ouvrez main.dart, supprimez tout son contenu et ajoutez-y le code suivant:

Dans le code ci-dessus, le import la ligne est importante car material.dart est la bibliothèque qui contient tous les widgets Material Design que nous utiliserons dans cette application.

Pour stocker le montant de la facture et le pourcentage de pourboire, ajoutez deux variables membres à la classe.

Pour commencer à créer l’interface utilisateur de l’application, remplacez le build() méthode.

Créons maintenant les deux TextField widgets. Ce faisant, nous pouvons spécifier des détails tels que les étiquettes que nous voulons associer aux widgets et les types de claviers virtuels qui doivent être affichés lorsqu’ils sont en focus.

Parce que nous ne pouvons pas récupérer directement le contenu d’un TextField widget, il faut aussi associer un onChanged gestionnaire d’événements avec. À l’intérieur du gestionnaire, qui reçoit un InputValue objet, nous pouvons mettre à jour le contenu des variables membres de notre classe.

En conséquence, ajoutez le code suivant dans le build() méthode:

Même si vous n’avez jamais travaillé avec Dart auparavant, le code ci-dessus doit être assez intuitif, tant que vous êtes familier avec Java. Par exemple, vous pouvez voir que nous utilisons le parse() méthode pour convertir chacun TextField contenu textuel du widget vers un double objet. Parce que le parse() méthode peut lancer un FormatException, il est également entouré d’un try...catch bloquer.

Créer un RaisedButton widget ressemble beaucoup à la création d’un TextField widget. Cependant, pour lui attribuer une étiquette, vous devez créer un nouveau Text widget et ajoutez-le comme son child.

À l’intérieur de onPressed gestionnaire d’événements du bouton, nous calculerons le pourboire et le montant total à payer, et afficherons les deux dans une boîte de dialogue modale. Pour créer le dialogue, nous pouvons utiliser le AlertDialog classe. Une fois créée, la boîte de dialogue peut être affichée en la passant comme argument au showDialog() méthode.

En relation :  Fuite: de nouveaux détails apparaissent sur le prochain OnePlus 8T

En conséquence, ajoutez le code suivant dans le onPressed gestionnaire d’événements:

Dans le code ci-dessus, notez que nous avons utilisé la fonction d’interpolation de chaîne de Dart pour incorporer des variables dans le content du dialogue. En outre, vous pouvez voir que les littéraux de chaîne dans Dart peuvent être concaténés simplement en les plaçant les uns à côté des autres, bien que vous puissiez utiliser le + opérateur aussi, si vous le souhaitez.

6. Créer une arborescence de widgets

Une application Flutter n’est généralement rien d’autre qu’un arbre de widgets. En d’autres termes, vous créez une application Flutter en créant simplement plusieurs widgets et en établissant des relations parent-enfant entre eux.

Actuellement, il n’y a aucune relation entre les widgets que nous avons créés à l’étape précédente. Comme vous l’avez peut-être deviné, ils seront tous frères, alors créons maintenant un widget parent pour eux.

Un widget qui peut avoir plusieurs enfants est généralement appelé widget de mise en page. Flutter propose plusieurs widgets de mise en page au choix. Pour notre application, le Column widget est le plus approprié car il positionne tous ses enfants les uns sous les autres.

De plus, afin de se conformer à la spécification Material Design, nous devons ajouter un rembourrage de 16 dp à la Column widget. Nous pouvons le faire en en faisant un child d’un Container widget.

Une interface utilisateur de Material Design n’est pas complète sans une barre d’applications. Par conséquent, créez-en un maintenant en utilisant le AppBar widget.

Les dispositions contenant des barres d’applications et des conteneurs sont si courantes que Flutter offre un Scaffold widget pour vous aider à établir rapidement une relation entre eux.

Avec le Scaffold widget à sa racine, notre arborescence de widgets est maintenant prête. Vous pouvez continuer et utiliser le Scaffold widget comme valeur de retour du build() méthode.

Si vous avez du mal à visualiser l’arbre, le diagramme suivant devrait vous aider:

Schéma de l'arborescence des widgets

sept. Créer un point d’entrée

Notre fichier Dart a besoin d’un main() fonctionner comme son point d’entrée. À l’intérieur, nous devons appeler le runApp() pour gonfler et rendre l’arborescence des widgets que nous avons créée à l’étape précédente.

De plus, notre TipCalculator le widget doit être placé dans un MaterialApp widget afin qu’un thème et un jeu de couleurs Material Design puissent lui être appliqués. Par conséquent, ajoutez le code suivant à main.dart:

Vous pouvez maintenant appuyer sur le Application de rechargement à chaud pour commencer à utiliser l’application sur votre appareil.

Application de calcul de pourboire

Conclusion

Dans ce didacticiel, vous avez appris à utiliser Flutter et Dart, avec IntelliJ IDEA, pour créer une application simple pour Android.

À mon avis, Flutter a presque tout ce qu’un développeur pourrait rechercher dans un cadre de développement d’applications mobiles multiplateformes. Cependant, avant de décider de commencer à créer votre prochaine grande application avec elle, sachez qu’il s’agit toujours d’un cadre très nouveau et en évolution rapide.

Pour en savoir plus sur Flutter, vous pouvez vous référer à son documentation officielle.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.