Eine gute Navigation ist das Rückgrat jeder App. In Flutter gibt es mächtige Werkzeuge, um eine benutzerfreundliche Navigation zu schaffen, die sowohl für Entwickler als auch für Benutzer einfach und effizient ist. In diesem Beitrag zeige ich dir, wie du in deinem Projekt zero mit Flutter eine Navigation einrichtest, die von einem Registrierungsbildschirm zu einem Hauptbildschirm führt. Wir verwenden Linux Ubuntu als Betriebssystem und VS Code als IDE. Los geht’s!

---

Die Grundlagen der Navigation in Flutter

Flutter bietet eine eingebaute Navigation über Widgets wie Navigator und MaterialApp. Damit kannst du zwischen verschiedenen Seiten (Screens) wechseln, und das auf eine intuitive Art und Weise.

In der Navigation mit Flutter sind zwei wichtige Konzepte zentral:

• Routes: Ein Mapping von Routen-Namen (wie /home) zu den jeweiligen Widgets.
• Navigator: Die Klasse, die Navigation zwischen den Routen ermöglicht (z. B. mit push und pop).

---

Wie richtest du die Navigation ein?

1. Erstelle dein Projekt

Falls du dein Projekt zero noch nicht angelegt hast, öffne ein Terminal und führe den folgenden Befehl aus:

flutter create zero
cd zero

Starte das Projekt anschliessend in VS Code:

code .

2. Projektstruktur anpassen

In der Datei lib/main.dart definierst du die Navigation. Wir fügen hier die routes-Eigenschaft von MaterialApp hinzu, die alle Routen-Namen und ihre zugehörigen Widgets speichert.

---

Praktisches Beispiel: Navigation zwischen Registrierungs- und Hauptbildschirm

1. Aktiviere die Navigation in main.dart

Bearbeite die Datei lib/main.dart wie folgt:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'zero',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialRoute: '/', // Die App startet hier
      routes: {
        '/': (context) => const RegisterScreen(), // Registrierungsbildschirm
        '/home': (context) => const HomeScreen(), // Hauptbildschirm
      },
    );
  }
}

---

2. Erstelle den Registrierungsbildschirm

Lege eine Datei lib/screens/register_screen.dart an und füge folgenden Code hinzu:

import 'package:flutter/material.dart';

class RegisterScreen extends StatelessWidget {
  const RegisterScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Registrieren')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Willkommen zur Registrierung!'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Navigation zum Hauptbildschirm
                Navigator.pushNamed(context, '/home');
              },
              child: const Text('Weiter zum Hauptbildschirm'),
            ),
          ],
        ),
      ),
    );
  }
}

---

3. Erstelle den Hauptbildschirm

Lege eine weitere Datei lib/screens/home_screen.dart an. Der Hauptbildschirm zeigt eine einfache Begrüssung:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hauptbildschirm')),
      body: const Center(
        child: Text('Willkommen auf dem Hauptbildschirm!'),
      ),
    );
  }
}

---

Schritt-für-Schritt: Navigation testen

1. Starte die App

Führe die App mit folgendem Befehl aus:

flutter run

Du solltest nun den Registrierungsbildschirm sehen. Klicke auf den Button „Weiter zum Hauptbildschirm“, und die App sollte dich nahtlos zum Hauptbildschirm navigieren.

2. Fehlerbehebung

Falls etwas nicht wie erwartet funktioniert:

• Überprüfe, ob die routes-Einträge und die Widgets (RegisterScreen, HomeScreen) korrekt geschrieben sind.
• Achte darauf, dass die Dateien register_screen.dart und home_screen.dart im Projekt eingebunden sind.

---

Tipps für benutzerfreundliche Navigation

• Verwende klare Routen-Namen: Wähle sprechende Namen wie /home oder /register, damit der Code lesbar bleibt.
• Gestalte die Navigation einfach: Vermeide zu viele verschachtelte Navigationsebenen.
• State Management: Für komplexere Navigationen kann ein State-Management-Tool wie Provider hilfreich sein.

---

Fazit

Mit Flutter kannst du schnell eine einfache und benutzerfreundliche Navigation einrichten. Indem du Routen und Navigator verwendest, schaffst du eine solide Grundlage für jede App. Egal, ob du eine kleine App wie zero oder ein grosses Projekt entwickelst – eine saubere Navigation sorgt für eine angenehme Nutzererfahrung.