Day 5: Navigating Between Screens in Flutter | Flutter in 30 Days

Day 5: Navigating Between Screens in Flutter | Understanding Routes and Navigation

Welcome to Day 5 of your Flutter journey! Today, we'll explore how to navigate between screens in Flutter using routes and the Navigator widget. This is a crucial aspect of app development, allowing users to move seamlessly through different parts of your application.

Understanding Routes

In Flutter, a route is essentially a screen or a page in your app. The navigation system uses a stack-based approach to manage these routes, meaning that new routes are pushed onto the stack when navigating forward, and popped off when navigating back.

Setting Up Basic Navigation

1. Creating Multiple Screens:

Start by creating two simple screens. We'll use the HomeScreen and DetailScreen for demonstration.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Demo',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Text('Welcome to the Detail Screen!'),
      ),
    );
  }
}

2. Explanation of the Code:

• We defined two screens: HomeScreen and DetailScreen.
• In the HomeScreen, we use an ElevatedButton that, when pressed, uses the Navigator.push() method to navigate to the DetailScreen.
• The MaterialPageRoute creates a route that displays the DetailScreen.

Returning to the Previous Screen

To allow users to return to the previous screen, you can simply use the Navigator.pop() method, which will pop the current route off the stack.

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Text('Welcome to the Detail Screen!'),
      ),
    );
  }
}

Conclusion

Today, you've learned how to navigate between screens in Flutter using routes and the Navigator widget. This fundamental concept is key to creating dynamic and user-friendly applications.

In the upcoming days, we will dive deeper into more complex navigation techniques, including passing data between screens and using named routes. Stay tuned!