So richten Sie Flattern ein und erstellen Sie die Hello World Web -Anwendung unter Linux

Flutter ist ein Anwendungsentwicklungsrahmen, mit dem plattformübergreifende Apps entwickelt werden können, die auf nativem Code ausgeführt werden, sobald er kompiliert oder erstellt wurde. Durch Flutter können Sie von Google in kurzer Zeit schnelle Prototypen erstellen und vollwertige Apps erstellen, die plattformspezifische APIs verwenden. Mit Flutter können Sie wunderschön aussehende Apps für mobile Geräte, Desktop -Betriebssysteme und Webbrowser mit offiziellen Materialdesign -Widgets erstellen. In diesem Artikel wird die Installation von Flutter und die Erstellung eines neuen Projekts zur Entwicklung einer Webanwendung erörtert. Flutter verwendet "Dart" als Hauptprogrammiersprache zum Schreiben von Apps.

Installieren Sie Flutter unter Linux

Sie können Flutter unter Linux mit zwei Methoden installieren. Die erste Methode ist ziemlich einfach. Sie müssen lediglich einen einfachen Befehl ausführen, um Flutter aus Snap Store zu installieren.

$ sudo snap install flatter -klassisch

Die zweite Methode besteht darin, das Flutter -Repository aus GitHub herunterzuladen. Führen Sie die folgenden Befehle nacheinander aus, um Flutter manuell zu installieren:

$ sudo APT Installieren Sie Git
$ git klone https: // github.com/flattern/flattern.Git -B stabil-Depth 1-No-Single-Branch

Beachten Sie, dass Sie die erforderlichen Dateien aus dem offiziellen Flutter -Repository einschließlich ausführbarer Binärdateien erhalten können. Sie können diese Binärdateien aus dem Ordner "Bin" ausführen. Diese ausführbaren Dateien werden jedoch nicht zu Ihrer systemweiten Pfadvariablen hinzugefügt, und Sie können sie nicht von überall aus ausführen, es sei denn, Sie fügen sie manuell zur Pfadvariablen hinzu. Befolgen Sie dazu die folgenden Schritte.

Offen ".BASHRC ”-Datei in Ihrem Home -Ordner mit Ihrem bevorzugten Texteditor:

$ nano “$ home/.bashrc ”

Fügen Sie die folgende Zeile am Ende der Datei hinzu, wodurch die Zeichenfolge sorgfältig ersetzt wird.

Exportpfad = "$ path:/flattern/bin ""

Wenn Sie beispielsweise das Flutter -Repository im Ordner "Downloads" heruntergeladen haben, müssen Sie die folgende Zeile hinzufügen:

Export Path = "$ path: $ home/downloads/flattern/bin"

Speichern Sie die Datei, sobald Sie fertig sind. Aktualisierung ".BASHRC ”Datei durch Ausführen des folgenden Befehls:

$ Source “$ home/.bashrc ”

Um zu überprüfen, ob der Ordner „Bin“ von Flutter zum Pfad hinzugefügt wurde, führen Sie den folgenden Befehl aus:

$ echo $ path

Sie sollten eine solche Ausgabe erhalten:

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ nit/downloads/flattern/bin

Beachten Sie das Vorhandensein des Schlüsselworts „Flattern“ und den vollständigen Pfad, der den Ordner „Bin“ im Verzeichnis „Flattern“ zeigt.

Um zu überprüfen, ob der Befehl „Flattern“ von jedem Pfad ausgeführt werden kann, verwenden Sie den folgenden Befehl:

$, die flattern

Sie sollten eine solche Ausgabe erhalten:

/home/nit/downloads/flattern/bin/flattern

Beachten Sie, dass die Sprache „Dart“, die zum Schreiben von Flutter -Apps erforderlich ist, mit Flutterdateien aus dem Git -Repository oder vom Snap -Paket geliefert wird. Führen Sie den folgenden Befehl aus, um fehlende Abhängigkeiten zu überprüfen, die zum Ausführen von Flutter erforderlich sind:

$ Flutter Doctor

Einige erforderliche Dateien können zum Herunterladen beginnen, um das Flutter -Setup zu vervollständigen. Wenn Sie Android SDK noch nicht installiert haben, wird in der Ausgabe eine Nachricht angezeigt, um Sie durch die Installation zu führen.

Wenn Sie Android -Apps mit Flutter entwickeln möchten, klicken Sie auf die in der Terminalausgabe sichtbaren Links und befolgen Sie die relevanten Schritte, um Android SDK zu installieren.

Dieses Tutorial konzentriert sich auf das Erstellen von Webanwendungen mit Flutter. Führen Sie die folgenden Befehle nacheinander aus, um Unterstützung für das Erstellen von Web -Apps zu ermöglichen:

$ Flutter Channel Beta
$ flattern upgrade
$ flutter config-enable-Webe

Um zu überprüfen, ob die Unterstützung der Webanwendungen tatsächlich aktiviert wurde, führen Sie den folgenden Befehl aus:

$ Fluttergeräte

Sie sollten eine solche Ausgabe erhalten:

2 Verbundene Geräte:
Webserver (Web) • Webserver • Web-Javascript • Flutter-Tools
Chrome (Web) • Chrome • Web-JavaScript • Google Chrome 87.0.4280.66

Wenn Sie die Schritte bisher korrekt befolgt haben, sollte Flattern jetzt in Ihrem System korrekt installiert sein, und bereit, einige Web -Apps zu erstellen.

Erstellen Sie ein neues Flutter -Projekt

Führen Sie die unten genannten Befehle aus, um ein neues Webanwendungsprojekt „HelloWorld“ mit Flutter zu erstellen:

$ flattern erstellen HelloWorld
$ CD HelloWorld

Um Ihr neu erstelltes Projekt zu testen, führen Sie den Befehl aus:

$ flattern run -d Chrom

Sie sollten eine Flutter -Webanwendung wie folgt sehen:

Sie können Flutter -Web -Apps mithilfe von Entwicklungstools in Chrome debuggen.

Ändern Sie Ihr Projekt

Das oben erstellte Demo -Projekt enthält ein „Haupt.DART ”-Datei im Ordner„ lib “. Code in diesem „Haupt.Die Datei der DART ”wird sehr gut kommentiert und kann ziemlich leicht verstanden werden. Ich würde Ihnen vorschlagen, den Code mindestens einmal durchzugehen, um die Grundstruktur einer Flutter -App zu verstehen.

Flutter unterstützt „Hot Reload“ und ermöglicht es Ihnen, Ihre App schnell zu aktualisieren, ohne sie neu zu leiten, um die Änderungen zu sehen. Versuchen Sie, den Anwendungstitel von „Flutter Demo Homepage“ auf „Hello World“ zu ändern !!" im Wesentlichen.Dart -Datei. Sobald er fertig ist, drücken Sie die Taste im Terminal, um den App -Status zu aktualisieren, ohne ihn neu zu starten.

Erstellen Sie Ihre Flutter -App

Um Ihre Flutter -Web -App zu erstellen, verwenden Sie den unten angegebenen Befehl aus Ihrem Projektverzeichnis:

$ flattern bauen web

Sobald der Build -Prozess abgeschlossen ist, sollten Sie einen neuen Ordner in Ihrem Projektverzeichnis auf dem Weg „Build/Web“ haben. Hier finden Sie alle notwendig “.html ”,“.JS ”und“.CSS ”-Dateien, die zum Servieren des Projekts online erforderlich sind. Sie finden auch verschiedene Asset -Dateien, die im Projekt verwendet werden.

Nützliche Ressourcen

Weitere Informationen zur Web -App -Entwicklung mit Flutter finden Sie in der offiziellen Dokumentation. Sie können sich auf die offizielle Dokumentation für Dart -Sprache beziehen, um ein besseres Verständnis für Flutter -Apps zu erhalten. Flutter verfügt über Tonnen von offiziellen und Drittanbieter-Paketen, mit denen Sie Apps schnell entwickeln können. Sie können diese Pakete hier finden. Sie können Materialdesign -Flutter -Widgets in Ihren Web -Apps verwenden. Sie finden Dokumentation für diese Widgets in der offiziellen Flutter -Dokumentation. Sie können auch ein Gefühl für diese Widgets bekommen, indem Sie funktionierende Demos von Materialdesign -Webkomponenten durchsuchen.

Abschluss

Flutter ist seit einiger Zeit in der Entwicklung und wächst als Framework für die Entwicklung von plattformübergreifenden Apps „Write On Anywhere Anywhere“. Seine Einführung und Popularität ist möglicherweise nicht so hoch wie andere solche Frameworks, bietet jedoch eine stabile und robuste API, um plattformübergreifende Anwendungen zu entwickeln.