Diese Beitragsreihe entsteht um die Entstehung meiner nächsten Flutter-App zu dokumentieren. Bisher habe ich bereits eine in den Stores, aber das Framework ändert sich momentan so regelmäßig, dass einige Umsetzungen schon wieder veraltet sind. Auch wenn die hier dokumentierten das auch bald sein mögen, möchte ich möglichst viele Aha-Momente hervorrufen und hoffe, dass einige von euch ihren Nutzen hieraus ziehen.

Das Problem

Ich beginne ein solches Projekt immer mit einer Reihe von Skizzen der Screens. Die werde ich hier nicht zur Schau stellen, aber ich halte fest, dass viele Apps aus mehreren Screens bestehen, zwischen denen der Benutzer navigieren möchte.
Für mich ist es ein erster Fertigstellungs-Schritt, alle Screens angelegt und per Navigation verbunden zu haben. Als nächstes kann ich dann dafür sorgen, dass der Inhalt mit Leben, Bildern und Funktionalität angereichert wird.

Das Problem ist also ganz einfach: Ich hätte gerne… drei Screens und eine hübsche Navigation zwischen ihnen.

Die Lehrbuch-Lösung

Es ist übrigens nicht die einzige Lösung. Ich selbst habe ein wenig mit der BottomNavigationBar herumgespielt und mich letztendlich für den TabNavigator entschieden. Letztendlich kommt es darauf an, was genau man erreichen möchte.

Mir war es wichtig, dass die Navigation nur in einer Datei gepflegt werden muss. Mein Beispielcode ist soweit möglich frei von Styling und Extras, so wie man sich das von einem Tutorial wünscht.

Das Programmieren

Neben dem Erstellen eines neuen Flutter-Projects braucht es für die Tab-Navigation keine weiteren Dependencies.

Sobald ich heraus gefunden habe, wie ich hier schön auf mein Git-Projekt verlinke, werde ich das übrigens tun.

main.dart

void main() {
runApp(App());
}

app.dart

class App extends StatelessWidget {

@override
Widget build(BuildContext context) {

return new MaterialApp(
title: 'AppTitle',
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tab Navigation'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home_filled), text: 'Home',),
Tab(icon: Icon(Icons.edit_outlined), text: 'Projects'),
Tab(icon: Icon(Icons.settings), text: 'Settings'),
],
),
),
body: TabBarView(
children: [
HomeScreen(),
ProjectsScreen(),
SettingsScreen(),
],
),
)
)
);
}
}

Ich habe mich für eine Navigation über drei Screens entschieden. Deren Dateien sind in einem separaten Ordner ui/screens/. Ich stelle nur eine von ihnen vor, da sie bisher – bis auf den Textinhalt – nahezu identisch sind.

home_screen.dart

class HomeScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {

@override
Widget build(BuildContext context) {
return Text('Goal');
}

}

Das Ergebnis

Das Ergebnis ist kein besonders aufregendes, aber man kann hin und her klicken und sich über das freuen, was man mit einem Tag Arbeit schon geschafft hat.

This image has an empty alt attribute; its file name is Bildschirmfoto-2021-03-08-um-21.27.42-773x1024.png

Ich hoffe, dass die Dokumentation auf diesem Blog mir hilft, am Ball zu bleiben. Mal schauen, was als nächstes kommt, auf jeden Fall sind Übersetzung, Werbung, Verlinkung und Konten geplant…

Gibt es jemanden, der gerne seine Lieblings-Navigation vorstellen will?

Meine Flutter-Fahrt – Tab-Navigation

Beitragsnavigation


Schreibe einen Kommentar

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