Flutter Mobile Development · Lezione

Navigazione di base tra le pagine

Impari a eseguire il push e il pop delle route usando Navigator, consentendo semplici transizioni tra schermate diverse nella Sua app Flutter.

Lezione 1 di 411 passaggi

Navigazione di base tra le pagine è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Navigating Your App

Think of a mobile app as a collection of pages or "screens." Navigation is how users move between these screens, like going from a product list to a product detail page.

Apps need a clear way to move forward.
Apps also need a way to go back.
Flutter provides powerful tools for this.

Meet the Navigator

In Flutter, the Navigator widget manages a stack of Route objects. When you want to show a new screen, you "push" a route onto this stack. When you want to go back, you "pop" a route off the stack.

It's like a stack of playing cards.
New cards go on top (push).
You remove cards from the top (pop).

Understanding Routes

A Route is an abstraction for a "screen" or "page" in your app. Flutter provides a common type of route called MaterialPageRoute, which creates a platform-specific transition animation (like sliding in from the right on Android).

It's the blueprint for how a new screen will look and behave when shown.

Moving Forward with push()

To navigate to a new screen, you use Navigator.push(). This method takes a BuildContext and a MaterialPageRoute as arguments.

The builder function inside MaterialPageRoute tells Flutter which widget to build for the new screen.

Try Pushing a Route

This example shows how to push a new screen when a button is pressed. Run it and tap the button!

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

What is BuildContext?

You might have noticed context being passed around. BuildContext is a handle to the location of a widget in the widget tree. It helps widgets locate other widgets or data higher up in the tree.

The Navigator uses this context to know which navigation stack to operate on.

Going Back with pop()

When you want to return to the previous screen, you "pop" the current route off the navigation stack using Navigator.pop(). This will reveal the screen that was underneath.

Flutter's AppBar often provides a back button automatically when a new route is pushed, which internally calls Navigator.pop().

Try Popping a Route

Let's modify our previous example to include a button on the second screen that allows us to explicitly go back to the home screen.

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

Visualizing the Stack

Imagine the Navigator maintains a stack of screens. When you push, a new screen is placed on top. When you pop, the top screen is removed.

The user always sees the topmost screen. This stack behavior is fundamental to how navigation works in Flutter.

Push: Adds to top.
Pop: Removes from top.
First screen is at the bottom.

Navigation Check

Consider a Flutter app with two screens, ScreenA and ScreenB. If you are currently on ScreenA and want to move to ScreenB, then later return to ScreenA, which sequence of Navigator methods would you use?

Rispondi nella lezione interattiva

Recap: Basic Navigation

Great job! You've learned the core concepts of basic navigation in Flutter:

The Navigator manages a stack of routes.
MaterialPageRoute defines a new screen.
Navigator.push() adds a new screen to the stack.
Navigator.pop() removes the current screen from the stack.
BuildContext is essential for navigation operations.

Next, we'll explore more advanced navigation techniques like named routes!

Gratis per iniziare

Impara Dart con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 22
Lezioni: 88

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Navigazione di base tra le pagine» è gratuita?

Sì — il testo completo di «Navigazione di base tra le pagine» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.

Cosa imparerò in «Navigazione di base tra le pagine»?

Impari a eseguire il push e il pop delle route usando Navigator, consentendo semplici transizioni tra schermate diverse nella Sua app Flutter. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Flutter Mobile Development?

Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Navigazione di base tra le pagine»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?

Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Flutter Mobile Development