Comment configurer Flutter et créer une application Web Hello World dans Linux

Flutter est un cadre de développement d'applications qui peut être utilisé pour développer des applications multiplateformes exécutées sur le code natif une fois compilé ou construit. Étant développé par Google, Flutter vous permet de créer des prototypes rapides en peu de temps et vous permet de créer des applications à part entière qui utilisent des API spécifiques à la plate-forme. À l'aide de Flutter, vous pouvez créer de belles applications à l'aspect pour les appareils mobiles, les systèmes d'exploitation de bureau et les navigateurs Web à l'aide de widgets de conception de matériaux officiels. Cet article discutera de l'installation de Flutter et de la création d'un nouveau projet pour développer une application Web. Flutter utilise «Dart» comme principal langage de programmation pour écrire des applications.

Installez Flutter sur Linux

Vous pouvez installer Flutter en Linux en utilisant deux méthodes. La première méthode est assez simple, tout ce que vous avez à faire est d'exécuter une commande simple pour installer Flutter depuis Snap Store.

$ sudo snap installer Flutter - Classic

La deuxième méthode implique le téléchargement du référentiel Flutter à partir de GitHub. Exécutez les commandes suivantes successivement pour installer manuellement Flutter:

$ sudo apt install git
$ git clone https: // github.com / Flutter / Flutter.git -b stable - Depth 1 --No-Single-Branch

Notez que l'exécution de la commande ci-dessus vous obligera aux fichiers requis dans le référentiel officiel de Flutter, y compris les fichiers binaires exécutables. Vous pourrez exécuter ces fichiers binaires à partir du dossier «bac». Cependant, ces fichiers exécutables ne seront pas ajoutés à votre variable de chemin à large chemin System et vous ne pourrez pas les exécuter de nulle part à moins que vous ne les ajoutiez manuellement à la variable Path. Pour ce faire, suivez les étapes ci-dessous.

Ouvrir ".Fichier Bashrc "situé dans votre dossier à domicile en utilisant votre éditeur de texte préféré:

$ nano «$ home /.bashrc ”

Ajoutez la ligne suivante au bas du fichier, en remplaçant soigneusement la chaîne.

Export Path = "$ chemin:/ Flutter / Bin "

Par exemple, si vous avez téléchargé le référentiel Flutter dans le dossier «Téléchargements», vous devrez ajouter la ligne suivante:

Export Path = "$ Path: $ home / downloads / flutter / bin"

Enregistrez le fichier une fois que vous avez terminé. Rafraîchir ".Fichier Bashrc »en exécutant la commande ci-dessous:

$ source «$ home /.bashrc ”

Pour vérifier que le dossier «bac» de Flutter a été ajouté au chemin, exécutez la commande ci-dessous:

$ echo $ chemin

Vous devriez obtenir une sortie comme ceci:

/ usr / local / sbin: / usr / local / bin: / usr / sbin: / usr / bin: / sbin: / bin: / usr / jeux: / usr / local / jeux: / snap / bin: / home / NIT / Téléchargements / Flutter / Bin

Remarquez la présence du mot-clé «Flutter» et le chemin complet qui montre le dossier «bac» dans le répertoire «Flutter».

Pour vérifier si la commande «Flutter» peut être exécutée à partir de n'importe quel chemin, utilisez la commande ci-dessous:

$ quel flottement

Vous devriez obtenir une sortie comme ceci:

/ Home / Nit / Téléchargements / Flutter / Bin / Flutter

Notez que la langue «fléchette», qui est nécessaire pour écrire des applications de flutter, est livrée avec des fichiers de flottement téléchargés à partir du référentiel Git ou du package SNAP. Exécutez la commande suivante pour vérifier les dépendances manquantes requises pour exécuter Flutter:

$ Flutter Doctor

Certains fichiers requis peuvent commencer à télécharger pour terminer la configuration de Flutter. Si vous n'avez pas encore installé Android SDK, un message sera affiché dans la sortie pour vous guider à travers l'installation.

Si vous souhaitez développer des applications Android à l'aide de Flutter, cliquez sur les liens visibles dans la sortie du terminal et suivez les étapes pertinentes pour installer Android SDK.

Ce tutoriel se concentre sur la création d'applications Web à l'aide de Flutter. Pour permettre la prise en charge de la création d'applications Web, exécutez les commandes suivantes successivement:

$ Flutter Channel Beta
$ mise à niveau
$ Flutter Config --Enable-web

Pour vérifier que la prise en charge de l'application Web a effectivement été activée, exécutez la commande ci-dessous:

$ dispositifs de flottement

Vous devriez obtenir une sortie comme ceci:

2 appareils connectés:
Serveur Web (Web) • Serveur Web • Web-Javascript • Outils de flottement
Chrome (Web) • Chrome • Web-Javascript • Google Chrome 87.0.4280.66

Si vous avez suivi les étapes correctement jusqu'à présent, Flutter devrait maintenant être correctement installé sur votre système, prêt à créer des applications Web.

Créer un nouveau projet Flutter

Pour créer un nouveau projet d'application Web «Helloworld» à l'aide de Flutter, exécutez les commandes mentionnées ci-dessous:

$ flutter créer Helloworld
$ cd helloworld

Pour tester votre projet nouvellement créé, exécutez la commande:

$ Flutter Run -d Chrome

Vous devriez voir une démo d'application Web Flutter comme ceci:

Vous pouvez déboguer des applications Web Flutter à l'aide d'outils de développement intégrés dans Chrome.

Modifiez votre projet

Le projet de démonstration que vous avez créé ci-dessus contient un «principal.Dart ”Fichier situé dans le dossier« lib ». Code contenu dans ce «principal.Dart ”Le fichier est très bien commenté et peut être compris assez facilement. Je vous suggère de passer par le code au moins une fois pour comprendre la structure de base d'une application Flutter.

Flutter prend en charge le «rechargement chaud», vous permettant de rafraîchir rapidement votre application sans la relancer pour voir les modifications. Essayez de changer le titre de l'application de «Page d'accueil de démo Flutter» en «Hello World !!" en général.Fichier de fléchette. Une fois terminé, appuyez sur la touche dans Terminal pour actualiser l'état de l'application sans le relancer.

Créez votre application Flutter

Pour créer votre application Web Flutter, utilisez la commande spécifiée ci-dessous à partir de votre répertoire de projet:

$ Flutter Build Web

Une fois le processus de construction terminé, vous devriez avoir un nouveau dossier dans votre répertoire de projet situé sur le chemin «build / web». Ici, vous trouverez tous les nécessaires ".html ",".js »et«.Fichiers CSS »requis pour servir le projet en ligne. Vous trouverez également divers fichiers d'actifs utilisés dans le projet.

Ressources utiles

Pour en savoir plus sur le développement d'applications Web à l'aide de Flutter, reportez-vous à sa documentation officielle. Vous pouvez vous référer à la documentation officielle de la langue Dart pour mieux comprendre les applications de flutter. Flutter est livré avec des tonnes de packages officiels et tiers que vous pouvez utiliser pour développer rapidement des applications. Vous pouvez trouver ces packages disponibles ici. Vous pouvez utiliser des widgets de flutter de conception de matériaux dans vos applications Web. Vous pouvez trouver une documentation pour ces widgets dans la documentation officielle de flottement. Vous pouvez également avoir une idée de ces widgets en parcourant des démos de travail de conception de matériaux.

Conclusion

Flutter est en développement depuis un certain temps maintenant et il se développe comme un cadre pour développer des applications de plateforme «écrire une fois sur n'importe où». Son adoption et sa popularité peuvent ne pas être aussi élevées que d'autres cadres de ce type, mais il fournit une API stable et robuste pour développer des applications multiplateliées.