How to Navigate one page to another in Flutter using Navigator?

The Navigator widget in Flutter provides a way to manage a stack of routes. 

You can use the Navigator to 

1. named routes, 
2. push 
3. And pop routes, 

Where each route is an independent widget. You can use the Navigator to transition between pages by providing the widget you want to display on the page, and we can use the Navigator to specify the route you want to use to transition between pages.

Using Navigator in Flutter is simple. Here's an example of how to use Navigator to navigate between two screens:

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

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back to First Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

When the button is pressed, the Navigator.push method is called to push a new route (SecondScreen) onto the stack. 

When the back button is pressed, the Navigator.pop method is called to remove the current route (SecondScreen) from the stack and return to the previous route (FirstScreen).

When the button is pressed, the Navigator.push method is called to push a new route (SecondScreen) onto the stack. When the back button is pressed, the Navigator.pop method is called to remove the current route (SecondScreen) from the stack and return to the previous route (FirstScreen).

Named Route:

Named routes in Flutter allow you to give a specific route a unique string identifier. This makes it easier to navigate to a specific route from anywhere in your app, as you only need to refer to its name.

Define the named routes in your MaterialApp widget:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => FirstScreen(),
    '/second': (context) => SecondScreen(),
  },
)

To navigate to a named route, use the Navigator.pushNamed method:

onPressed: () {
  Navigator.pushNamed(context, '/second');
},

To navigate back to the previous route, use the Navigator.pop method:

onPressed: () {
  Navigator.pop(context);
},

Using named routes makes it easier to manage your navigation logic, as you can refer to routes by their names instead of hardcoded widget references. It also makes it easier to maintain your app, as you can change the implementation of a route without having to update references to it throughout your code.

Simple Example for NamedRoute:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back to First Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}