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.

Google-Flutter-Tutorial: Downloadseite des Google-SDKs — Wählen Sie das Flutter-Paket für das Betriebssystem Ihrer Wahl und folgen Sie anschließend den Installationsanweisungen, um das SDK zu installieren und einzurichten.

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:

Rufen Sie den Menüpunkt „File“ auf.
Klicken Sie auf „Settings“ und wählen Sie danach die Rubrik „Plugins“ aus.
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.
Bestätigen Sie die Nutzung der Third-Get together-Erweiterung by way of „Settle for“.
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.

Installation des Flutter-Plugins in Android Studio — Die Set up des Flutter-Plugins funktioniert in Android Studio nur, wenn Sie zuvor die Erweiterung für die Programmiersprache Dart installiert haben.

Android Studio: Neues Flutter-Projekt erstellen — Neues Flutter-Projekt erstellen mit Android Studio.

Android Studio: Konfiguration einer neuen Flutter-App — Der Pfad zum Flutter-SDK ist individuell – und abhängig davon, wo Sie das Equipment auf Ihrem System abgespeichert haben (in diesem Flutter-Tutorial: C:srcflutter).

// 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'),
				),
			),
		);
	  }
}

Flutter-Tutorial: Oberfläche, über die man ein virtuelles Testgerät in Android Studio auswählt — Nach Klick auf den Abspiel-Button wird die Datei „essential.dart“ auf dem ausgewählten Testgerät ausgeführt. Alternativ können Sie auch die Tastenkombination [Umschalt] + [F10] verwenden.

Google-Flutter-Tutorial: Testergebnis der ersten eigenen App — Google-Flutter-Tutorial: Check der ersten eigenen App.

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

Android Studio: Sprachpaket-Einbindung in Flutter-App — In der Konsole können Sie verfolgen, ob das „pub get“-Kommando korrekt ausgeführt werden konnte. Falls ja, sehen Sie die Ausgabe „Course of completed with exit code 0“.

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

closing wordPair = WordPair.random();

little one: Textual content(wordPair.asPascalCase),

Angepasster Code der Flutter-Tutorial-App — Durch den neuen child-Eintrag sollen die zufällig kreierten Wortpaare („WordPair.random“) aus dem Fundus jeweils mit einem Großbuchstaben beginnen („asPascalCase“) – beispielsweise „UpperCase“.

Beispiel-Ausgabe der erstellten Flutter-App — Im Beispiel hat unsere Flutter-Tutorial-App die beiden englischen Wörter „Brush“ und „Cloud“ kombiniert.

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

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

Android Studio: Dart-Fehleranalyse für Flutter-App.

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

Flutter-Tutorial: Code-Feinschliff in der Beispiel-App.

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

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,
		),
	);
}

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

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

Flutter-Tutorial: Code der MyApp-Klasse — MyApp-Klasse der Flutter-Tutorial-App nach den Anpassungen.

Android Studio und virtuelle Android-Maschine mit der Flutter-Beispiel-App — Android Studio und virtuelle Android-Maschine (Pixel 2) mit der fertigen Flutter-Beispiel-App.

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,
			),
		);
	}
}

Flutter lernen: Das sind die Voraussetzungen

Schritt 1: Die erste eigene Flutter-App erstellen

Schritt 2: Ein externes Paket einbinden

Schritt 3: Ein zustandsbehaftetes Widget hinzufügen

Schritt 4: Eine endlos scrollbare Listenansicht erstellen

Flutter-Tutorial: Zusammenfassung

Kommentar verfassen Kommentieren abbrechen