Phenquestions
Installeer Flutter op Linux
Je kunt Flutter op twee manieren in Linux installeren:. De eerste methode is vrij eenvoudig, het enige dat u hoeft te doen is een eenvoudige opdracht uit te voeren om Flutter te installeren vanuit snap store.
$ sudo snap install flutter --classicDe tweede methode omvat het downloaden van de flutter-repository van GitHub. Voer de volgende opdrachten achter elkaar uit om Flutter handmatig te installeren:
$ sudo apt install git$ git kloon https://github.com/flutter/flutter.git -b stable -- depth 1 --no-single-branch
Houd er rekening mee dat het uitvoeren van de bovenstaande opdracht u de vereiste bestanden van de officiële Flutter-repository oplevert, inclusief uitvoerbare binaire bestanden. U kunt deze binaire bestanden uitvoeren vanuit de map "bin". Deze uitvoerbare bestanden worden echter niet toegevoegd aan uw systeembrede PATH-variabele en u kunt ze nergens vandaan uitvoeren, tenzij u ze handmatig aan de PATH-variabele toevoegt. Volg hiervoor de onderstaande stappen:.
Open ".bashrc"-bestand in uw thuismap met uw favoriete teksteditor:
$ nano “$HOME/.bashrc”Voeg de volgende regel toe aan de onderkant van het bestand en vervang voorzichtig de
Als u bijvoorbeeld Flutter-repository in de map "Downloads" hebt gedownload, moet u de volgende regel toevoegen:
export PATH="$PATH:$HOME/Downloads/flutter/bin"Sla het bestand op als je klaar bent. Vernieuwen ".bashrc” bestand door de onderstaande opdracht uit te voeren:
$ bron “$HOME/.bashrc”Voer de onderstaande opdracht uit om te controleren of de map "bin" van Flutter aan het pad is toegevoegd:
$ echo $PATHJe zou wat output als volgt moeten krijgen:
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ nit/Downloads/flutter/bin
Let op de aanwezigheid van het trefwoord "flutter" en het volledige pad dat de map "bin" in de map "flutter" toont.
Gebruik de onderstaande opdracht om te controleren of de opdracht "flutter" vanaf elk pad kan worden uitgevoerd:
$ die fladderenJe zou wat output als volgt moeten krijgen:
/home/nit/Downloads/flutter/bin/flutter
Merk op dat de "Dart"-taal, die vereist is om Flutter-apps te schrijven, wordt geleverd met Flutter-bestanden die zijn gedownload van de git-repository of van het snap-pakket. Voer de volgende opdracht uit om ontbrekende afhankelijkheden te controleren die nodig zijn om Flutter uit te voeren:
$ flutter dokterSommige vereiste bestanden kunnen worden gedownload om de Flutter-installatie te voltooien. Als je Android SDK nog niet hebt geïnstalleerd, wordt er een bericht weergegeven in de uitvoer om je door de installatie te leiden.
Als u Android-apps wilt ontwikkelen met Flutter, klikt u op de links die zichtbaar zijn in de terminaluitvoer en volgt u de relevante stappen om Android SDK te installeren.
Deze tutorial is gericht op het bouwen van webapplicaties met Flutter. Voer de volgende opdrachten achter elkaar uit om ondersteuning voor het maken van web-apps in te schakelen:
$ flutter kanaal bèta$ flutter-upgrade
$ flutter config --enable-web
Voer de onderstaande opdracht uit om te controleren of ondersteuning voor webtoepassingen inderdaad is ingeschakeld:
$ flutter-apparatenJe zou wat output als volgt moeten krijgen:
2 aangesloten apparaten:
Webserver (web) • webserver • web-javascript • Flutter Tools
Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.66
Als je de stappen tot nu toe correct hebt gevolgd, zou Flutter nu correct op je systeem moeten zijn geïnstalleerd, klaar om enkele web-apps te maken.
Een nieuw Flutter-project maken
Voer de onderstaande opdrachten uit om een nieuw "HelloWorld"-webtoepassingsproject te maken met Flutter:
$ flutter creëer halloworld$ cd helloworld
Voer de opdracht uit om uw nieuw gemaakte project te testen:
$ flutter run -d chromeU zou een Flutter-webtoepassingsdemo als volgt moeten zien:
U kunt fouten opsporen in Flutter-web-apps met behulp van ontwikkelingstools die in Chrome zijn ingebouwd.
Wijzig uw project
Het demo-project dat u hierboven hebt gemaakt, bevat een “hoofd.dart" bestand in de "lib" map. Code in deze “hoofd.dart”-bestand is zeer goed becommentarieerd en kan vrij gemakkelijk worden begrepen. Ik raad je aan om de code minstens één keer door te nemen om de basisstructuur van een Flutter-app te begrijpen.
Flutter ondersteunt "hot reload", zodat u uw app snel kunt vernieuwen zonder deze opnieuw te starten om de wijzigingen te zien. Probeer de titel van de applicatie te wijzigen van "Flutter Demo Home Page" in "Hello World !!” in de “hoofd.dart” bestand. Als u klaar bent, drukt u op
Bouw je Flutter-app
Gebruik de onderstaande opdracht vanuit uw projectdirectory om uw Flutter-webapp te bouwen:
$ flutter build webZodra het bouwproces is voltooid, zou u een nieuwe map in uw projectdirectory moeten hebben die zich op het pad "build/web" bevindt. Hier vindt u alle benodigde “.html”, “.js" en ".css"-bestanden die nodig zijn om het project online uit te voeren. U zult ook verschillende activabestanden vinden die in het project worden gebruikt.
Nuttige bronnen
Raadpleeg de officiële documentatie voor meer informatie over de ontwikkeling van webapps met Flutter. U kunt de officiële documentatie voor Dart-taal raadplegen om een beter begrip te krijgen van Flutter-apps. Flutter wordt geleverd met talloze officiële pakketten en pakketten van derden die u kunt gebruiken om snel apps te ontwikkelen. Deze pakketten vind je hier. U kunt Flutter-widgets voor materiaalontwerp gebruiken in uw web-apps. U kunt documentatie voor deze widgets vinden in de officiële Flutter-documentatie. U kunt deze widgets ook ervaren door door werkende demo's van webcomponenten voor materiaalontwerp te bladeren.
Conclusie
Flutter is al geruime tijd in ontwikkeling en het groeit als een raamwerk voor het ontwikkelen van "write once deploy anywhere" platformonafhankelijke apps. De acceptatie en populariteit zijn misschien niet zo hoog als andere dergelijke frameworks, maar het biedt wel een stabiele en robuuste API om platformonafhankelijke applicaties te ontwikkelen.
