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!
