Google-Flutter-Tutorial | App-Programmierung mit Flutter lernen


Wer eine eigene App programmieren möchte, hat dafür zahlreiche Optionen. Baukästen mit einsatzfertigen App-Komponenten erfreuen sich aufgrund ihrer einfachen Nutzbarkeit großer Beliebtheit, doch auch Frameworks zeichnen sich zunehmend dadurch aus, den Entwicklungsprozess für Nutzer so einfach wie möglich zu gestalten. Einer der modernsten Vertreter ist das von Google entwickelte Software program Improvement Equipment (SDK) Flutter. Das quelloffene Framework ermöglicht die Entwicklung hoch performanter Cellular Apps (für iOS und Android) sowie von Net- und Desktopanwendungen in der Google-Sprache Dart.

In unserem Flutter-Tutorial stellen wir Ihnen die wichtigsten Schritte zum Einstieg in die Google-SDK vor.

Flutter lernen: Das sind die Voraussetzungen

Wer das Programmieren mit Flutter lernen möchte, benötigt nicht zwingend Vorwissen in Sachen App- und Webentwicklung. Auch die bereits genannte Google-Sprache Dart kann Ihnen prinzipiell noch gänzlich fremd sein. Falls Sie mit objektorientiertem Code und grundlegenden Programmierkonzepten wie Variablen, Schleifen und Bedingungen vertraut sind, sind Sie bereits intestine für die Arbeit mit dem Framework gerüstet.

In diesem Flutter-Tutorial wollen wir einen ersten Blick auf die Entwicklung mit dem Software program-Improvement-Equipment werfen und zu diesem Zweck eine einfache App schreiben, die nach zufälligem Muster Wörter kombiniert und diese Kombinationen im Anschluss präsentiert. Hierfür benötigen Sie die Foundation-Werkzeuge für die Programmierung mit Flutter: Das Flutter-SDK und einen Editor. Erstgenanntes ist für Home windows, macOS und Linux verfügbar – das jeweilige Installationspaket können Sie direkt über die offizielle Flutter-Website herunterladen.

In puncto Editor haben Sie im Prinzip die freie Auswahl. Für eine optimale Consumer-Expertise mit automatischer Code-Vervollständigung, Syntaxhervorhebung sowie Unterstützung bei Debugging und der Bearbeitung von Widgets empfiehlt Google aber die Nutzung eines Code-Editors für den der Großkonzern auch ein offizielles Flutter-Plugin anbietet: In unserem Flutter-Tutorial nutzen wir aus diesem Grund Android Studio. Nach der Set up dieser für die Android-App-Entwicklung optimierten Entwicklungsumgebung richten Sie das Flutter-Plugin folgendermaßen ein:

  1. Rufen Sie den Menüpunkt „File“ auf.
  2. Klicken Sie auf „Settings“ und wählen Sie danach die Rubrik „Plugins“ aus.
  3. Tippen Sie „Dart“ in die Suchzeile ein und klicken Sie beim gleichnamigen vorgeschlagenen Ergebnis auf den „Set up“-Button, um zunächst die Erweiterung für die erforderliche Programmiersprache Dart zu installieren.
  4. Bestätigen Sie die Nutzung der Third-Get together-Erweiterung by way of „Settle for“.
  5. Wiederholen Sie den Vorgang für den Suchbegriff „Flutter“ und drücken Sie nach erfolgreicher Set up auf „Restart IDE“, um die Änderungen zu übernehmen.

Hinweis

Als Different zu Android Studio schlägt Google die Verwendung von GNU Emacs, Visual Studio Code und IntelliJ IDEA vor – Anwendungen, für die es ebenfalls ein offizielles Flutter-Plugin gibt.

Schritt 1: Die erste eigene Flutter-App erstellen

Sobald Sie Flutter und die gewünschte Entwicklungsumgebung (bzw. den Editor) installiert haben, können Sie Ihre erste Flutter-Anwendung kreieren. Wie bereits erwähnt verwenden wir in diesem Flutter-Tutorial Android Studio, weshalb wir die IDE nun zu diesem Zweck starten. Über das Menü „File“ wählen Sie im ersten Schritt die Punkte „New“ und anschließend „New Flutter Mission“ aus, um ein neues Projekt auf Foundation des App-Frameworks zu starten.

Wählen Sie „Flutter Utility“ als gewünschten Projekttyp aus und drücken Sie auf „Subsequent“. Im Konfigurationsmenü definieren Sie nun einen Arbeitstitel und den lokalen Speicherort für Ihre Anwendung. Non-compulsory können Sie auch eine Beschreibung des Projekts hinzufügen. In der Zeile „Flutter SDK path“ geben Sie den Pfad zum installierten Flutter-Framework an.

Klicken Sie zum Abschluss auf „End“, damit die neue Flutter-App erstellt wird. In die Datei essential.dart, die grundlegende Arbeitsdatei eines Projekts sowie dieses Flutter-Tutorials, fügen Sie nun folgenden Code ein, um die App eine einfache „Hey World“-Nachricht präsentieren zu lassen (bereits vorhandenen Code in der essential.dart-Datei können Sie löschen):

// Copyright 2018 The Flutter staff. All rights reserved.
// Use of this supply code is ruled by a BSD-style license that may be
// discovered within the LICENSE file.
import 'package deal:flutter/materials.dart';
void essential() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget construct(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			dwelling: Scaffold(
				appBar: AppBar(
					title: Textual content('Welcome to Flutter'),
				),
				physique: Middle(
					little one: Textual content('Hey World'),
				),
			),
		);
	  }
}

Sobald Sie das Snippet eingefügt haben, können Sie sich diese erste Model Ihrer eigenen App präsentieren lassen. In Android Studio wählen Sie hierfür die jeweilige virtuelle Maschine aus (unter „Flutter Machine Choice“) und drücken anschließend auf den Abspiel-Button („Run essential.dart“):

Hinweis

Für die Vorschau einer App in Android Studio muss ein Picture der gewünschten Zielplattform installiert sein. Andernfalls können Sie unter „Flutter Machine Choice“ kein virtuelles Testgerät für den Check der App auswählen. Zum Hinzufügen wählen Sie die Menüpunkte „Instruments“ und „AVD Supervisor“ aus. Anschließend drücken Sie auf „Create Digital Machine“ und installieren das virtuelle Gerät Ihrer Wahl. Eine ausführliche Anleitung zum Erstellen und Verwalten virtueller Geräte in Android Studio finden Sie im Android-Developer-Discussion board.

Der erste Begin bzw. das Debugging der App wird einige Zeit in Anspruch nehmen – Sie müssen sich additionally ein wenig gedulden, bevor Sie die Willkommensnachricht auf dem Bildschirm Ihrer Testumgebung sehen.

Schritt 2: Ein externes Paket einbinden

Nachdem wir im ersten Schritt des Flutter-Tutorials eine erste einfache App zum Laufen gebracht haben, soll diese nun um ein externes Paket erweitert werden. Genauer gesagt wollen wir nun das für unser Projektziel – eine App, die Wörter nach einem zufälligen Muster miteinander kombiniert – erforderliche Wörterpaket einbinden. Exemplarisch nutzen wir das Open-Supply-Paket „english_words“ (MIT-Lizenz), das Sie wie viele andere quelloffene Pakete auf der Plattform pub.dev finden. Das Modul enthält die über 5000 gängigsten englischen Wörter, weshalb es optimum für die Zwecke dieses Flutter-Tutorials geeignet ist.

Für das Administration von Paketen und Abhängigkeiten nutzen Flutter-Apps die Datei pubspec.yaml. Rufen Sie diese Datei auf und fügen der Liste der Abhängigkeiten einen Eintrag für das Sprachpaket (auf aktuelle Model achten; hier: 3.1.5) hinzu:

dependencies:
	flutter:
		sdk: flutter
	cupertino_icons: ^0.1.2
english_words: ^3.1.5

Anschließend führen Sie den Befehl „flutter pub get“ aus. Android Studio hat hierfür sogar direkt eine Schaltfläche mit dem Namen „Pub get“ parat.

Wechseln Sie zurück zur Haupt-Arbeitsdatei essential.dart und importieren Sie dort das Sprachpaket:

import 'package deal:flutter/materials.dart';
import 'package deal:english_words/english_words.dart';

Zudem fügen Sie im Code der App die folgende Zeile hinzu:

closing wordPair = WordPair.random();

Zum Abschluss ersetzen Sie den child-Eintrag, der für die Ausgabe des Textes „Hey World“ sorgt durch folgenden Eintrag:

little one: Textual content(wordPair.asPascalCase),

Mit jeder Ausführung dieses neuen, aktuellen App-Codes erhalten Sie nun ein zufällig generiertes Paar englischer Wörter.

Schritt 3: Ein zustandsbehaftetes Widget hinzufügen

Zustandslose Widgets (Stateless Widgets), wie bisher in diesem Google-Flutter-Tutorial genutzt, sind unveränderlich. Während der Laufzeit einer App können sie ihren Standing nicht ändern, weshalb sich diese Artwork von Widgets nicht umschreiben lässt, während die Anwendung ausgeführt wird. Zustandsbehaftete Widgets (auch Stateful Widgets) können ihren Standing hingegen auch während der App-Laufzeit verändern, sodass dieser nicht bereits mit der Ausführung feststehen muss. Möchten Sie bestimmten Elementen Ihrer Flutter-App additionally Interaktivität verleihen, benötigen Sie Stateful Widgets.

Hinweis

Widgets sind in Flutter immer entweder zustandslos oder zustandsbehaftet. Typische Beispiele für zustandslose Komponenten sind Icons, Buttons oder Textual content-Bausteine. Typische Beispiele für einfache zustandsbehaftete Widgets sind Checkboxen, Formulare oder Schieberegler.

Auch unsere Beispiel-App soll an dieser Stelle ein interaktives Widget erhalten. Für die Implementierung sind mindestens zwei Klassen erforderlich: Eine StatefulWidget-Klasse, die ihrerseits wiederum eine Instanz der State-Klasse generiert.

Zu Beginn erstellen wir eine minimalistische State-Klasse namens „RandomWordsState“, indem wir folgenden Code an das Ende der essential.dart einfügen:

class RandomWordsState extends State<randomwords> {</randomwords>
	// TODO Add construct() technique
}

Die generische State-Klasse wird in diesem Fall explizit für die Nutzung mit dem Widget „RandomWords“ zugewiesen. Das Stateful Widget selbst wird im nächsten Schritt durch folgenden Enter in die essential.dart-Datei geschrieben (im Code: vor der Klasse „RandomWordsState“):

class RandomWords extends StatefulWidget {
	@override
	RandomWordsState createState() => RandomWordsState();
}

Führen Sie diesen neuen App-Code aus, liefert Flutter Ihnen den Hinweis, dass aktuell noch keine construct()-Funktion für „RandomWordsState“ definiert ist.

Im eingefügten Snippet der State-Klasse befindet sich an der entscheidenden Stelle noch der Platzhalter-Kommentar „//TODO Add construct() technique“, der nun durch den Code für die Construct()-Funktion ersetzt wird:

class RandomWordsState extends State<randomwords> {</randomwords>
	@override
	Widget construct(BuildContext context) {
		closing wordPair = WordPair.random();
		return Textual content(wordPair.asPascalCase);
	}
}

Zuletzt entfernen Sie die Zeile „closing wordPair = WordPair.random();“ aus der MyApp-Klasse und ersetzen den Little one-Eintrag „little one: Textual content(wordPair.asPascalCase),“ durch „little one: RandomWords(),“.

Führen Sie diesen neuen Code nun aus, sollte das virtuelle Testgerät wie zuvor ein Wortpaar ausspielen – nun allerdings auf Foundation eines zustandsbehafteten Widgets, das potenziell auch eine Interaktion der zugreifenden Nutzer ermöglicht.

Schritt 4: Eine endlos scrollbare Listenansicht erstellen

Um ein erstes Beispiel für ein interaktives Flutter-Widget zu liefern, soll unsere App im letzten Teil dieses Google-Flutter-Tutorials noch etwas erweitert werden: Genauer gesagt soll die „RandomWordsState“-Klasse dahingehend angepasst werden, dass sie nicht mehr nur einzelne Wortpaare, sondern eine endlose Liste mit Wortpaaren präsentiert, durch die der Nutzer scrollen kann. Zudem sollen bereits vorgeschlagene Wortpaare gespeichert (um doppelte Einträge zu vermeiden) und die Schriftgröße der Ergebnisse vergrößert werden.

Beginnen Sie mit den beiden zuletzt genannten Punkten (Speicherung der präsentierten Ergebnisse und Font-Anpassung), indem Sie eine _suggestions-Liste und eine _biggerFont-Variable einbinden:

class RandomWordsState extends State<randomwords> {</randomwords>
	closing _suggestions = <wordpair>[];</wordpair>
	closing _biggerFont = const TextStyle(fontSize: 18.0);
}

Im Anschluss fügen Sie – ebenfalls in die „RandomWordsState“-Klasse die passende _buildSuggestions()-Funktion ein:

Widget _buildSuggestions() {
	return ListView.builder(
		padding: const EdgeInsets.all(16.0),
		itemBuilder: (context, i) {
			if (i.isOdd) return Divider();
			closing index = i ~/ 2;
			if (index >= _suggestions.size) {
			_suggestions.addAll(generateWordPairs().take(10));
			}
			return _buildRow(_suggestions[index]);
		});
}

Die aufgezeigte Funktion erweitert die App um gleich mehrere Eigenschaften: Unter anderem wird die Auflistung der Wortpaare (Checklist.View) integriert, die zudem durch eine Ein-Pixel-Trennlinie (Divider) übersichtlicher gemacht wird. Zudem ist definiert, dass weitere zehn Vorschläge geliefert werden (Zeile: _suggestions.addAll), sobald der Nutzer an das Ende der aktuell präsentierten Liste gelangt ist.

Elementarer Bestandteil des erweiterten Widgets ist außerdem die Funktion _buildRow(), die einmal professional Wortpaar aufgerufen wird und die Paare als ListTitle präsentiert. Diese Funktion implementieren wir daher gleich im nächsten Schritt:

Widget _buildRow(WordPair pair) {
	return ListTile(
		title: Textual content(
			pair.asPascalCase,
			fashion: _biggerFont,
		),
	);
}

Die construct()-Methode, die wir bei der Generierung des zustandsbehafteten Widgets (Schritt 3) implementiert haben, muss nun noch angewiesen werden, die Funktion buildSuggestions() zu verwenden. Der bisherige Inhalt der Methode ist daher durch folgenden Code auszutauschen:

@override
Widget construct(BuildContext context) {
	return Scaffold(
		appBar: AppBar(
			title: Textual content('Phrase Generator'),
		),
		physique: _buildSuggestions(),
	);
}

Zuletzt aktualisieren Sie die construct()-Methode auch in der MyApp-Klasse, indem Sie den Title ändern und im Dwelling-Eintrag definieren, dass es sich um ein RandomWords-Widget handelt:

title: 'Phrase Generator',
dwelling: RandomWords(),

Führen Sie den Code nun erneut aus, läuft die App unter dem neuen Titelnamen „Phrase Generator“. Zudem wird gleich eine ganze Auflistung von Wortkombinationen präsentiert und per Scrollen können Sie weitere Ergebnisse anzeigen lassen.

Flutter-Tutorial: Zusammenfassung

Im Rahmen des vorangegangenen Google-Flutter-Tutorials haben Sie die wichtigsten Grundlagen für die Arbeit mit Flutter gelernt und konnten Sie in einer einfachen Beispiel-App anwenden. Natürlich können Sie Ihre individuellen Flutter-Anwendungen noch deutlich detaillierter und umfangreicher entwickeln. Auch das Designkönnen Sie individuell gestalten, wenn Sie sich erst einmal intensiver mit dem Framework auseinandergesetzt haben.

Abschließend präsentieren wir nun noch einmal den kompletten Code der entwickelten Beispiel-App für Android in der essential.dart-Datei:

import 'package deal:english_words/english_words.dart';
void essential() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget construct(BuildContext context) {
		return MaterialApp(
			title: 'Phrase Generator',
			dwelling: RandomWords(),
		);
	}
}
class RandomWords extends StatefulWidget {
	@override
	RandomWordsState createState() => RandomWordsState();
}
class RandomWordsState extends State<randomwords> {</randomwords>
	closing _suggestions = <wordpair>[];</wordpair>
	closing _biggerFont = const TextStyle(fontSize: 18.0);
	@override
	Widget construct(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Textual content('Phrase Generator'),
			),
			physique: _buildSuggestions(),
		);
}
Widget _buildSuggestions() {
		return ListView.builder(
			padding: const EdgeInsets.all(16.0),
			itemBuilder: (context, i) {
				if (i.isOdd) return Divider();
				closing index = i ~/ 2;
				if (index >= _suggestions.size) {
				_suggestions.addAll(generateWordPairs().take(10));
				}
				return _buildRow(_suggestions[index]);
			});
}
Widget _buildRow(WordPair pair) {
		return ListTile(
			title: Textual content(
				pair.asPascalCase,
				fashion: _biggerFont,
			),
		);
	}
}



Source link

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.