Mobilutvikling med Flutter · leksjon

Grunnleggende sidenavigasjon

Lær å legge ruter på stacken og fjerne dem med Navigator, slik at du kan lage enkle overganger mellom ulike skjermer i Flutter-appen.

Leksjon 1 av 411 trinn

Grunnleggende sidenavigasjon er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Navigere i appen

Tenk på en mobilapp som en samling sider eller «skjermer». Navigasjon er hvordan brukerne beveger seg mellom disse skjermene, for eksempel fra en produktliste til en side med produktdetaljer.

Apper trenger en tydelig måte å gå videre på.
Apper trenger også en måte å gå tilbake på.
Flutter tilbyr kraftige verktøy for dette.

Møt Navigator

I Flutter administrerer widgeten Navigator en stabel med Route-objekter. Når De vil vise en ny skjerm, «skyver» De en rute inn på denne stabelen. Når De vil gå tilbake, «trekker» De en rute ut av stabelen.

Det kan sammenlignes med en stabel med spillekort.
Nye kort legges øverst (push).
Kort fjernes fra toppen (pop).

Forstå ruter

En Route er en abstraksjon for en «skjerm» eller «side» i appen. Flutter tilbyr en vanlig rutetype kalt MaterialPageRoute, som oppretter en plattformspesifikk overgangsanimasjon (for eksempel at skjermen glir inn fra høyre på Android).

Den fungerer som en beskrivelse av hvordan en ny skjerm skal se ut og oppføre seg når den vises.

Gå videre med push()

For å navigere til en ny skjerm bruker De Navigator.push(). Denne metoden tar imot en BuildContext og en MaterialPageRoute som argumenter.

builder-funksjonen i MaterialPageRoute forteller Flutter hvilken widget som skal bygges for den nye skjermen.

Prøv å skyve inn en rute

Dette eksempelet viser hvordan De skyver inn en ny skjerm når en knapp trykkes på. Kjør det og trykk på knappen!

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!'),
      ),
    );
  }
}

Hva er BuildContext?

De har kanskje lagt merke til at context sendes rundt. BuildContext er en referanse til plasseringen av en widget i widgettreet. Den hjelper widgeter med å finne andre widgeter eller data høyere opp i treet.

Navigator bruker denne konteksten til å vite hvilken navigasjonsstabel som skal brukes.

Gå tilbake med pop()

Når De vil gå tilbake til den forrige skjermen, «trekker» De den gjeldende ruten ut av navigasjonsstabelen ved hjelp av Navigator.pop(). Da vises skjermen som lå under.

Flutter sin AppBar viser ofte automatisk en tilbakeknapp når en ny rute skyves inn, og denne kaller internt Navigator.pop().

Prøv å trekke ut en rute

La oss endre det forrige eksempelet slik at det inkluderer en knapp på den andre skjermen, som lar oss gå tilbake til startsiden eksplisitt.

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'),
        ),
      ),
    );
  }
}

Visualisere stabelen

Se for Dem at Navigator opprettholder en stabel med skjermer. Når De bruker push, plasseres en ny skjerm øverst. Når De bruker pop, fjernes skjermen øverst.

Brukeren ser alltid skjermen som ligger øverst. Denne stabeloppførselen er grunnleggende for hvordan navigasjon fungerer i Flutter.

Push: Legger til øverst.
Pop: Fjerner fra toppen.
Den første skjermen ligger nederst.

Navigasjonssjekk

Tenk på en Flutter-app med to skjermer, ScreenA og ScreenB. Hvis De befinner Dem på ScreenA og vil gå til ScreenB, for deretter å gå tilbake til ScreenA, hvilken sekvens med Navigator-metoder vil De bruke?

Besvar den i den interaktive leksjonen

Oppsummering: Grunnleggende navigasjon

Godt jobbet! De har lært de viktigste konseptene innen grunnleggende navigasjon i Flutter:

Navigator administrerer en stabel med ruter.
MaterialPageRoute definerer en ny skjerm.
Navigator.push() legger til en ny skjerm i stabelen.
Navigator.pop() fjerner den gjeldende skjermen fra stabelen.
BuildContext er avgjørende for navigasjonsoperasjoner.

Deretter skal vi utforske mer avanserte navigasjonsteknikker, for eksempel navngitte ruter!

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Grunnleggende sidenavigasjon» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «Grunnleggende sidenavigasjon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Grunnleggende sidenavigasjon»?

Lær å legge ruter på stacken og fjerne dem med Navigator, slik at du kan lage enkle overganger mellom ulike skjermer i Flutter-appen. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Grunnleggende sidenavigasjon»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Mobilutvikling med Flutter