Flutter Mobile Development · Lekcja

Podstawowa nawigacja między stronami

Nauczą się Państwo dodawać i usuwać trasy za pomocą Navigator, umożliwiając proste przechodzenie między ekranami aplikacji Flutter.

Lekcja 1 z 411 kroki

Podstawowa nawigacja między stronami to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Nawigowanie po aplikacji

Pomyśl o aplikacji mobilnej jak o zbiorze stron lub „ekranów”. Nawigacja określa sposób przemieszczania się użytkowników między tymi ekranami, na przykład z listy produktów do strony szczegółów produktu.

Aplikacje potrzebują jasnego sposobu przechodzenia dalej.
Aplikacje potrzebują również sposobu powrotu.
Flutter udostępnia do tego zaawansowane narzędzia.

Poznaj Navigator

We Flutterze widget Navigator zarządza stosem obiektów Route. Aby wyświetlić nowy ekran, „wypychasz” trasę na ten stos. Aby wrócić, „zdejmujesz” trasę ze stosu.

Działa to jak stos kart do gry.
Nowe karty trafiają na wierzch (push).
Karty usuwa się z wierzchu (pop).

Zrozumienie tras

Route to abstrakcja reprezentująca „ekran” lub „stronę” w aplikacji. Flutter udostępnia popularny typ trasy o nazwie MaterialPageRoute, który tworzy animację przejścia właściwą dla danej platformy (na przykład wsuwanie z prawej strony w systemie Android).

Jest to schemat określający wygląd i zachowanie nowego ekranu podczas jego wyświetlania.

Przechodzenie dalej za pomocą push()

Aby przejść do nowego ekranu, używa się Navigator.push(). Ta metoda przyjmuje jako argumenty BuildContext oraz MaterialPageRoute.

Funkcja builder wewnątrz MaterialPageRoute informuje Flutter, który widget ma zostać utworzony dla nowego ekranu.

Wypróbuj wypychanie trasy

Ten przykład pokazuje, jak wypchnąć nowy ekran po naciśnięciu przycisku. Uruchom go i stuknij przycisk!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(
        child: Text('You are on the second screen!'),
      ),
    );
  }
}

Czym jest BuildContext?

Być może zauważyłeś, że przekazywany jest context. BuildContext to uchwyt do położenia widgetu w drzewie widgetów. Pomaga widgetom zlokalizować inne widgety lub dane znajdujące się wyżej w drzewie.

Navigator używa tego kontekstu, aby wiedzieć, na którym stosie nawigacji ma wykonywać operacje.

Powrót za pomocą pop()

Aby wrócić do poprzedniego ekranu, „zdejmuje się” bieżącą trasę ze stosu nawigacji za pomocą Navigator.pop(). Spowoduje to wyświetlenie ekranu znajdującego się pod nią.

AppBar we Flutterze często automatycznie udostępnia przycisk powrotu po wypchnięciu nowej trasy; wewnętrznie wywołuje on Navigator.pop().

Wypróbuj zdejmowanie trasy

Zmodyfikujmy poprzedni przykład, dodając na drugim ekranie przycisk umożliwiający jawny powrót do ekranu głównego.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // This will go back!
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

Wizualizacja stosu

Wyobraź sobie, że Navigator przechowuje stos ekranów. Po wykonaniu push nowy ekran trafia na wierzch. Po wykonaniu pop ekran z wierzchu zostaje usunięty.

Użytkownik zawsze widzi ekran znajdujący się najwyżej. To działanie stosu jest podstawą nawigacji we Flutterze.

Push: dodaje element na wierzchu.
Pop: usuwa element z wierzchu.
Pierwszy ekran znajduje się na dole.

Sprawdzenie nawigacji

Rozważ aplikację Flutter z dwoma ekranami: ScreenA i ScreenB. Jeśli obecnie znajdujesz się na ScreenA i chcesz przejść do ScreenB, a następnie wrócić do ScreenA, jakiej sekwencji metod Navigator użyjesz?

Odpowiedz w interaktywnej lekcji

Podsumowanie: podstawowa nawigacja

Świetna praca! Poznałeś podstawowe pojęcia związane z nawigacją we Flutterze:

Navigator zarządza stosem tras.
MaterialPageRoute definiuje nowy ekran.
Navigator.push() dodaje nowy ekran do stosu.
Navigator.pop() usuwa bieżący ekran ze stosu.
BuildContext jest niezbędny do wykonywania operacji nawigacyjnych.

W następnej części poznamy bardziej zaawansowane techniki nawigacji, takie jak nazwane trasy!

Bezpłatny start

Ucz się Dart dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 22
Lekcje: 88

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Podstawowa nawigacja między stronami” jest bezpłatna?

Tak — pełny tekst „Podstawowa nawigacja między stronami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawowa nawigacja między stronami”?

Nauczą się Państwo dodawać i usuwać trasy za pomocą Navigator, umożliwiając proste przechodzenie między ekranami aplikacji Flutter. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?

Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Podstawowa nawigacja między stronami”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?

Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Flutter Mobile Development