Flutter Navigation: How to Navigate Between Screens

Are you a Flutter developer looking to learn how to navigate between screens in your app? Look no further! In this article, we'll cover all the ins and outs of Flutter navigation and how to implement it in your app.

What is Navigation in Flutter?

Before we dive into the details, let's first discuss what navigation means in the context of a Flutter app. In simple terms, navigation refers to the process of moving from one screen to another within an app.

In a Flutter app, each screen is represented by a widget. Navigation in Flutter is all about switching between these widgets and displaying them on the device screen.

Types of Navigation in Flutter

There are several ways to navigate between screens in a Flutter app, including:

1. Implicit Navigation

In implicit navigation, you navigate from one screen to another without explicitly specifying the action. For example, clicking on a button that takes you to another screen without explicitly calling a Navigator widget.

This type of navigation is more straightforward and is perfect for apps with few screens.

2. Explicit Navigation

Explicit navigation, also known as push navigation, involves explicitly calling a Navigator widget to push or pop a new screen. This type of navigation is ideal for large and complex apps with many screens.

Using Navigator Widget for Navigation in Flutter

The Navigator widget in Flutter is a powerful tool that plays a vital role in navigation between screens.

The Navigator widget helps manage a navigation stack containing the screens in your app. Each screen in the stack is represented by a widget, and the Navigator widget is responsible for managing the order and transition between screens.

Suppose you're familiar with a stack data structure; in that case, you'll understand that the Navigator widget works on a stack mechanism, where each new screen is pushed to the top of the stack.

To move to a new screen within the app, you can either pop the current screen and display the previous screen or push a new screen to the top of the stack.

Implementing Navigation in Flutter

Now let's dive into the details of implementing navigation between screens in your Flutter app.

1. Setting up the Basic App Structure

First, we need to set up the basic app structure by creating a new Flutter project and adding a few screens. Open your preferred IDE or text editor, and create a new Flutter project using the following command:

flutter create myapp

Replace myapp with your preferred app name.

Next, create two screens for the app: the first screen is the Home screen and the second screen is the Details screen.

import 'package:flutter/material.dart';
 
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Navigation'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            
          },
        ),
      ),
    );
  }
}
 
class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}
 
class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('This is the Details Screen'),
      ),
    );
  }
}

The Home screen displays a button that takes users to the Details screen.

2. Implementing Navigation Using Navigator Widget

Now let's implement navigation in our app using the Navigator widget. We'll use the push method to go from the Home screen to the Details screen.

import 'package:flutter/material.dart';
 
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Navigation'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailsScreen()),
            );
          },
        ),
      ),
    );
  }
}
 
class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}
 
class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('This is the Details Screen'),
      ),
    );
  }
}

In the onPressed event of the button in the Home screen, we use the push method of the Navigator widget to go to the Details screen.

The push method takes two arguments: the current context and the widget representing the new screen. In our case, the widget representing the new screen is the DetailsScreen widget.

3. Navigating Back to the Previous Screen

Now that we have implemented navigation to the Details screen let's take a look at how we can navigate back to the Home screen.

The Navigator widget also provides a pop method for popping the current screen from the navigation stack.

We'll add a button to the Details screen that takes us back to the Home screen.

import 'package:flutter/material.dart';
 
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Navigation'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailsScreen()),
            );
          },
        ),
      ),
    );
  }
}
 
class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}
 
class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is the Details Screen'),
            ElevatedButton(
              child: Text('Go Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

In the onPressed event of the button, we use the pop method of the Navigator widget to go back to the Home screen.

The pop method takes the current context as its argument, which we can get using the context variable available in the build method of the screen widget.

Conclusion

And there you have it! We've covered everything you need to know about Flutter navigation and how to navigate between screens in your app.

We've explored the different types of navigation in Flutter, as well as the importance of using the Navigator widget for navigation.

By following the steps outlined in this article, you should now be able to implement navigation between screens in your Flutter app with ease.

We hope you found this article helpful. Be sure to check out our other articles and tutorials on Flutter and Dart, available on our website, flutterbook.dev!

Editor Recommended Sites