Share
Ce que vous allez créerSi vous recherchez des approches alternatives pour le développement d'applications Android, vous devriez essayer de donner à Flutter de Google, un framework basé sur le langage de programmation Dart, un essai..
Les applications construites avec Flutter sont quasiment identiques à celles construites avec le SDK Android, tant en termes d’apparence que de performances. De plus, avec des ajustements mineurs, ils peuvent également être exécutés sur des appareils iOS.
Dans ce tutoriel, je vais vous présenter les bases de Flutter en vous expliquant comment créer une application de calculateur de pourboires simple pour Android..
Pour pouvoir suivre ce tutoriel, vous aurez besoin de:
Fonctionnant à 60 ips, les interfaces utilisateur créées avec Flutter fonctionnent beaucoup mieux que celles créées avec d’autres infrastructures de développement multiplates-formes telles que React Native et Ionic. Si cela ne vous enthousiasme pas, voici quelques raisons supplémentaires pour lesquelles vous voudrez peut-être utiliser Flutter:
Vous pouvez obtenir la dernière version de Flutter en clonant son référentiel GitHub..
git clone https://github.com/flutter/flutter.git
Flutter a plusieurs dépendances, telles que les polices Dart SDK et Material Design. Heureusement, la première fois que vous utilisez l'outil de diagnostic de Flutter, ils sont tous installés automatiquement..
cd flutter / bin ./ flutter docteur
Pour pouvoir créer des applications Android, vous devez également pointer Flutter vers le répertoire où vous avez installé Android Studio..
./ config de flutter --android-studio-dir ~ / android-studio
Bien que vous puissiez utiliser directement la CLI de Flutter pour créer et exécuter de nouvelles applications, votre expérience de développement sera probablement bien meilleure si vous utilisez un environnement de développement intégré. 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 IntelliJ.
Dans la boîte de dialogue qui s’affiche, appuyez sur le bouton Parcourir les dépôts… bouton et rechercher le Dard brancher. Une fois que vous l'avez trouvé, appuyez sur le bouton Installer bouton pour l'installer.
De même, recherchez et installez le Battement brancher.
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, naviguez jusqu'à Langages & Encadrements> Flutter. dans le Chemin du SDK Flutter champ, tapez le chemin absolu du répertoire.
presse D'accord pour compléter la configuration.
Pour créer un nouveau projet Flutter, appuyez sur le bouton 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.
Une fois le projet généré, je vous suggère d’appuyer sur le bouton Courir bouton pour vous assurer que le SDK Dart, les plug-ins et le framework Flutter sont tous configurés correctement. Si tel est le cas, après plusieurs secondes, l'écran suivant apparaît sur votre appareil ou votre émulateur:
Notez que, à partir de ce moment, vous n’avez pas à appuyer sur le bouton Courir bouton à nouveau, même après avoir modifié le code. Supports de flottement rechargement à chaud, une fonctionnalité qui vous permet d'envoyer instantanément des mises à jour à l'application sans la redémarrer.
Dans ce tutoriel, nous allons créer une application de calculateur de pourboires avec les widgets suivants:
Accentsconagua
Champ de texte accepter un montant de factureChamp de texte accepter un pourcentage de pourboireRaisedButton l'utilisateur peut appuyer pour calculer le pourboireChaque widget Flutter peut être soit un StatelessWidget ou un StatefulWidget. Comme son nom l'indique, un StatefulWidget a un Etat 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, pas conçu pour stocker de manière persistante des données. Pour que ce didacticiel soit court, nous allons créer notre calculateur de pourboires en tant que StatelessWidget. Par conséquent, ouvrez main.dart, supprimez tout son contenu et ajoutez-y le code suivant:
importer 'package: flutter / material.dart'; class TipCalculator étend StatelessWidget
Dans le code ci-dessus, le importation la ligne est importante parce que matériau.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 de membre à la classe..
double billAmount = 0.0; double pointe Pourcentage = 0,0;
Pour commencer à créer l'interface utilisateur de l'application, remplacez le construire() méthode.
@override Widget build (contexte BuildContext) // Plus de code va ici
Créons maintenant les deux Champ de texte 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 actifs..
Parce que nous ne pouvons pas récupérer directement le contenu d'un Champ de texte widget, nous devons également associer un onChanged gestionnaire d'événements avec elle. À 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 répertoire construire() méthode:
// Crée le premier champ de saisie TextField billAmountField = new TextField (labelText: "Montant de la facture (\ $)", keyboardType: TextInputType.number, onChanged: (InputValue value) try billAmount = double.parse (value.text); catch (exception) billAmount = 0.0;); // Créer un autre champ de saisie TextField tipPercentageField = new TextField (labelText: "Tip%", keyboardType: TextInputType.number, hintText: "15", onChanged: (InputValue value) try tipPercentage = double.parse (value.text) ; catch (exception) tipPercentage = 0.0;);
Même si vous n'avez jamais travaillé avec Dart auparavant, le code ci-dessus devrait être assez intuitif, du moment que vous connaissez Java. Par exemple, vous pouvez voir que nous utilisons le parse () méthode pour convertir chaque Champ de texte le contenu du texte du widget à un double objet. Parce que le parse () méthode peut jeter un FormatException, il est également entouré d'un essayer… attraper bloc.
Créer un RaisedButton widget est un peu comme créer un Champ de texte widget. Cependant, pour lui attribuer une étiquette, vous devez créer un nouveau Texte widget et l'ajouter en tant que son enfant.
// Bouton Create RaisedButton CalculateButton = new RaisedButton (child: new Text ("Calculate"), onPressed: () // D'autres codes vont ici);À l'intérieur de onPressed gestionnaire d'événements du bouton, nous allons calculer le pourboire et le montant total à payer, puis les afficher 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 à la showDialog () méthode.
En conséquence, ajoutez le code suivant dans le répertoire onPressed gestionnaire d'événements:
// Calcule le pourboire et le total double calculé.Conseil = factureAmount * tipPercentage / 100.0; total double = montant de la facture + info calculée; // Générer une boîte de dialogue AlertDialog dialog = new AlertDialog (contenu: new Text ("Conseil: \ $$ calculeTip \ n" "Total: \ $$ total")); // Afficher la boîte de dialogue showDialog (context: context, child: dialog);Dans le code ci-dessus, notez que nous avons utilisé la fonction d’interpolation de chaînes de Dart pour incorporer des variables dans le fichier. contenu 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 aimez.
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 pas de relation entre les widgets créés à l'étape précédente. Comme vous l'avez peut-être deviné, ils vont tous être frères et sœurs, alors créons maintenant un widget parent pour eux..
Un widget pouvant avoir plusieurs enfants est généralement appelé widget de présentation. Flutter propose plusieurs widgets de présentation parmi lesquels choisir. Pour notre application, le Colonne widget est le plus approprié, car il positionne tous ses enfants un en dessous de l'autre.
De plus, afin de se conformer à la spécification Material Design, nous devons ajouter un remplissage de 16 dp au Colonne widget. Nous pouvons le faire en faisant un enfant d'un Récipient widget.
Container container = new Container (padding: const EdgeInsets.all (16.0), child: new Column (children: [billAmountField, tipPercentageField, CalculateButton]));
Une interface utilisateur Material Design n'est pas complète sans une barre d'application. Par conséquent, créez-en un maintenant en utilisant le AppBar widget.
AppBar appBar = new AppBar (titre: new Text ("Astuce Calculator"));Les mises en page contenant des barres et des conteneurs d'applications sont si courantes que Flutter offre une Échafaud widget pour vous aider à établir rapidement une relation entre eux.
Échafaudage = nouvel échafaudage (appBar: appBar, corps: conteneur);
Avec le Échafaud widget à la racine, notre arborescence de widgets est maintenant prête. Vous pouvez aller de l'avant et utiliser le Échafaud widget en tant que valeur de retour du construire() méthode.
retourner l'échafaud;
Si vous avez du mal à visualiser l’arbre, le diagramme suivant devrait vous aider:
Notre fichier de fléchettes a besoin d'un principale() fonctionner comme son point d'entrée. À l'intérieur, nous devons appeler le runApp () fonction pour gonfler et restituer l'arbre de widgets créé à l'étape précédente.
De plus, notre TipCalculator le widget doit être placé à l'intérieur d'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:
void main () runApp (new MaterialApp (titre: 'Tip Calculator', calculateur de pourboires), home: new TipCalculator ()));
Vous pouvez maintenant appuyer sur le App Hot Reload bouton pour commencer à utiliser l'application sur votre appareil.
Dans ce tutoriel, vous avez appris à utiliser Flutter et Dart, ainsi qu’IntelliJ IDEA, pour créer une application simple pour Android..
À mon avis, Flutter possède presque tout ce qu'un développeur peut rechercher dans un cadre de développement d'applications mobiles multiplates-formes. Avant de décider de créer votre prochaine grande application avec cette dernière, sachez toutefois 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 à sa documentation officielle.
