Share
Flutter entwickelt sich rasch zu einem der beliebtesten Frameworks für die Entwicklung von plattformübergreifenden mobilen Apps. Die meisten Android- und iOS-Entwickler sind sich heute einig, dass es eine schnellere und zukunftssicherere Alternative zu anderen plattformübergreifenden Frameworks wie React Native und NativeScript ist.
Google selbst lässt keinen Stein auf, um weitere Entwickler anzulocken. Zum Beispiel gab es bei Google I / O in diesem Jahr mehrere tiefgreifende Sitzungen, die sich auf die Entwicklung von mit Material Design kompatiblen Apps konzentrierten. In einer der Sitzungen gab Google außerdem bekannt, dass Flutter eine erstklassige Plattform für Material Design sein wird.
In dieser Serie von Tutorials werde ich Ihnen helfen, die Grundlagen der Entwicklung von Android-Apps mit Flutter zu beherrschen. In diesem Tutorial, das mit der Serie beginnt, werde ich mich auf Flutter-Widgets, die Bausteine aller Flutter-Apps, konzentrieren.
Um diese Serie bestmöglich zu nutzen, benötigen Sie:
Nach der Installation einiger leichtgewichtiger Plug-Ins können Sie Android Studio verwenden. Die IDE-eigenen Android-App-Entwickler sind am meisten daran gewöhnt, Flutter-Apps zu entwickeln.
Starten Sie, indem Sie Android Studio starten und die Option auswählen Konfigurieren Sie> Plugins Option im Begrüßungsbildschirm.
Drücken Sie im angezeigten Dialogfeld die Repositorys durchsuchen und suchen Sie nach dem Flutter-Plugin.
Wenn Sie das Plugin gefunden haben, drücken Sie seine Installieren Taste. Nun werden Sie gefragt, ob Sie auch das Dart-Plugin installieren möchten. Drücken Sie Ja fortfahren.
Nachdem beide Plugins installiert sind, drücken Sie die Starten Sie Android Studio neu Schaltfläche, um die Konfiguration abzuschließen.
Nach dem Neustart sehen Sie eine Starten Sie ein neues Flutterprojekt Schaltfläche auf dem Android Studio-Startbildschirm. Klicken Sie darauf, um das erste Flutterprojekt zu erstellen.
Wählen Sie im nächsten Bildschirm die Option Flatteranwendung Option und drücken Sie Nächster.
Nun wird ein Formular angezeigt, in dem Sie nach verschiedenen Details zu Ihrer Flutter-Anwendung gefragt werden, z. B. nach Name und Speicherort. Stellen Sie sicher, dass Sie in allen Feldern gültige Werte eingeben.
Das Flutter-Plugin ist nicht im Lieferumfang des Flutter-SDK enthalten. Daher müssen Sie das SDK separat installieren. Sie können dies tun, indem Sie auf drücken Installieren Sie das SDK Taste jetzt.
Je nachdem, wie schnell Ihre Internetverbindung ist, kann die Installation einige Zeit in Anspruch nehmen. Nach dem erfolgreichen Start können Sie die Taste drücken Nächster Schaltfläche, um die Projekteinrichtung abzuschließen.
In diesem Lernprogramm schreiben Sie Code in lib / main.dart Datei. Sie enthält standardmäßig einige Beispielcodes, die Sie nicht benötigen. Löschen Sie daher alle Inhalte, bevor Sie fortfahren.
Das Flutter-Framework verwendet die Programmiersprache Dart, eine leicht zu erlernende Sprache, deren Syntax der von Java und C sehr ähnlich ist. Daher benötigt eine Flutter-App wie die meisten eigenständigen Java- und C-Programme auch eine Main() Funktion, eine spezielle Funktion, die als Einstiegspunkt in die App dient.
Fügen Sie dem folgenden Code entsprechend hinzu main.dart Datei:
void main () // TO DO
An dieser Stelle können Sie drücken Umschalttaste-F10 um die App zu erstellen und auszuführen. Wenn Sie in den vorherigen Schritten keine Fehler festgestellt haben, sollte die App eine leere weiße Leinwand auf Ihrem Gerät anzeigen.
Alle Flutter-Apps bestehen aus einem oder mehreren Widgets, Klasseninstanzen, mit denen Sie Text und Bilder auf dem Bildschirm zeichnen können. Normalerweise müssen Sie keine Low-Level-Widgets von Grund auf programmieren, da das Framework mit einer Vielzahl vorgefertigter, schöner Widgets ausgestattet ist, die den Designsprachen der Android- und iOS-Plattformen entsprechen.
Um grundlegende Widgets in Ihrer App verwenden zu können, importieren Sie das Widgets Bibliothek durch Hinzufügen des folgenden Codes am Anfang des main.dart Datei:
import 'package: flutter / widgets.dart';
Die einfachsten Widgets, die Sie erstellen können, sind stateless Widgets. Wie Sie vielleicht schon vermutet haben, haben sie keinen Zustand und sind daher statisch. Sie eignen sich ideal für die Anzeige von Beschriftungen, Titeln und anderen Oberflächenelementen, deren Inhalt sich wahrscheinlich nicht ändert, während die App ausgeführt wird. Um ein stateless Widget zu erstellen, müssen Sie das erweitern StatelessWidget Klasse und überschreiben seine bauen() Methode. Der folgende Beispielcode zeigt Ihnen wie:
Klasse MyFirstWidget erweitert StatelessWidget @override Widget build (BuildContext-Kontext) // Mehr Code hier
Wie Sie im obigen Code sehen können, wird der bauen() Methode muss a zurückgeben Widget Objekt. Sie können beliebig viele der vorgefertigten Widgets Flutter-Angebote auswählen und zurücksenden. Wenn Sie beispielsweise eine Textzeile anzeigen möchten, können Sie a erstellen und zurückgeben Text Widget wie unten gezeigt:
Accentsconagua
return Text ("Das ist schön!", textDirection: TextDirection.ltr);Beachten Sie, dass Sie bei der Verwendung von a unbedingt die Richtung Ihres Texts angeben müssen Text Widget.
Wenn Sie die App jedoch sofort ausführen, können Sie den Text nicht sehen. Das liegt daran, dass Sie Ihr Stateless-Widget immer noch nicht instanziiert haben. Also geh zum Main() Methode, instanziieren Sie das Widget darin und übergeben Sie es an die runApp () Methode. Hier ist wie:
runApp (new MyFirstWidget ());
Sobald Sie den obigen Code hinzufügen und Ihr Projekt speichern, sollte Android Studio die App automatisch auf Ihrem Gerät neu laden, damit Sie den Text sehen können.
Wenn Sie anstelle von Text ein Bild anzeigen möchten, können Sie einfach das Bild ersetzen Text Widget mit einem Bild Widget in Ihrer Klasse bauen() Methode. Der folgende Code zeigt Ihnen, wie Sie eine Bild Widget zum Herunterladen und Anzeigen eines Remote-Images:
return Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");Wenn Sie Ihr Projekt erneut speichern, sollte auf Ihrem Gerät Folgendes angezeigt werden:
Alle Flutter-Apps können als Widget-Bäume betrachtet werden. Die App, die Sie im vorherigen Schritt erstellt haben, ist ein Widget-Baum mit nur einem Widget. Verwenden Text oder Bild Widgets als oberste Elemente der Widget-Struktur sind jedoch keine gute Idee, da Sie ihnen keine untergeordneten Widgets hinzufügen können.
Flutter bietet mehrere Widgets an, die als Container für andere Widgets dienen können. Die am häufigsten verwendeten sind die Reihe und Säule Widgets Wie ihre Namen vermuten lassen, die Reihe Mit dem Widget können Sie mehrere Widgets nebeneinander platzieren Säule Widget hilft Ihnen, Widgets untereinander zu positionieren. Sie sind unverzichtbar bei der Erstellung tieferer Widget-Bäume.
Der folgende Code zeigt Ihnen, wie Sie das verwenden Säule Widget zum Erstellen eines Widget-Baums mit zwei untergeordneten Elementen: a Text Widget und ein Bild Widget.
Text myText = Text ("Dies ist ein schönes Foto!", TextDirection: TextDirection.ltr); Image myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); Rückgabesäule (Kinder: [meinText, meinBild]); Die App sollte jetzt so aussehen:
Darüber hinaus gibt es Widgets, mit denen Sie ein einzelnes Widget besser positionieren können. Zum Beispiel die Center Widget hilft Ihnen, ein Widget zu zentrieren. In ähnlicher Weise a Container Mit Widget können Sie Ihren Widgets Füllungen und Ränder hinzufügen.
Der folgende Code zeigt, wie Sie das zentrieren Säule Widget, das Sie gerade erstellt haben, indem Sie es in ein Center Widget:
retour Center (Kind: Spalte (Kinder:[meinText, meinBild], mainAxisSize: MainAxisSize.min));
Beachten Sie im obigen Code, dass die Säule Widget verwendet eine zusätzliche Eigenschaft namens mainAxisSize, deren Wert auf gesetzt ist Mindest. Dies ist notwendig, da Sie vor dem Zentrieren einer Säule die Höhe der Summe aller ihrer Kinder gleich setzen müssen. Ohne die Eigenschaft die Säule Das Widget ist so groß wie der Bildschirm des Geräts und der Center Widget hat keinen Einfluss darauf.
Während dieser Zeit haben Sie grundlegende Widgets verwendet, die Teil der. Sind Widgets Bibliothek. Flutter hat eine alternative Bibliothek namens Material, was bietet Material Design Widgets. Um es in Ihrer App zu verwenden, ersetzen Sie die Anweisung, die den importiert Widgets Bibliothek mit den folgenden:
import 'package: flattern / material.dart';
Um Material Design-Stil auf Ihre Widgets anzuwenden, müssen Sie als Nächstes ein MaterialApp Widget oben in Ihrem Widget-Baum. Sie müssen auch alle zuvor erstellten Widgets in a einbetten Gerüst Widget, das als Startbildschirm der dienen kann MaterialApp Widget.
Da die meisten Material Design-Apps über eine App-Leiste verfügen, können Sie die Option optional festlegen Gerüst Widget appBar Eigenschaft zu einem neuen AppBar Widget.
Der folgende Code zeigt Ihnen, wie Sie das alles kurz und bündig machen:
return MaterialApp (home: Scaffold (appBar: AppBar (Titel: Text ("Meine App")), body: Center (Kind: Spalte (Kinder: [meinText, meinBild], mainAxisSize: MainAxisSize.min),))); Die App sollte jetzt viel besser aussehen.
Zustandslose Widgets sind unveränderlich. Mit dem Code, den Sie in den vorherigen Schritten geschrieben haben, können Sie den Inhalt des Programms nicht einfach ändern Text Widget oder das Bild Widget. Warum? Weil das Flutter-Framework die reaktive Programmierung der imperativen Programmierung vorgezogen hat. Folglich verfügen die meisten Widgets über keine Setter-Methoden, mit denen der Inhalt zur Laufzeit aktualisiert werden kann. Zum Beispiel die Text Widget hat keine Text setzen() Methode, mit der Sie den angezeigten Text ändern können.
Stateful-Widgets hingegen sind veränderlich, wenn auch nicht direkt. Sie verlassen sich auf Zustand Objekte, um zu entscheiden, was bei einer bestimmten Instanz angezeigt werden soll. Als solches, wenn a Zustand Bei Objektänderungen aktualisiert das Framework automatisch den Inhalt jedes damit verbundenen stateful-Widgets.
Um ein Stateful-Widget zu erstellen, müssen Sie das erweitern StatefulWidget Klasse und überschreiben seine createState () Methode.
Die Klasse MySecondWidget erweitert StatefulWidget @override StatecreateState () // TO DO
Als Nächstes müssen Sie einen neuen Benutzer erstellen Zustand Klasse, die Variablen enthält, die den Status des Stateful-Widgets bilden. Darüber hinaus müssen Sie in der Klasse die Klasse überschreiben bauen() Methode, um den Widget-Baum zurückzugeben.
Der folgende Code zeigt Ihnen, wie Sie eine Zustand Klasse, die eine einzige Variable namens enthält url:
Klasse MyState erweitert StateString url = "https://source.unsplash.com/random/800x600"; // Ein zufälliges Bild von Unsplash @override Widget build (BuildContext-Kontext) // Mehr Code hier
Um ein konkretes Beispiel zu erhalten, erstellen wir nun einen Material-Design-Widget-Baum mit einem Bild Widget, das ein zufälliges Bild anzeigt, und a RaisedButton Widget, mit dem der Benutzer ein neues Zufallsbild laden kann. Der folgende Code zeigt Ihnen wie:
return MaterialApp (home: Scaffold (body: Center (Kind: Spalte) (mainAxisSize: MainAxisSize.min, Kinder:[RaisedButton (untergeordnet: Text ("Press Me"), onPressed: changeURL,), Image.network (url)]))));
Notiere dass der Bild Widget-Konstruktor nimmt jetzt die url Variable als Eingabe anstelle eines String-Literal. Dadurch kann das Framework immer den neuesten Wert der Variablen verwenden Bild Widget wird gezeichnet.
Beachten Sie auch, dass die RaisedButton Widget hat eine onPressed Attribut, das auf einen Ereignis-Listener mit dem Namen changeURL (). Die Methode existiert noch nicht, also erstellen Sie sie.
void changeURL () // Mehr Code hier
Innerhalb der Methode müssen Sie natürlich den Wert von ändern url Variable. Sie sollten es jedoch nicht direkt ändern. Wenn Sie dies tun, wird das Flutter-Framework nicht über die Änderung informiert. Um den Status eines Stateful-Widgets korrekt zu aktualisieren, müssen Sie immer alle Ihre Änderungen im setState () Methode.
Um jetzt zufällige Bilder anzuzeigen, schlage ich vor, den Unsplash Source-Dienst zu verwenden. Um ein zufälliges Bild von ihm herunterzuladen, müssen Sie lediglich eine HTTP-Anfrage an die URL senden und eine eindeutige Abfragezeichenfolge an sie übergeben.
Der folgende Code zeigt, wie Sie mit einem Zeitstempel die eindeutige Abfragezeichenfolge erstellen:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). millisecondsSinceEpoch";);
An diesem Punkt Ihre Gewohnheit Zustand Klasse ist fertig. Alles, was Sie als Nächstes tun müssen, ist es zu instanziieren und aus dem System zurückzugeben createState () Methode Ihres Stateful-Widget.
return MyState ();
Wenn Sie eine Instanz Ihres Stateful-Widgets an das übergeben runApp () Um die App erneut zu laden, drücken Sie die Taste mehrmals. Sie sollten jedes Mal ein neues Foto anzeigen.
Sie wissen jetzt, wie Sie mit statuslosen und zustandsbehafteten Widgets in Ihren Flutter-Apps arbeiten. Sie haben auch gelernt, wie Sie ein Material Design-Design auf sie anwenden, ihre Inhalte dynamisch ändern und sie interaktiv machen.
Es ist erwähnenswert, dass Flutter keine nativen Widgets der mobilen Plattform verwendet. Es zeichnet alle Widgets selbst mit einer leistungsstarken 2D-Grafik-Engine namens Skia, die die GPU ausgiebig verwendet. Flutter-Apps laufen daher oft mit fast 60 Bildern pro Sekunde und fühlen sich sehr flüssig und reaktionsschnell an.
Weitere Informationen zu Widgets in Flutter finden Sie in der offiziellen Dokumentation.
