Software-Ent­wick­ler kennen das Problem: Längst reicht es nicht mehr aus, ein Programm für Windows zu ent­wi­ckeln; heute sollte es ebenso auf Android-Smart­phones, iOS und am besten auch im Web­brow­ser laufen, um er­folg­reich zu sein.

Zu diesem Zweck musste man früher für jede Plattform den Pro­gramm­code neu anpassen und kom­pi­lie­ren. In vielen Fällen waren sogar größere Umbauten nötig, um die Be­son­der­hei­ten des je­wei­li­gen Be­triebs­sys­tems und die Optik und Funk­tio­na­li­tät der von den Anwendern gewohnten gra­fi­schen Be­nut­zer­ober­flä­chen in der eigenen App zu be­rück­sich­ti­gen. Flutter ver­ein­facht die Cross-Plattform-Ent­wick­lung, da nur eine ge­mein­sa­me Codebasis für alle Platt­for­men nötig ist.

Was ist Flutter?

Flutter ist ein Framework zur Ent­wick­lung von Apps für ver­schie­de­ne Platt­for­men, das von Google fe­der­füh­rend ent­wi­ckelt und Ende 2018 erstmals als Open-Source-Projekt ver­öf­fent­licht wurde. Flutter bietet eine Vielzahl von Bi­blio­the­ken für Standard-UI-Elemente von Android und iOS, ist aber auch für die Ent­wick­lung klas­si­scher Desktop-Web­an­wen­dun­gen geeignet. Apps, die mit Flutter ent­wi­ckelt wurden, sehen aus wie typische Apps der je­wei­li­gen Systeme und verhalten sich auch so, ohne dass Sie als Pro­gram­mie­rer auf die Be­son­der­hei­ten dieser Systeme achten müssen.

Wofür wird Flutter ein­ge­setzt?

Flutter wird in erster Linie dazu verwendet, Android- und iOS-Apps zu ent­wi­ckeln, ohne dass für jedes dieser beiden völlig un­ter­schied­li­chen Systeme eine eigene Codebasis ge­schrie­ben werden muss. Die Smart­phone-Apps laufen dabei als echte native Apps auf den Geräten. Sie werden vor der Ver­öf­fent­li­chung für die jeweilige Plattform kom­pi­liert, benötigen also kein Runtime-Modul und keinen Browser. Aus der gleichen Codebasis lassen sich auch Web-Apps für Browser sowie native Programme für Windows, Linux und macOS erstellen.

Google selbst verwendet Flutter u. a. für ver­schie­de­ne Module des Google Assistant und die Be­nut­zer­ober­flä­che des Google Home Hubs. Aber auch bekannte E-Commerce-Anbieter wie eBay, Groupon oder die Alibaba Group nutzen Flutter, um ihren Web-Apps und mobilen Apps ein ein­heit­li­ches „Look and Feel“ zu verleihen.

Auf welcher Pro­gram­mier­spra­che basiert Flutter?

Das Flutter-SDK basiert auf der ebenfalls von Google ent­wi­ckel­ten Pro­gram­mier­spra­che Dart, die ein moderner Nach­fol­ger des klas­si­schen Ja­va­Script werden soll und wie die beliebte Web-Skript­spra­che direkt als Web-App im Browser läuft. Auf einem Server lassen sich Dart-Programme direkt ausführen, im Browser werden sie mit dem Trans­com­pi­ler Dart2js in Ja­va­Script umgesetzt. Die Apps für Googles neue Fuchsia-Plattform werden direkt mit Dart ent­wi­ckelt, das in seinem Aufbau bekannten ob­jekt­ori­en­tier­ten Pro­gram­mier­spra­chen wie Java oder C# ähnelt.

Tipp

Wie genau die Pro­gram­mie­rung mit der Google-Sprache funk­tio­niert, erfahren Sie in unserem aus­führ­li­chen Tutorial zur Dart-Pro­gram­mie­rung.

Alles ist ein Widget – das Prinzip von Flutter

Die Strategie von Flutter „Alles ist ein Widget“ setzt ob­jekt­ori­en­tier­te Pro­gram­mie­rung kon­se­quent bis in die Be­nut­zer­ober­flä­che um: Die Ober­flä­che eines Programms besteht aus ver­schie­de­nen Widgets, die in­ein­an­der ge­schach­telt sein können. Jeder Button und an­ge­zeig­te Text ist ein Widget. Diese Widgets haben un­ter­schied­li­che Ei­gen­schaf­ten, die sich verändern lassen. Sie können sich ge­gen­sei­tig be­ein­flus­sen und auf Sta­tus­än­de­run­gen von außen mit ein­ge­bau­ten Funk­tio­nen reagieren. Für alle wichtigen Elemente der Be­nut­zer­ober­flä­che werden Widgets mit­ge­lie­fert, die den De­sign­vor­ga­ben von Android und iOS bzw. ge­wöhn­li­chen Web­an­wen­dun­gen ent­spre­chen. Bei Bedarf lassen sich diese um zu­sätz­li­che Funk­tio­nen erweitern oder man erstellt eigene Widgets, die sich mit den vor­han­de­nen nahtlos kom­bi­nie­ren lassen.

Die Widgets bieten im Vergleich zu den Konzepten anderer SDKs we­sent­lich mehr Fle­xi­bi­li­tät, haben aber den Nachteil, dass sie alle im Quellcode des Programms liegen, was diesen stark ver­schach­telt und schnell un­über­sicht­lich macht.

Flutter: Einfache Beispiele

Zum schnellen Start liefern die Ent­wick­ler zahl­rei­che Beispiele für Flutter. Ein simples „Hello World“-Projekt zeigt den grund­le­gen­den Aufbau eines Programms mit einem Widget und einer einfachen Funktion void Main(), die das Programm startet.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:Flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
			appBar: AppBar(
				title: Text('Welcome to Flutter'),
			),
			body: Center(
				child: Text('Hello World'),
			),
	),
		);
	}
}

Auf einem Smart­phone oder in der Smart­phone-Si­mu­la­ti­on zeigt das Programm oben den Ti­tel­bal­ken „Welcome to Flutter“ aus dem Element AppBar() des Widgets. Auf der freien Bild­schirm­flä­che darunter, die in Flutter als body be­zeich­net wird, erscheint in diesem Fall zentriert der Text „Hello World“.

Bild: Einfache „Hello World“-App mit Flutter
Ein einfaches „Hello World“-Programm in Flutter.
Bild: Example of Flutter in a browser
Simple demo ap­pli­ca­ti­ons developed with Flutter in a browser

In­ter­ak­ti­ve Beispiele zeigen Flutter-Apps ein­schließ­lich des ver­wen­de­ten Dart-Quell­codes direkt im Browser. Hier kann man den Quellcode in­ter­ak­tiv verändern und die Aus­wir­kung in der App be­ob­ach­ten.

Bild: Flutter-Beispiel im Browser
Einfache Demo-Programme mit Flutter im Browser.

Die Flutter Gallery zeigt anhand einiger Beispiel-Apps die Ver­wen­dung ver­schie­de­ner Typen von Standard-Widgets. Die Ka­te­go­rien der Elemente für Be­nut­zer­ober­flä­chen vermeiden, wie in Open-Source-Projekten üblich, bewusst die Mar­ken­na­men Android und iOS und nennen sich „Material“ (ent­spre­chend der Google-De­sign­spra­che) sowie „Cupertino“ (nach dem Fir­men­sitz von Apple).

Bild: Flutter Gallery: Überblick
Flutter Gallery mit Bei­spie­len für die Ver­wen­dung von UI-Elementen.
Tipp

Auf GitHub sammelt das Flutter-Team zahl­rei­che Apps von Ent­wick­lern sowie Tutorials, um den Einstieg in die Pro­gram­mie­rung mit Flutter zu er­leich­tern.

Was braucht man zum Pro­gram­mie­ren mit Flutter?

Alle wichtigen Bi­blio­the­ken und Kom­man­do­zei­len­tools zur Software-Ent­wick­lung mit Flutter finden sich im Flutter SDK, das man auf der of­fi­zi­el­len Website flutter.dev  kostenlos her­un­ter­la­den kann. Das Software De­ve­lo­p­ment Kit verfügt über keine eigene grafische IDE – Sie können aber jeden be­lie­bi­gen Text­edi­tor zum Schreiben des Quell­codes verwenden. Google empfiehlt die In­stal­la­ti­on von Android Studio zur kom­for­ta­ble­ren Pro­gram­mie­rung. Flutter liefert passende Plug-ins für Android Studio, um Bi­blio­the­ken kom­for­ta­bel ein­zu­bin­den und au­to­ma­ti­sche Syn­tax­her­vor­he­bung im Editor zu er­mög­li­chen. Ver­gleich­ba­re Plug-ins gibt es auch für die Microsoft-Ent­wick­lungs­um­ge­bung Visual Studio Code.

Hinweis

Tie­fer­ge­hen­de In­for­ma­tio­nen zur In­stal­la­ti­on sowie zur Pro­gram­mie­rung mit Flutter finden Sie in unserem Flutter-Tutorial für Ein­stei­ger.

Vor- und Nachteile von Flutter

Jedes SDK und jede Pro­gram­mier­spra­che hat Vor- und Nachteile. Zu­sam­men­fas­send lässt sich sagen, dass die Vorteile von Flutter gegenüber ähnlichen Systemen deutlich über­wie­gen.

Vorteile von Flutter

  • Eine Codebasis für alle wichtigen Ziel­platt­for­men
  • Für Umsteiger leicht zu er­ler­nen­de Pro­gram­mier­spra­che Dart
  • Das „Alles ist ein Widget“-Konzept bietet viel­fäl­ti­ge Mög­lich­kei­ten
  • Per­for­man­te Aus­füh­rung der nativen Apps auf Smart­phones
  • Um­fang­rei­che Bi­blio­the­ken mit vor­ge­fer­tig­ten UI-Elementen
  • Einfache Im­ple­men­tie­rung von Da­ten­strö­men, um Nutzern stets aktuelle In­for­ma­tio­nen zu liefern
  • Hot Reload be­schleu­nigt das Testen während der Ent­wick­lung

Nachteile von Flutter

  • Pro­gramm­code wird durch die Ein­bin­dung der Widgets leicht un­über­sicht­lich
  • Bei der Ak­tua­li­sie­rung von De­sign­vor­ga­ben in den Be­triebs­sys­te­men müssen die Flutter-Module ak­tua­li­siert werden. Da die Module fest im Programm in­te­griert sind, muss auch dieses neu kom­pi­liert und auf den Geräten in­stal­liert werden.
  • Noch junge, wenig ver­brei­te­te Sprache; bis jetzt kleine Community
Zum Hauptmenü