Architektura Nawigacji w Flutterze: Kompleksowy Przewodnik

Nehiy · Mar 29, 2025, 09:59 AM

Flutter to jeden z najpopularniejszych frameworków do tworzenia aplikacji mobilnych, który zdobył uznanie dzięki swojej prostocie i wydajności. Stworzony przez Google, pozwala na budowanie aplikacji zarówno na iOS, jak i Android przy użyciu jednej bazy kodu. Jedną z kluczowych zalet Fluttera jest elastyczna i intuicyjna architektura nawigacji. W tym artykule przyjrzymy się szczegółowo systemowi nawigacji w Flutterze, omówimy podstawowe pojęcia i pokażemy, jak zastosować go w praktyce za pomocą przykładów kodu.

Czym jest nawigacja w Flutterze?
Nawigacja w Flutterze odnosi się do procesu przechodzenia między różnymi ekranami aplikacji. Większość aplikacji mobilnych składa się z wielu ekranów, a użytkownicy oczekują płynnego przechodzenia między nimi. Flutter oferuje w tym celu widget o nazwie Navigator, który zarządza ekranami w formie stosu (ang. stack). Dzięki metodom takim jak ,,push" (dodanie) i ,,pop" (usunięcie) możemy kontrolować ten stos i określać, który ekran jest aktualnie widoczny.

Podstawowe pojęcia nawigacji

Navigator: Jest to główny mechanizm nawigacji w Flutterze. Działa jak stos, gdzie każdy nowy ekran jest dodawany na wierzch, a usunięcie ekranu odsłania poprzedni.
Route: Każdy ekran w aplikacji jest traktowany jako ,,trasa" (route). Trasy mogą być nazwane (named routes) lub nienazwane.
MaterialPageRoute: Popularna implementacja trasy, która zapewnia animacje przejścia zgodne z wytycznymi Material Design.

Jak działa nawigacja w praktyce?
Przyjrzyjmy się prostemu przykładowi nawigacji między dwoma ekranami.
Przykład kodu: Podstawowa nawigacja

Kod [Zaznacz]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pierwszy Ekran')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Przejdź do drugiego ekranu'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Drugi Ekran')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Wróć'),
        ),
      ),
    );
  }
}

W powyższym przykładzie:

Navigator.push dodaje nowy ekran (SecondScreen) na stos.
Navigator.pop usuwa bieżący ekran i wraca do poprzedniego (FirstScreen).

Nawigacja z nazwami tras (Named Routes)
Jeśli aplikacja ma wiele ekranów, ręczne zarządzanie trasami może być uciążliwe. Flutter pozwala na definiowanie nazwanych tras w MaterialApp, co ułatwia nawigację.
Przykład kodu: Named Routes

Kod [Zaznacz]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/pierwszy',
      routes: {
        '/pierwszy': (context) => FirstScreen(),
        '/drugi': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pierwszy Ekran')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/drugi');
          },
          child: Text('Przejdź do drugiego ekranu'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Drugi Ekran')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Wróć'),
        ),
      ),
    );
  }
}

W tym przypadku:

Trasy są zdefiniowane w routes w MaterialApp.
Navigator.pushNamed używa nazwy trasy (/drugi) do przejścia na nowy ekran.

Zaawansowana nawigacja z Navigator 2.0
Dla bardziej złożonych aplikacji Flutter oferuje Navigator 2.0, który daje pełną kontrolę nad stosem nawigacji. Jest to szczególnie przydatne w aplikacjach z dynamicznymi trasami lub przy integracji z głębokimi linkami (deep linking). Jednak dla większości początkujących programistów Navigator 1.0 w zupełności wystarczy.

Najlepsze praktyki

Używaj nazwanych tras: Ułatwia to zarządzanie w większych projektach.
Minimalizuj zagnieżdżenie: Staraj się unikać zbyt wielu ekranów na stosie, aby nie dezorientować użytkownika.
Testuj przejścia: Upewnij się, że animacje i nawigacja działają płynnie na różnych urządzeniach.

Podsumowanie
Architektura nawigacji w Flutterze jest potężnym narzędziem, które pozwala na tworzenie intuicyjnych i płynnych aplikacji mobilnych. Od prostych przejść między ekranami za pomocą push i pop po zaawansowane zarządzanie trasami z Navigator 2.0 – Flutter oferuje rozwiązania dla każdego poziomu zaawansowania. Wypróbuj podane przykłady kodu i dostosuj je do swoich potrzeb, aby stworzyć aplikację, która zachwyci użytkowników!

Architektura Nawigacji w Flutterze: Kompleksowy Przewodnik

Nehiy