Flutter Course, 10.2 Route and Screen Navigation

In this course, we will delve deeply into how to handle navigation between screens in Flutter and the concept of routes. Screen transitions are one of the essential features of mobile applications, providing users with a smooth experience. Therefore, it is crucial to understand how to use routes and navigation well.

1. What is a Route?

A route refers to the concept that signifies each screen of a mobile app. Flutter provides two types of routes: basic routes and named routes. Basic routes point to specific widgets, while named routes identify specific routes using strings.

2. Flutter’s Navigation Structure

Flutter’s navigation structure primarily uses a stack structure. Each time a user navigates to a new screen, the previous screen is added to the stack, and the new screen occupies the top position. When the user presses the back button, the top screen is removed, and the user returns to the previous screen.

2.1 Navigator Widget

The Navigator is a widget that manages routes, allowing multiple routes to be stacked and managed. This enables the implementation of various screen transition animations and effects.

3. Transitioning Screens Using Routes

There are two main ways to transition between screens using routes. The first is by using Navigator.push(), and the second is by using Navigator.pushNamed().

3.1 Navigator.push()

The Navigator.push() method adds a new screen to the current screen. Here’s how to use this method to transition to a new screen.

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

3.2 Navigator.pushNamed()

Using named routes has the advantage of making the code more concise. To use named routes, you must first define the routes in the routes property of MaterialApp.

MaterialApp(
    routes: {
        '/': (context) => HomeScreen(),
        '/new': (context) => NewScreen(),
    },
);

After this, transitioning between screens can be done as follows.

Navigator.pushNamed(context, '/new');

4. Screen Transition Animations

Flutter allows you to apply various animations during screen transitions. You can customize it using PageRouteBuilder. By using this method, you can finely tune the start and end of the transition animation and the widget during the transition.

Navigator.push(context, PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.easeInOut;

        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
            position: offsetAnimation,
            child: child,
        );
    },
));

5. Passing Data Between Screens Using Routes

It is possible to pass data between screens through routes. To pass data to a new screen, you should provide the data as a parameter to the widget’s constructor when creating it.

class NewScreen extends StatelessWidget {
    final String data;

    NewScreen(this.data);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("New Screen")),
            body: Center(child: Text(data)),
        );
    }
}

Data can be passed as follows:

Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen("Hello, Flutter!")));

6. Returning Results Through Routes

After transitioning screens, you can return results to the previous screen. This allows you to take user input and act according to the result. The Navigator.pop() method can be used for this purpose.

Navigator.pop(context, "Returned Data");

7. Conclusion

In this course, we covered routes and screen navigation in Flutter. Using routes is essential for effectively managing transitions between screens and improving user experience. You can navigate screens in various ways and exchange data, so actively implement this in your actual app development.

I hope this article helps you in your Flutter learning, and in the next course, we will discuss state management in Flutter. Thank you!