Framework · Seit 2017

Flutter

Flutter ist Googles Open-Source-UI-Framework, mit dem man aus einer einzigen Dart-Codebasis Apps für Mobilgeräte, Web und Desktop erstellt.

Anleitung starten Diskussionen

Flutter ist ein Open-Source-UI-Framework von Google, das 2017 erstmals veröffentlicht wurde. Mit einer einzigen Codebasis lassen sich Apps für Android, iOS, das Web, Windows, macOS und Linux erstellen. Geschrieben werden die Apps in Dart, Googles objektorientierter Sprache mit einer an Java und TypeScript erinnernden Syntax, Null-Sicherheit und async/await; das Dart-SDK ist in Flutter enthalten.

Statt die nativen UI-Elemente der Plattform zu verwenden, zeichnet Flutter jedes Pixel mit einer eigenen Rendering-Engine. Dadurch sehen Apps auf allen Plattformen gleich aus und verhalten sich gleich, und eigene Designs und Animationen sind ohne Einschränkungen möglich. Release-Builds werden vorab in Maschinencode kompiliert, und während der Entwicklung übernimmt Hot Reload Codeänderungen sofort, ohne den App-Zustand zu verlieren. Deshalb ist Flutter besonders bei Mobil-Apps beliebt, die gleichzeitig auf mehreren Plattformen erscheinen sollen.

Für den Einstieg installiert man das Flutter-SDK, prüft die Umgebung mit flutter doctor und lernt das Widget-Modell, indem man die von flutter create erzeugte Zähler-App verändert. Die offiziellen Codelabs und der Dart-Sprachleitfaden führen Schritt für Schritt durch das Kombinieren von Widgets, die Zustandsverwaltung und Layouts. Pakete findet man auf pub.dev und fügt sie mit flutter pub add hinzu.

Besonderheiten

Eine Codebasis, viele Plattformen

Apps für Android, iOS, Web, Windows, macOS und Linux entstehen aus demselben Dart-Code; plattformspezifischer Code kommt nur bei Bedarf hinzu.

Alles ist ein Widget

Text, Abstände, Layouts und ganze Bildschirme sind Widgets, und komplexe Oberflächen entstehen durch das Kombinieren kleiner Widgets.

Hot Reload

Codeänderungen erscheinen in etwa einer Sekunde in der laufenden App, ohne dass ihr Zustand verloren geht.

Eigener Renderer, native Leistung

Die Engine zeichnet jedes Pixel selbst, und Release-Builds werden vorab in Maschinencode kompiliert und laufen flüssig.

Einsatzgebiete

Plattformübergreifende Mobil-Apps für Android und iOS
Marken-Apps mit eigenem Design und interne Business-Apps
Desktop-Apps für Windows, macOS und Linux
Web-Apps, die parallel zu Mobil-Apps erscheinen

Installation

1
Flutter-SDK installieren
Die Flutter-Erweiterung in VS Code installieren und das SDK von ihr herunterladen lassen oder das SDK für das eigene Betriebssystem von docs.flutter.dev herunterladen, entpacken und den bin-Ordner zum PATH hinzufügen. Das Dart-SDK ist enthalten.
2
Umgebung prüfen
flutter doctor zeigt, ob die Werkzeuge für die Zielplattformen wie Android Studio, Xcode, Chrome oder Visual Studio installiert sind. Nötig sind nur die Werkzeuge der Plattformen, für die man baut.
```
flutter doctor
```
3
Erstes Projekt anlegen
Mit flutter create ein Projekt anlegen und auf einem angeschlossenen Gerät, Emulator oder im Browser starten. Wird der Code während der Ausführung gespeichert, übernimmt Hot Reload die Änderung.
```
flutter create hello_app && cd hello_app && flutter run
```

Dein erstes Programm

Die erste App

Jede Flutter-App beginnt mit der main-Funktion in lib/main.dart, und das an runApp übergebene Widget füllt den Bildschirm. MaterialApp bildet das Grundgerüst einer Material-Design-App, Scaffold das Grundlayout eines Bildschirms, und Center und Text zeigen eine zentrierte Nachricht. Einfach die erzeugte main.dart durch diesen Code ersetzen und mit flutter run starten.

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Hello, world!')),
      ),
    ),
  );
}

flutter create hello_app && cd hello_app && flutter run

Wichtige Werkzeuge

Flutter CLI: Der Befehl flutter erstellt, startet, testet und baut Projekte, verwaltet Pakete und prüft die Entwicklungsumgebung.
DevTools: Eine Sammlung von Debugging-Werkzeugen zum Untersuchen des Widget-Baums, Erkunden von Layouts, Messen von Leistung und Speicher sowie Anzeigen des Netzwerkverkehrs.
VS Code: Mit den Erweiterungen für Flutter und Dart gibt es Codevervollständigung, Geräteauswahl, Debugging und Hot Reload beim Speichern. Für Android Studio gibt es ebenfalls ein Plugin.
pub.dev: Das offizielle Paket-Repository für Dart und Flutter mit Paketen wie http, provider und go_router.

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von Flutter.

Offizielle Dokumentation und Ressourcen

Sprachen

DartDart ist eine für Clients optimierte Sprache von Google: die Grundlage von Flutter-Apps, aber auch für Server, Kommandozeilentools und das Web geeignet.

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu Flutter aus.

Noch keine Diskussionen. Starte die erste.