How to Navigate Between Screens in Flutter Using Routes

❖ Welcome to Param Classes!

Most mobile applications contain multiple screens. For example, a shopping app may have a Home Screen, Product Details Screen, Cart Screen and Profile Screen. A student application may have a Login Screen, Registration Screen, Dashboard and Course Details Screen.

But how do users move from one screen to another?

Flutter provides a navigation system that allows developers to open new screens, return to previous screens and manage application pages. This process is called Navigation.

In this tutorial, we will learn how to navigate between Flutter screens using the Navigator class and routes.

We will cover:

1. Understanding Flutter navigation.

2. Creating multiple screens.

3. Using Navigator.push().

4. Using Navigator.pop().

5. Passing data between screens.

6. Using named routes.

7. Building a practical multi-screen application.

At Param Classes, we encourage beginners to learn app development through practical examples. Let's understand Flutter navigation step by step.

✦ 1. What Is Navigation in Flutter?

Navigation means moving from one screen to another inside an application.

For example:

• Login Screen → Home Screen

• Home Screen → Profile Screen

• Product List → Product Details

• Student Dashboard → Course Details

Flutter uses the Navigator widget to manage a stack of routes.

Think of navigation like a stack of pages:

• When you open a new screen, Flutter places it on top of the current screen.

• When you return, Flutter removes the top screen and shows the previous screen.

This is commonly called a navigation stack.

✦ 2. Create Your First Two Screens

First, create a Flutter project in Android Studio.

Open the lib/main.dart file.

We will create two screens:

1. HomeScreen

2. SecondScreen

The Home Screen will contain a button. When the user clicks it, the Second Screen will open.

❖ Complete Code Using Navigator.push()

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @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) => const SecondScreen(),
              ),
            );
          },
          child: const Text('Open Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: const Center(
        child: Text(
          'Welcome to the Second Screen!',
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

❖ Understanding the Code

1. Navigator.push()

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const SecondScreen(),
  ),
);

This opens the Second Screen.

2. MaterialPageRoute

It creates a route that displays a screen using a Material Design transition.

3. builder

It tells Flutter which widget should be displayed on the new screen.

4. context

It identifies the location of the current widget in the widget tree and helps Navigator find the correct navigation system.

When the user taps the button, the Second Screen opens.

✦ 3. Return to the Previous Screen Using Navigator.pop()

After opening a new screen, users often need a way to return to the previous screen.

Flutter provides Navigator.pop() for this purpose.

❖ Example

Add a button inside the Second Screen:

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Go Back'),
)

❖ Complete Second Screen Example

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

When the user clicks the button, Flutter removes the current route and displays the previous screen.

You can also use the back button in the AppBar to return to the previous screen.

✦ 4. Pass Data from One Screen to Another

Sometimes you need to send information from one screen to another.

For example, when a user selects a student from a list, you may want to display that student's name on the details screen.

Flutter allows you to pass data through a screen's constructor.

❖ Step 1: Create a Details Screen

class DetailsScreen extends StatelessWidget {
  final String studentName;

  const DetailsScreen({
    super.key,
    required this.studentName,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Student Details'),
      ),
      body: Center(
        child: Text(
          'Student Name: $studentName',
          style: const TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

❖ Step 2: Navigate and Send Data

Inside the Home Screen button:

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const DetailsScreen(
          studentName: 'Rahul',
        ),
      ),
    );
  },
  child: const Text('View Student'),
)

❖ How Does It Work?

1. The Home Screen creates a DetailsScreen.

2. It passes the student's name through studentName.

3. The Details Screen receives that value.

4. The Text widget displays the name.

You can pass other values such as student ID, email, course name or product price in the same way.

✦ 5. What Are Named Routes in Flutter?

In earlier examples, we used MaterialPageRoute directly inside Navigator.push().

For larger applications, you may prefer to give each screen a route name.

A named route is a screen that can be opened using a route name such as:

• /home

• /login

• /profile

• /dashboard

Named routes help organize navigation in small and medium-sized applications.

❖ Step 1: Configure Routes in MaterialApp

MaterialApp(
  debugShowCheckedModeBanner: false,
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/profile': (context) => const ProfileScreen(),
    '/settings': (context) => const SettingsScreen(),
  },
)

Here:

• initialRoute defines the first route.

• routes contains the route names and their corresponding screen widgets.

❖ Step 2: Open a Named Route

To open the Profile Screen:

Navigator.pushNamed(context, '/profile');

To open the Settings Screen:

Navigator.pushNamed(context, '/settings');

❖ Step 3: Return to the Previous Screen

Navigator.pop(context);

This removes the current route and returns to the previous one.

✦ 6. Complete Example Using Named Routes

Let's create a simple application with three screens:

1. Home Screen

2. Profile Screen

3. Settings Screen

❖ Complete Code

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(
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {
        '/': (context) => const HomeScreen(),
        '/profile': (context) => const ProfileScreen(),
        '/settings': (context) => const SettingsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: const Text('Open Profile'),
            ),
            const SizedBox(height: 15),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: const Text('Open Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

❖ What Happens in This Application?

• The application starts with the Home Screen.

• Clicking Open Profile displays the Profile Screen.

• Clicking Open Settings displays the Settings Screen.

• Clicking Go Back returns to the previous screen.

This example demonstrates how named routes make navigation easier to organize.

Note: Named routes are useful for learning and straightforward navigation. For advanced navigation needs such as deep links, nested navigation and complex route management, Flutter's official documentation recommends considering the Router-based approach or a routing package such as go_router.

✦ 7. Difference Between push(), pop() and pushNamed()

Method	Purpose
Navigator.push()	Opens a new route using a Route object
Navigator.pop()	Closes the current route
Navigator.pushNamed()	Opens a route using its registered name
Navigator.pushReplacement()	Replaces the current route with another route
Navigator.popUntil()	Returns through the route stack until a condition is met

❖ Example of pushReplacement()

Suppose a user logs in successfully. You may want to open the Dashboard and prevent the user from returning to the Login Screen using the back button.

You can use:

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => const DashboardScreen(),
  ),
);

This replaces the current route with the Dashboard Screen.

✦ 8. Practical Project: Create a Student App with Three Screens

Now let's create a small student application using Flutter navigation.

The application will contain:

• Home Screen

• Student Profile Screen

• Course Screen

❖ Complete Project Code

import 'package:flutter/material.dart';

void main() {
  runApp(const StudentApp());
}

class StudentApp extends StatelessWidget {
  const StudentApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Student App',
      initialRoute: '/',
      routes: {
        '/': (context) => const HomeScreen(),
        '/profile': (context) => const ProfileScreen(),
        '/course': (context) => const CourseScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Student Dashboard'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.school,
                size: 70,
                color: Colors.blue,
              ),
              const SizedBox(height: 15),
              const Text(
                'Welcome Student!',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 25),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/profile');
                  },
                  child: const Text('My Profile'),
                ),
              ),
              const SizedBox(height: 15),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/course');
                  },
                  child: const Text('My Courses'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Profile'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 45,
              child: Icon(Icons.person, size: 50),
            ),
            SizedBox(height: 15),
            Text(
              'Student Name: Rahul',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              'Course: Flutter Development',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

class CourseScreen extends StatelessWidget {
  const CourseScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Courses'),
      ),
      body: const Center(
        child: Text(
          'Flutter App Development Course',
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

❖ Project Explanation

1. MaterialApp

It defines the application and registers the named routes.

2. HomeScreen

It displays two buttons for opening the Profile and Course screens.

3. Navigator.pushNamed()

It opens the screen associated with the selected route name.

4. ProfileScreen

It displays basic student profile information.

5. CourseScreen

It displays the course information.

Run the application and click both buttons to test navigation.

✦ 9. Common Flutter Navigation Mistakes

Beginners sometimes face navigation errors. Here are a few common mistakes:

1. Route Not Found

If you use Navigator.pushNamed(context, '/profile'), make sure /profile is registered in the MaterialApp routes map.

2. Incorrect BuildContext

Use a valid context that belongs to a widget below the Navigator. Avoid using a context that is no longer mounted.

3. Forgetting Navigator.pop()

If you want to return to the previous screen, use Navigator.pop(context).

4. Incorrect Route Name

Route names must match exactly. For example, /profile and /Profile are different strings.

5. Opening Screens Without Planning Navigation

Plan your application screens and navigation flow before building a large application.

✦ 10. Practice Tasks for Beginners

Try these exercises to improve your Flutter navigation skills:

1. Create a Home Screen and About Screen.

2. Open the About Screen using Navigator.push().

3. Add a Go Back button using Navigator.pop().

4. Create three named routes: /home, /profile and /settings.

5. Pass a student's name to another screen.

6. Use Navigator.pushReplacement() after a successful login.

7. Build a small student application with four different screens.

✦ 11. Official Flutter Learning Resources

Explore these official resources for more information:

• Flutter navigation and routing: https://docs.flutter.dev/ui/navigation

• Navigator class: https://api.flutter.dev/flutter/widgets/Navigator-class.html

• MaterialPageRoute: https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html

• Navigator.push(): https://api.flutter.dev/flutter/widgets/Navigator/push.html

• Navigator.pop(): https://api.flutter.dev/flutter/widgets/Navigator/pop.html

❖ Conclusion

Navigation is an essential part of Flutter application development. Almost every real-world application contains multiple screens, and users need an easy way to move between them.

In this tutorial, we learned how to create multiple screens, use Navigator.push(), return using Navigator.pop(), pass data between screens and configure named routes.

We also created a practical Student App with Home, Profile and Course screens.

At Param Classes, we encourage beginners to practise these examples and build their own multi-screen applications. Understanding navigation will help you develop login systems, student portals, shopping apps and many other Flutter projects.

Learn Today, Grow Tomorrow with Param Classes!