Flutter – Cross-Plattform à la Google

Seitenwechsel mit Flutter

Nach diesen Überlegungen zur Architektur soll im nächsten Schritt eine mehrseitige Applikation entstehen. Ein Rechts-Klick auf den /lib-Ordner öffnet das Kontextmenü mit der Option New Dart file. Die neue Datei erhält den Namen scene2.dart und folgenden Inhalt:

import 'package:flutter/material.dart';
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),

Da iOS und Android für Formulare verschiedene Terminologien verwenden, normalisiert Google die Begriffe in Flutter. Activities, ViewController und so weiter werden dabei als Routen bezeichnet. Aus Sicht des GUI-Stacks sind Routen allerdings mehr oder weniger gewöhnliche Widgets.

Die Interaktion zwischen den einzelnen angezeigten Routen erfolgt über eine vom Framework bereitgestellte Klasse namens Navigator. Bei der Auswahl der Begriffe hat sich Google offensichtlich von Frameworks für die Web-Entwicklung inspirieren lassen.

Für das gewählte Beispiel reicht es an dieser Stelle, wenn sich das zweite Formular bei Deaktivierung selbst vom Bildschirm entfernt – da keine Informationen zwischen den Elementen ausgetauscht werden sollen.

Die Navigator-Klasse legt einen Stack von Routen an. Durch Aufruf von Pop lässt sich die oberste davon eliminieren. Um die Korrelation zu vereinfachen, ist zudem ein Kontext zu übergeben. Das Kontextobjekt verhält sich insofern wie unter Android bekannt: Es beschreibt die Ausführungsumgebung der Applikation näher.

Die Abstammung von Web-Frameworks wird besonders deutlich, wenn man das Konzept der namensbasierten Routen implementiert. In diesem Fall ist die Applikation um eine Routendeklaration zu erweitern und zudem über das initialRoute-Attribut festzulegen, welche Route als "Start" aufzurufen ist:

MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
},
);

Die weiteren Schritte beschränken sich auf das klassische Instanziieren der Formulare, das App-Entwicklern geläufiger sein dürfte. In main.dart ist dazu folgende Inklusion erforderlich, um die in ihr enthaltenen Komponenten sichtbar zu machen:

import 'package:flutter/material.dart';
import 'scene2.dart';

In main.dart ist ein Steuerelement für die Auslösung der Routen-Veränderung erforderlich, das darüber hinaus die Kommunikation verantwortet. Hierzu lässt sich auf den bereitgestellten Katalog aller verfügbaren Widgets zurückgreifen. Die Unterrubrik Material enthält all jene Steuerelemente, die das Look and Feel des Android-Betriebssystems nachbilden.

Als Steuerelement soll ein einfacher Button dienen, die in Android normalerweise entweder einfarbig oder mit transparentem Hintergrund ausgestattet sind. Da Flutter die Steuerelemente zur Laufzeit mit Zeichenbefehlen erzeugt, lässt sich problemlos noch eine kleine Änderung vornehmen, die über die Möglichkeiten des Android-GUI-Stacks hinausgeht:

children: <Widget>[
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),

Normalerweise nimmt das RaisedButton-Steuerelement ein Child entgegen, das für die Anzeige des Labels sorgt. Im Beispiel kommt aber im ersten Schritt ein LinearGradient zum Einsatz, der erst anschließend einen Text übernimmt, wie die Emulator-Darstellung in Abbildung 6 zeigt:

    child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text(
'Gradient Button',
style: TextStyle(fontSize: 20)
),
),
),
Wer nicht auf native Steuerelemente setzt, hat auch Vorteile (Abb.6)

Der früher häufig kritisierte Verzicht auf native Steuerelemente bei der Programmierung mobiler Anwendungen spielt heute kaum noch eine Rolle, da 5-Wege-Navigation und Tastaturen bei Mobilgeräten nahezu vollständig durch Touchscreens ersetzt sind. Benutzer erwarten daher lediglich ausreichend große Steuerelemente, deren Funktion unmittelbar ersichtlich ist.

Um im nächsten Schritt die Ansicht zu aktivieren, muss der Event Handler mit folgendem Code adaptiert werden:

RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},

Bevor sich die neue Route an den Navigator übergeben lässt, ist noch eine zusätzliche Instanz der Hilfsklasse MaterialPageRoute erforderlich, da neuere Versionen von Android häufig komplexe Animationen durchführen. Die Hilfsklasse hat die Aufgabe, den GUI-Stack zur Durchführung der plattformüblichen Animationen anzuleiten.

Damit ist das erstellte Programm zum Einsatz bereit und lässt sich auf dem Emulator oder dem Smartphone durch Druck auf den Knopf starten und wieder schließen.