Day 6: Navigation Between Pages in Flutter

Sun, May 2025 19:17:28

Hello friends, welcome back to the Flutter learning series from zero to expert. On day 6, we're going to discuss one of the most essential and frequently used topics in Flutter app development: page navigation.

We will learn how to use Navigator.push(), Navigator.pop(), the concept of MaterialPageRoute, and how to create and add new pages such as Register, About, and more.

Why is Navigation Important?

In mobile apps, we almost always switch from one page to another. For example:

• From the Login page to the Home page.
• From the Home page to the Detail page.
• From the Settings page to the About page.

Navigation allows us to build complex but well-structured apps.

Flutter provides a stack-based navigation system. So when we navigate to a new page, the new page is stacked on top of the previous one. When we press the back button, the top page is popped (removed from the stack).

Navigator Concept

Flutter has a class called Navigator that we can use to move between pages.

1. Navigator.push()

Used to go to a new page (adds the page to the stack).

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

2. Navigator.pop()

Used to return to the previous page (removes the page from the stack).

Navigator.pop(context);

3. MaterialPageRoute

A class used to define a new route based on Material Design.

Example Case: From Home Page to Register and About Pages

We will create a simple structure like this:

main.dart
├── HomePage
├── RegisterPage
└── AboutPage

Step 1: Create HomePage

// home_page.dart
import 'package:flutter/material.dart';
import 'register_page.dart';
import 'about_page.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => RegisterPage()),
                );
              },
              child: Text('Go to Register Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AboutPage()),
                );
              },
              child: Text('Go to About Page'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 2: Create RegisterPage

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

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

Step 3: Create AboutPage

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

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This app is built with Flutter.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back'),
            ),
          ],
        ),
      ),
    );
  }
}

Deeper Explanation

Why Use MaterialPageRoute?

Because it's the most common and recommended way for Material Design-based apps. If you want to create custom transitions or use Cupertino (iOS-style), you can use CupertinoPageRoute or create your own PageRouteBuilder.

Navigation with Named Routes (Bonus)

If your app gets larger, consider using Named Routes to make navigation more structured and maintainable.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/register': (context) => RegisterPage(),
    '/about': (context) => AboutPage(),
  },
);

And you can navigate like this:

Navigator.pushNamed(context, '/register');
Navigator.pushNamed(context, '/about');

Conclusion

Navigation is a crucial part of Flutter app development. By understanding Navigator, MaterialPageRoute, and push/pop, you can already build apps with multiple pages.

Here are the key takeaways:

• Every push() adds a page to the stack.
• Every pop() removes a page from the stack.
• Use MaterialPageRoute for smooth page transitions.
• Consider using Named Routes for larger apps.

Independent Exercise

1. Add a new page called ProfilePage.
2. Add a button in HomePage to go to ProfilePage.
3. Add name and email information in ProfilePage.
4. Add a button to go back to Home.

That's it for day 6. In the next lesson, we will learn about basic State Management to make our app more interactive and dynamic.

Keep up the spirit, and see you in the next material! 💪🔥