Flutter Tutorial Teil 1: Erstellen Sie eine Flutter-App von Grund auf neu

Erfahren Sie, wie Sie mit der Erstellung einer Flutter-Anwendung beginnen, dem ersten Teil der Flutter-Tutorial-Reihe.

Teil 1: So erstellen Sie eine Flatter-App von Grund auf neu

In dieser Lernserie werden Sie Schritt für Schritt durch das Erstellen einer mobilen E-Commerce-Anwendung mit Flutter geführt. Die mobile Anwendung wäre eine Open-Source-App für die Aviacommerce-Plattform. Das Tutorial würde sich auf diese Anwendung konzentrieren, um die wichtigen Konzepte des Flatter-Frameworks vorzustellen.

Dieses Tutorial ist der erste Teil der Flatter-Tutorial-Reihe: -

  1. So erstellen Sie eine Flatter-App von Grund auf neu
  2. So legen Sie eine Anwendung im Flattermodus an (in Kürze verfügbar)
  3. So organisieren Sie Daten im Flattern (in Kürze)
  4. Auflistung der Daten im Flattern (in Kürze)

Weitere Aktualisierungen des Inhalts im weiteren Verlauf.

Der Blog erklärt Schritt für Schritt, wie Sie Layouts erstellen und den Status einführen. Um direkt in den Code einzutauchen, steht das gesamte Projekt in Github unter dem Dach von AviaCommerce zur Verfügung. Fühlen Sie sich frei, es zu gabeln und herumzuspielen.

Wir bei AviaCommerce suchen aktiv nach neuen Frameworks, die die Softwareentwicklung neu definieren. Unser Team verfolgt die Aktivitäten in Flutter seit der ersten Beta-Version genau.

Google hat endlich Flutter 1.0 angekündigt, die erste stabile Version des UI-Toolkits, mit dem aus einer einzigen Codebasis schöne, native Erlebnisse für iOS und Android erstellt werden können.

Flutter verfügt über eine außergewöhnliche Dokumentation zum Einrichten der Entwicklungsumgebung. Befolgen Sie diese offizielle Installationsanleitung, um loszulegen.

Sobald das Setup abgeschlossen ist, können wir mit einem neuen Testprojekt beginnen. Ich bevorzuge Android Studio, da es ein vollständiges, integriertes IDE-Erlebnis für Flutter bietet. Android Studio benötigt ein Editor-Plugin für Dart.

Starten Sie Android Studio. Sie sehen eine Option zum Initialisieren eines neuen Flutter-basierten Projekts.

Wählen Sie Flutter Application aus der Liste der Konfigurationen.

Überlegen Sie sich einen ausgefallenen Namen für Ihre erste Flutter-App. Oder gehen Sie einfach mit Timer, wenn Sie schlecht darin sind, Sachen wie mich zu benennen .

Als letzter Schritt werden Sie im Dialogfeld nach dem Namen des Anwendungspakets gefragt.

Nach diesem Schritt erstellt Flutter SDK eine anfängliche Verzeichnisstruktur für die Anwendung. Alle Aktionen werden im Ordner lib ausgeführt und main.dart ist der Ausgangspunkt für die Ausführung der App.

In Flutter ist alles ein Widget. Bilder, Symbole und Text in einer Flutter-App sind Widgets. Auch Layoutelemente wie Zeilen, Spalten und Raster, die andere Widgets anordnen, einschränken und ausrichten, sind Widgets.

Der gute Punkt ist, dass Flutter SDK hier selbst ein interaktives Widget im Stammverzeichnis der Anwendung erstellt. Um die Sache ein bisschen einfacher zu machen, entfernen wir das und beginnen mit einem einfachen Design (Hello World!).

Ihre main.dart-Datei sollte ungefähr so ​​aussehen:

Wenn Sie den Android-Emulator starten, wird er mit einem Text-Widget geöffnet, in dem Sie "Hello World!"

Beachten Sie das Widget hier im Fokus. Wir werden versuchen, den Hauptteil von MaterialApp so zu ändern, dass die Benutzeroberfläche wie gewünscht angezeigt wird. Die Originalversion ist die unten gezeigte.

Layoutelemente (Widgets) in Flutter können grob in zwei Typen unterteilt werden, je nachdem, ob sie ein einzelnes Widget enthalten oder ein Array von Widgets enthalten können. Behälter, Polster gehören zu ersteren, während Reihe, Spalte usw. zu letzteren gehören.

Führen Sie ein Zeilenlayout mit drei untergeordneten Widgets vom Typ Text ein.

Bevor wir fortfahren und die Komponenten stylen, ist es ratsam, ein neues Widget zu erstellen, das das Stylen übernimmt, damit wir dem DRY-Prinzip folgen.

Ersetzen Sie die drei untergeordneten Elemente durch ein benutzerdefiniertes Widget, das später in derselben Datei definiert wird. Die Datei main.dart wird jetzt

Der Timer sieht jetzt ein bisschen langweilig aus. Ich bin nicht sehr gut in Benutzeroberflächen, aber lassen Sie uns unser Bestes versuchen. Packen Sie das Text-Widget in einen Container und dekorieren Sie den Container mit einer Hintergrundfarbe und einem Auffüllen, um Elemente auszuräumen.

Fügen Sie außerdem eine Schaltfläche ein, um die Aktionen für den Timer unter den drei gestalteten Text-Widgets auszuführen. Der geänderte Code sieht so aus.

Hier kommt der wichtigste Bestandteil des App-Status. Der Status speichert den aktuellen Wert des Timers und ob der Timer aktiv ist (läuft) oder nicht. Ich habe mir die TimerState-Klasse ausgedacht, die für die Aufrechterhaltung des Status verantwortlich ist und auch die Erstellung des Widget-Baums übernimmt.

Durch Drücken der Taste wird die Variable isActive umgeschaltet.

Dart wird mit einem eleganten Modul für asynchrone Operationen geliefert. Wir können die Timer-Klasse verwenden, um Sekunden zu erhöhen. Der geänderte TimerAppState wird unten beschrieben. Beachten Sie, dass wir die Timer-Klasse in TimerApp umgestaltet haben, um Mehrdeutigkeiten mit der Timer-Klasse im asynchronen Modul zu vermeiden.

Die App ist jetzt voll funktionsfähig. Den vollständigen main.dart-Code finden Sie hier. Ich hoffe, es klärt die Grundlagen des Flutter-Frameworks.

FLUTTERFORUM: EIN ORT, AN DEM FLUTTER DEV HANGOUT

FlutterForum ist ein Ort, an dem sich Flutter-Entwickler austauschen und sich auf Gespräche und Fragen einlassen.

Besuchen Sie https://flutterforum.co

Wenn Ihnen dieses Tutorial gefallen hat, klicken Sie bitte auf die Schaltfläche und teilen Sie es, damit andere es finden können! Fühlen Sie sich frei, einen Kommentar unten zu hinterlassen.