Navigating Between Screens

Flutter treats screens as a stack. Navigator.push() adds a new screen on top, and Navigator.pop() removes the current screen to go back.

Example: navigating to a second screen

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SecondScreen()),
    );
  },
  child: const Text('Go to Second Screen'),
)

Tapping the button pushes a new screen (SecondScreen) on top of the current one; a system back gesture or Navigator.pop() returns to this screen.

The "stack" mental model is worth holding onto: think of screens like a physical stack of cards — push adds a new card on top, pop removes the top card to reveal what was underneath. This is conceptually close to how Next.js's client-side <Link> navigation works too, just with Flutter making the stack explicit as part of its own API rather than mapping to browser history entries.