Navigation in Flutter

Create Free Backend With Appwrite

Navigation is process of moving between different screens (also known as routes or pages) within an app. It’s like going from the Home screen of a app to the Contact screen.

How to Navigate in Flutter?

There are different ways to navigate between screens in Flutter. They are:

  • Using the Navigator
  • Using Named Routes
  • Using Router

Using Navigator

Here’s a simple way to navigate to a new screen using Navigator. You will learn more about navigator in the next section.

Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => SecondScreen()),
);
Run Online

Using Named Routes

Named routes are routes that are named using a string. Here’s how to use named routes to navigate to a new screen.

// First, ensure you have defined the named route in your MaterialApp widget.
MaterialApp(
  routes: {
    '/': (context) => FirstScreen(),
    '/second': (context) => SecondScreen(),
  },
);

// Then, use Navigator.pushNamed to navigate to the second screen.
Navigator.pushNamed(context, '/second');
Run Online

Using Router

For simple apps, you can use Navigator to move between screens. If your app needs advance navigation, you can use a Router package like (go_router).

Conclusion

In conclusion, if you are making simple apps, use Navigator to move between screens. If you are making complex apps, consider using a Router package like go_router.