# Navigation

Navigation is the mechanism of moving between different screens in your application. Flutter provides a robust navigation and routing system to manage the transition between different pages.

## 1. The Navigator Widget 🧭

The `Navigator` widget is at the core of Flutter's navigation system. It manages a stack of `Route` objects and provides methods to manipulate the stack, like `push` and `pop`.

## 2. Basic Navigation 🔄

Let's start with a simple example of navigating between two screens.

{% tabs %}
{% tab title="Code" %}

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

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

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/vq17YOsMwc6a9rvHEANo" alt="" width="300"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 3. Named Routes 📜

Named routes provide a way to define a mapping between a named identifier and a route. This is useful for more structured navigation and handling deep links.

```dart
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => FirstPage(),
    '/second': (context) => SecondPage(),
  },
);
```

### 4. Passing Data Between Routes 🔄

You can pass data between routes by passing arguments to the `Navigator.push` method.

```dart
// Define a constructor for SecondPage to accept data
class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  // ...
}

// Now pass data while navigating
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Hello from First Page!'),
  ),
);
```

## Assignments 📝

Let's reinforce your understanding with some practical exercises:

* [ ] Create an app with at least three screens and implement navigation between them.
* [ ] Pass data from one screen to another and display it.
* [ ] Implement a 'back' button to navigate to the previous screen.
* [ ] Explore and implement a drawer navigation or tab navigation in your app.

{% hint style="info" %}
By tackling these assignments, you’ll get hands-on experience with Flutter's navigation system.&#x20;
{% endhint %}

Up next, working with assets!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteruniversity.gitbook.io/docs/learn-flutter/basics/navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.