# 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="https://522858097-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdSyMra5vx5HbARBPAir%2Fuploads%2FCzTxvaK3DmjRBzDhryR6%2Fezgif.com-video-to-gif%20(4).gif?alt=media&#x26;token=f399d9b2-8eb2-4a24-b8e0-3be29cb1cade" 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!