Navigation and Routing in Flutter

# CHAPTER 10

Navigation and Routing in Flutter #

1. Introduction #

2. Learning Objectives #

• Understand the stack-based architecture of the Flutter Navigator.

• Use Navigator.push() to transition to a new screen.

• Use Navigator.pop() to return to the previous screen.

• Configure and use Named Routes for cleaner architecture.

• Pass variables and data between different screens.

3. The Navigator Stack #

• The Home Screen is the first plate.

• When the user clicks "Settings", Flutter drops the Settings Screen plate on top of the Home Screen. The user now sees Settings.

• When the user clicks the "Back" arrow, Flutter throws the top plate away, revealing the Home Screen underneath it.

4. Basic Navigation (Push and Pop) #

ElevatedButton(
  child: Text("Go to Details Screen"),
  onPressed: () {
    // 1. Push a new Route onto the Navigator stack
    Navigator.push(
      context, // The context tells Flutter where we currently are in the app
      MaterialPageRoute(builder: (context) => DetailsScreen()), // The new screen to load!
    );
  },
)

To return from Screen B back to Screen A: *(Note: If your Scaffold has an AppBar, Flutter automatically adds a Back Arrow that does this for you!)*

ElevatedButton(
  child: Text("Go Back"),
  onPressed: () {
    // 2. Pop the top screen off the stack
    Navigator.pop(context);
  },
)

5. Passing Data Between Screens #

Screen B (Receiving the Data):

class DetailsScreen extends StatelessWidget {
  final String productName; // The data we need

  // Constructor requiring the data
  DetailsScreen({required this.productName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text("Details for: $productName"));
  }
}

Screen A (Sending the Data):

Navigator.push(
  context,
  // Pass the string "Red Shoe" into the constructor!
  MaterialPageRoute(builder: (context) => DetailsScreen(productName: "Red Shoe")),
);

6. Named Routes (Advanced Architecture) #

// 1. Define the routes in MaterialApp
MaterialApp(
  initialRoute: '/', // The starting screen
  routes: {
    '/': (context) => HomeScreen(),
    '/settings': (context) => SettingsScreen(),
    '/profile': (context) => ProfileScreen(),
  },
)

// 2. Navigate effortlessly from anywhere in the app!
Navigator.pushNamed(context, '/settings');

7. Visual Learning: The Route Stack #

Action: User opens app.
Stack: [ Home ] -> User sees Home.

Action: User clicks "Profile". (Navigator.push)
Stack: [ Home, Profile ] -> User sees Profile.

Action: User clicks "Back". (Navigator.pop)
Stack: [ Home ] -> Profile is destroyed. User sees Home again.

8. Common Mistakes #

• The Context Error: If you try to use Navigator.push(context, ...) directly inside the runApp or MaterialApp widget before a Scaffold is built, Flutter will crash with an error saying *"Navigator operation requested with a context that does not include a Navigator."* The context must come from a widget *inside* or *below* the MaterialApp!

9. Best Practices #

• PushReplacement: If you are on a "Login Screen", and the user logs in successfully, you don't want them to be able to press the "Back" button and go back to the Login Screen. Use Navigator.pushReplacement(context, newRoute). This throws away the Login screen and replaces it with the Dashboard, preventing the user from returning.

10. Mini Project: A Multi-Screen App #

1. 1. Create HomeScreen (StatelessWidget). Add a TextField (we will cover forms later, so just hardcode a string String userName = "Alice"; for now).

1. 2. Add an ElevatedButton. In the onPressed, write Navigator.push.

1. 3. Create a second screen called WelcomeScreen. Ensure its constructor requires a String name;.

1. 4. In WelcomeScreen's Scaffold body, display a large Text("Welcome, $name!").

1. 5. Run the app. Click the button on Home. Watch the screen slide over, displaying "Welcome, Alice!". Click the back arrow in the AppBar to return!

11. Practice Exercises #

1. 1. What class manages the stack of screens in a Flutter application?

1. 2. If an e-commerce app has 100 products, how do you prevent having to create 100 different ProductScreens?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the push and pop stack architecture of the Flutter Navigator. How does this align with standard mobile OS behaviors (like the physical Android back button)?

• Q: Describe how to pass complex data (like a User object containing an ID, name, and email) from a ListView screen to a Details screen using MaterialPageRoute.

• Q: Contrast Navigator.push with Navigator.pushReplacement. Provide a specific UX scenario where pushReplacement is strictly required.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #