Mobilutveckling med Flutter · Lektion

Grundläggande sidnavigering

Lär er att lägga till och ta bort routes med Navigator, så att ni kan skapa enkla övergångar mellan olika skärmar i er Flutter-app.

Lektion 1 av 411 steg

Grundläggande sidnavigering är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Navigera i din app

Tänk på en mobilapp som en samling sidor eller ”skärmar”. Navigering är det sätt som användare tar sig mellan dessa skärmar, till exempel från en produktlista till en sida med produktinformation.

Appar behöver ett tydligt sätt att gå framåt.
Appar behöver också ett sätt att gå tillbaka.
Flutter tillhandahåller kraftfulla verktyg för detta.

Möt Navigator

I Flutter hanterar widgeten Navigator en stack med Route-objekt. När du vill visa en ny skärm lägger du till en route på stacken med ”push”. När du vill gå tillbaka tar du bort en route från stacken med ”pop”.

Det fungerar som en hög med spelkort.
Nya kort läggs överst (push).
Kort tas bort från toppen (pop).

Förstå routes

En Route är en abstraktion för en ”skärm” eller ”sida” i appen. Flutter tillhandahåller en vanlig routetyp som kallas MaterialPageRoute, vilken skapar en plattformsspecifik övergångsanimering (till exempel att skärmen glider in från höger på Android).

Den fungerar som en ritning för hur en ny skärm ska se ut och fungera när den visas.

Gå framåt med push()

För att navigera till en ny skärm använder du Navigator.push(). Denna metod tar emot en BuildContext och en MaterialPageRoute som argument.

Funktionen builder inuti MaterialPageRoute talar om för Flutter vilken widget som ska byggas för den nya skärmen.

Prova att lägga till en route

Det här exemplet visar hur du lägger till en ny skärm när en knapp trycks ned. Kör det och tryck 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!'),
      ),
    );
  }
}

Vad är BuildContext?

Du kanske har lagt märke till att context skickas runt. BuildContext är en referens till en widgets plats i widgetträdet. Den hjälper widgetar att hitta andra widgetar eller data högre upp i trädet.

Navigator använder denna kontext för att veta vilken navigeringsstack som ska användas.

Gå tillbaka med pop()

När du vill återvända till föregående skärm tar du bort den aktuella routen från navigeringsstacken med Navigator.pop(). Då visas skärmen som låg under den.

Flutters AppBar visar ofta automatiskt en bakåtknapp när en ny route läggs till. Den anropar internt Navigator.pop().

Prova att ta bort en route

Ändra vårt föregående exempel så att det innehåller en knapp på den andra skärmen, vilket gör att du uttryckligen kan gå tillbaka till startskärmen.

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

Visualisera stacken

Föreställ dig att Navigator underhåller en stack med skärmar. När du gör push placeras en ny skärm överst. När du gör pop tas skärmen överst bort.

Användaren ser alltid den översta skärmen. Detta stackbeteende är grundläggande för hur navigering fungerar i Flutter.

Push: Lägger till överst.
Pop: Tar bort överst.
Den första skärmen ligger längst ned.

Navigeringskontroll

Tänk dig en Flutter-app med två skärmar, ScreenA och ScreenB. Om du för närvarande befinner dig på ScreenA och vill gå till ScreenB, för att senare återvända till ScreenA, vilken sekvens av Navigator-metoder skulle du använda?

Besvara frågan i den interaktiva lektionen

Repetition: grundläggande navigering

Bra jobbat! Du har lärt dig de centrala begreppen inom grundläggande navigering i Flutter:

Navigator hanterar en stack med routes.
MaterialPageRoute definierar en ny skärm.
Navigator.push() lägger till en ny skärm i stacken.
Navigator.pop() tar bort den aktuella skärmen från stacken.
BuildContext är nödvändig för navigeringsoperationer.

Härnäst utforskar vi mer avancerade navigeringstekniker, till exempel namngivna routes!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Grundläggande sidnavigering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Grundläggande sidnavigering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Grundläggande sidnavigering”?

Lär er att lägga till och ta bort routes med Navigator, så att ni kan skapa enkla övergångar mellan olika skärmar i er Flutter-app. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Grundläggande sidnavigering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Mobilutveckling med Flutter