Share
Flutter est en train de devenir l'un des frameworks les plus populaires pour le développement d'applications mobiles multiplates-formes. Aujourd'hui, la plupart des développeurs Android et iOS commencent à s'accorder pour dire qu'il s'agit d'une alternative plus rapide et plus pérenne aux autres infrastructures multiplates-formes telles que React Native et NativeScript..
Google lui-même ne néglige aucun effort pour attirer plus de développeurs. Par exemple, cette année, Google I / O a organisé plusieurs sessions approfondies consacrées au développement d'applications compatibles avec Material Design. Lors de l'une des sessions, Google a également annoncé que Flutter allait devenir une plate-forme de premier ordre pour Material Design..
Dans cette série de tutoriels, je vais vous aider à maîtriser les bases du développement d'applications Android avec Flutter. Dans ce tutoriel, qui commence la série, je vais me concentrer sur les widgets Flutter, les blocs de construction de toutes les applications Flutter..
Pour tirer le meilleur parti de cette série, vous aurez besoin de:
Après avoir installé quelques plugins légers, vous pouvez utiliser Android Studio, auquel les développeurs d'applications Android natifs IDE sont le plus habitués, afin de développer des applications Flutter..
Commencez par lancer Android Studio et choisissez le Configurer> Plugins option dans l'écran d'accueil.
Dans la boîte de dialogue qui s’affiche, appuyez sur le bouton Parcourir les dépôts bouton et rechercher le plugin Flutter.
Une fois que vous avez trouvé le plugin, appuyez sur Installer bouton. À ce stade, il vous sera demandé si vous souhaitez également installer le plugin Dart. presse Oui procéder.
Une fois les deux plugins installés, appuyez sur le bouton Redémarrer Android Studio bouton pour terminer la configuration.
Après le redémarrage, vous pourrez voir un Démarrer un nouveau projet Flutter bouton sur l'écran d'accueil Android Studio. Appuyez dessus pour commencer à créer votre premier projet Flutter..
Sur l'écran suivant, choisissez le Application de flottement option et appuyez sur Suivant.
Vous verrez maintenant un formulaire vous demandant divers détails sur votre application Flutter, tels que son nom et son emplacement. Assurez-vous de taper des valeurs valides dans tous les champs.
Le plugin Flutter n'est pas fourni avec le SDK Flutter. Par conséquent, vous devez installer le SDK séparément. Vous pouvez le faire en appuyant sur le bouton Installer le SDK bouton maintenant.
Selon la rapidité de votre connexion Internet, l'installation peut prendre un certain temps. Après avoir réussi, vous pourrez appuyer sur le bouton Suivant bouton pour terminer la configuration du projet.
Tout au long de ce tutoriel, vous allez écrire du code à l’intérieur du lib / main.dart fichier. Par défaut, il contiendra un exemple de code dont vous n’auriez pas besoin. Donc, effacez tout son contenu avant de continuer.
Le framework Flutter utilise le langage de programmation Dart, un langage facile à apprendre et dont la syntaxe est très similaire à celle de Java et C. Par conséquent, comme la plupart des programmes Java et C autonomes, une application Flutter a principale() fonction, une fonction spéciale qui sert de point d'entrée à l'application.
En conséquence, ajoutez le code suivant à la main.dart fichier:
void main () // DO DO
À ce stade, vous pouvez appuyer sur Maj-F10 pour construire et exécuter l'application. Si vous n'avez rencontré aucune erreur lors des étapes précédentes, vous devriez voir l'application afficher un canevas blanc vierge sur votre appareil..
Toutes les applications Flutter sont composées d'un ou de plusieurs widgets, instances de classes vous permettant de dessiner du texte et des images à l'écran. En règle générale, vous ne devez pas programmer de widgets de bas niveau à partir de rien, car le cadre est fourni avec une grande variété de widgets préconfigurés et magnifiques qui respectent les langages de conception des plates-formes Android et iOS..
Pour pouvoir utiliser des widgets de base dans votre application, importez le widgets bibliothèque en ajoutant le code suivant au début de la main.dart fichier:
importer 'package: flutter / widgets.dart';
Les widgets les plus simples que vous pouvez créer sont des widgets sans état. Comme vous l'avez peut-être deviné, ils ne sont associés à aucun état et sont donc statiques. Ils sont idéaux pour l'affichage d'étiquettes, de titres et d'autres éléments d'interface utilisateur dont le contenu ne peut pas être modifié pendant l'exécution de l'application. Pour créer un widget sans état, vous devez étendre le StatelessWidget classe et remplacer sa construire() méthode. L'exemple de code suivant vous montre comment:
La classe MyFirstWidget étend StatelessWidget @ build Widget (contexte BuildContext) // Plus de code ici
Comme vous pouvez le voir dans le code ci-dessus, le construire() méthode doit retourner un Widget objet. Vous êtes libre de choisir et de renvoyer n'importe laquelle des dizaines d'offres de widgets prédéfinis Flutter. Par exemple, si vous souhaitez afficher une ligne de texte, vous pouvez créer et renvoyer une Texte widget comme indiqué ci-dessous:
Accentsconagua
return Text ("C'est bien!", textDirection: TextDirection.ltr);Notez que vous devez toujours vous rappeler de spécifier la direction de votre texte lorsque vous utilisez un Texte widget.
Si vous lancez immédiatement l'application, vous ne pourrez pas voir le texte. C'est parce que vous n'avez toujours pas instancié votre widget sans état. Alors allez au principale() méthode, instanciez le widget qu'il contient et transmettez-le au runApp () méthode. Voici comment:
runApp (nouveau MyFirstWidget ());
Dès que vous ajoutez le code ci-dessus et enregistrez votre projet, Android Studio doit automatiquement recharger à chaud l'application sur votre appareil, ce qui vous permet d'afficher le texte..
Si vous souhaitez afficher une image au lieu d'un texte, vous pouvez simplement remplacer le Texte widget avec un Image widget à l'intérieur de votre classe construire() méthode. Le code suivant vous montre comment créer un Image widget qui télécharge et affiche une image distante:
return Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");Lors de la sauvegarde de votre projet, vous devriez voir quelque chose comme ceci sur votre appareil:
Toutes les applications Flutter peuvent être considérées comme des arborescences de widgets. L'application créée à l'étape précédente est une arborescence de widgets comportant un seul widget. En utilisant Texte ou Image Les widgets en tant qu'éléments principaux de l'arborescence des widgets ne sont toutefois pas une bonne idée car vous ne pourrez pas y ajouter de widgets enfants..
Flutter propose plusieurs widgets pouvant servir de conteneurs à d'autres widgets. Les plus couramment utilisés sont les Rangée et Colonne widgets. Comme leur nom l'indique, les Rangée widget vous permet de placer plusieurs widgets l'un à côté de l'autre, et le Colonne widget vous aide à positionner les widgets les uns en dessous des autres. Ils sont indispensables pour créer des arborescences de widgets plus profondes.
Le code suivant vous montre comment utiliser le Colonne widget pour créer un arbre de widgets qui a deux enfants: un Texte widget et un Image widget.
Text myText = Text ("C'est une belle photo!", TextDirection: TextDirection.ltr); Image myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); return Column (enfants: [myText, myImage]); L'application devrait maintenant ressembler à ceci:
De plus, certains widgets vous aident à mieux positionner un seul widget. Par exemple, le Centre widget vous aide à centrer un widget. De même, un Récipient le widget vous permet d'ajouter du padding et des marges à vos widgets.
Le code suivant vous montre comment centrer le Colonne widget que vous venez de créer en l'intégrant à l'intérieur d'un Centre widget:
centre de retour (enfant: colonne (enfants:[myText, myImage], mainAxisSize: MainAxisSize.min));
Dans le code ci-dessus, notez que le Colonne Le widget utilise une propriété supplémentaire appelée mainAxisSize, dont la valeur est définie sur min. C'est nécessaire car, avant de centrer une colonne, vous devez rendre sa hauteur égale à la somme des hauteurs de tous ses enfants. Sans la propriété, le Colonne widget sera aussi grand que l'écran de l'appareil, et le Centre widget n'aura aucun effet sur elle.
Pendant tout ce temps, vous utilisez des widgets de base faisant partie de la widgets bibliothèque. Flutter a une bibliothèque alternative appelée Matériel, qui offre des widgets Material Design. Pour l'utiliser dans votre application, remplacez la déclaration qui importe le widgets bibliothèque avec les éléments suivants:
importer 'package: flutter / material.dart';
Ensuite, pour appliquer le style Material Design à vos widgets, vous devez disposer d'un MaterialApp widget en haut de votre arborescence. Vous devez également intégrer tous les widgets que vous avez créés précédemment dans un Échafaud widget, qui peut servir d’écran d’accueil du MaterialApp widget.
De plus, comme la plupart des applications Material Design ont une barre d’applications, vous pouvez éventuellement définir la Échafaud le widget appBar propriété à un nouveau AppBar widget.
Le code suivant vous montre comment faire tout cela de manière concise:
return MaterialApp (home: Échafaudage (appBar: AppBar (titre: texte ("Mon App"))), corps: Centre (enfant: Colonne (enfants: [myText, myImage], mainAxisSize: MainAxisSize.min),))); L'application devrait être beaucoup mieux maintenant.
Les widgets sans état sont immuables. Avec le code que vous avez écrit aux étapes précédentes, il n’ya pas de moyen facile de modifier le contenu de la Texte widget ou le Image widget. Pourquoi? Parce que le framework Flutter préfère la programmation réactive à la programmation impérative. Par conséquent, la plupart de ses widgets ne disposent pas de méthodes de définition permettant de mettre à jour leur contenu au moment de l'exécution. Par exemple, le Texte le widget n'a pas Définir le texte() méthode qui vous permettra de changer le texte affiché.
Les widgets stateful, en revanche, sont modifiables, mais pas directement. Ils comptent sur Etat objets pour décider ce qu'ils doivent afficher à tout moment. En tant que tel, chaque fois qu'un Etat changements d'objet, le framework mettra automatiquement à jour le contenu de tout widget stateful qui lui est connecté.
Pour créer un widget avec état, vous devez étendre la StatefulWidget classe et remplacer sa createState () méthode.
Classe MySecondWidget étend StatefulWidget @override StatecreateState () // DO DO
Ensuite, vous devez créer une nouvelle coutume Etat classe contenant des variables qui forment l'état du widget stateful. De plus, à l'intérieur de la classe, vous devez remplacer le construire() méthode pour retourner votre arborescence de widgets.
Le code suivant vous montre comment créer un Etat classe contenant une seule variable nommée url:
la classe MyState étend l'EtatString url = "https://source.unsplash.com/random/800x600"; // Une image aléatoire de la construction du widget Unsplash @override (contexte BuildContext) // Plus de code ici
Par exemple concret, créons maintenant une arborescence de widgets Conception de matériaux contenant un Image widget, qui affiche une image aléatoire, et un RaisedButton widget, sur lequel l'utilisateur peut appuyer pour charger une nouvelle image aléatoire. Le code suivant vous montre comment:
return MaterialApp (accueil: Echafaudage (corps: Centre (enfant: Colonne (mainAxisSize: MainAxisSize.min, élément principal)): enfants:[RaisedButton (child: Text ("Appuyez-moi"), onPressed: changeURL,), Image.network (url)]))));
Notez que le Image Le constructeur du widget prend maintenant la url variable en tant qu'entrée, au lieu d'un littéral de chaîne. Cela permet au framework d’utiliser la dernière valeur de la variable chaque fois que le Image le widget est dessiné.
Notez également que le RaisedButton widget a un onPressed attribut pointant sur un écouteur d'événement nommé changeURL (). La méthode n'existe pas encore, alors créez-la.
void changeURL () // Plus de code ici
Dans la méthode, vous devez bien sûr modifier la valeur de la url variable. Cependant, vous ne devriez pas le changer directement. Si vous le faites, le framework Flutter ne sera pas informé du changement. Pour mettre à jour correctement l'état d'un widget avec état, vous devez toujours effectuer toutes vos modifications à l'intérieur du setState () méthode.
Pour l'instant, pour afficher des images aléatoires, je vous suggère d'utiliser le service Unsplash Source. Tout ce que vous avez à faire pour télécharger une image au hasard à partir de celle-ci est de lui envoyer une requête HTTP et de lui transmettre une chaîne de requête unique..
Le code suivant vous montre comment procéder à l'aide d'un horodatage pour construire la chaîne de requête unique:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). millisecondsSinceEpoch";);
À ce stade, votre coutume Etat la classe est prête. Tout ce que vous devez faire ensuite est de l’instancier et de le retourner à partir du createState () méthode de votre widget stateful.
renvoyer MyState ();
Si vous passez une instance de votre widget stateful au runApp () méthode, rechargez l'application et appuyez plusieurs fois sur le bouton, vous devriez le voir afficher une nouvelle photo à chaque fois..
Vous savez maintenant comment utiliser des widgets sans état et avec état dans vos applications Flutter. Vous avez également appris à leur appliquer un thème de conception de matériaux, à modifier leur contenu de manière dynamique et à les rendre interactifs..
Il est à noter que Flutter n'utilise aucun des widgets natifs de la plate-forme mobile. Il dessine tous les widgets lui-même, à l'aide d'un moteur graphique 2D hautes performances appelé Skia, qui utilise intensivement le processeur graphique. En conséquence, les applications Flutter fonctionnent souvent à près de 60 ips et se sentent très fluides et réactives.
Pour en savoir plus sur les widgets dans Flutter, consultez la documentation officielle..
