Flutterexperts

The most ideal situation when you create an application that gets delivered is that it’s a prompt achievement and users love it and use it precisely how you expected. The truth is dislike that, and you will require each piece of information accessible to see how users utilize your item.

In this blog, we will explore RouteAware In Flutter. We will see how to implement a demo program and show how to use RouteAware to screen navigation in your flutter applications.

Table Of Contents::

RouteAware

Methods

Code Implement

Conclusion

---

---

RouteAware:

An interface for objects that know about their present Route. This is utilized with RouteObserver to make a widget mindful of changes to the Navigator’s meeting history.

Demo Module ::

The above demo video shows how to use RouteAware in a flutter. It shows how RouteAware will work in your flutter applications. It shows when the user navigates between two screens. When HomePage is loaded, didPush of HomePage is called. At the point when we tapped on the button, the first didPushNext of HomePage got called and afterward, our SecondPage got delivered and didPush of SecondPage got called. At the point when we tapped on back from SecondPage, the HomePage’s didPopNext got called and afterward, SecondPage got poped and didPop of SecondPage got called. And afterward, the means were again repeated. It will be shown on your device.

Methods:

RouteAware class gives the accompanying methods which we can expand:

• > didPop(): In this method, when we pop the current screen, the didPop method is called.
• > didPopNext(): In this method, on the off chance that you have extended HomePage with RouteAware, and in case SecondPage is popped so HomePage is noticeable now, didPopNext is called. As such, this strategy is considered when the top screen is popped off and the current screen is apparent.
• > didPush(): In this method, this is called when the current screen or route has been pushed into the navigation stack!
• > didPushNext(): In this method, when we push SecondPage from HomePage, didPushNext is called. In other words, this method is called when a new screen/route is pushed from the current screen and the current screen is no longer visible.

How to implement code in dart file :

You need to implement it in your code respectively:

To start with, make a variable of RouteObserver in main.dart

final RouteObserver<ModalRoute> routeObserver = RouteObserver<ModalRoute>();

Inside your, MaterialApp you need to set navigatorObservers and pass our variable into it!. Then, our main. dart will look like this:

import 'package:flutter/material.dart';
import 'package:flutter_route_aware_demo/splash_screen.dart';

void main() => runApp(MyApp());
final RouteObserver<ModalRoute> routeObserver = RouteObserver<ModalRoute>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
      navigatorObservers: [routeObserver],
    );
  }
}

Create a new dart file called home_page.dart inside the lib folder.

Now will be to extend RouteAware so that you can override the different methods! Also, inside the initState() of HomePage, subscribe to the route.

@override
void initState() {
  WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  });
  super.initState();
}

Override the methods. In the body, we will add the Column widget. In this widget, we will add an image and ElevatedButton(). We are just overriding all the methods available and navigating to our next page onClick of our ElevatedButton().

import 'package:flutter/material.dart';
import 'package:flutter_route_aware_demo/second_page.dart';
import 'main.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with RouteAware {
  @override
  void didPush() {
    print('HomePage: Called didPush');
    super.didPush();
  }

  @override
  void didPop() {
    print('HomePage: Called didPop');
    super.didPop();
  }

  @override
  void didPopNext() {
    print('HomePage: Called didPopNext');
    super.didPopNext();
  }

  @override
  void didPushNext() {
    print('HomePage: Called didPushNext');
    super.didPushNext();
  }

  @override
  void initState() {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      routeObserver.subscribe(this, ModalRoute.of(context)!);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        automaticallyImplyLeading: false,
        title: Text('Flutter RouteAware Demo'),
      ),
      body: Center(
        child:Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset("assets/logo.png",width: 300,),
              SizedBox(height: MediaQuery.of(context).size.height*0.25,),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: TextStyle(fontSize: 20),
                    minimumSize: Size.fromHeight(40),
                    primary: Colors.cyan,
                  ),
                  onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => SecondPage(),
                    ),
                  ),
                  child: Text("Home Page",)
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Create a new dart file called second_page.dart inside the lib folder.

All same things can be done for the second_page.dart. In the body, we will add the text ”Flutter Dev’s” and wrap to it’s Center widget.

import 'package:flutter/material.dart';

import 'main.dart';

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> with RouteAware {
  @override
  void didPush() {
    print('SecondPage: Called didPush');
    super.didPush();
  }

  @override
  void didPop() {
    print('SecondPage: Called didPop');
    super.didPop();
  }

  @override
  void didPopNext() {
    print('SecondPage: Called didPopNext');
    super.didPopNext();
  }

  @override
  void didPushNext() {
    print('SecondPage: Called didPushNext');
    super.didPushNext();
  }

  @override
  void initState() {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      routeObserver.subscribe(this, ModalRoute.of(context)!);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(
          "Flutter Dev's",
          style: TextStyle(fontSize: 35.0),
        ),
      ),
    );
  }
}

When we run the application, we ought to get the console final output like the underneath.

Launching lib/main.dart on ONEPLUS A5010 in debug mode...
Running Gradle task 'assembleDebug'...
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...
Debug service listening on ws://127.0.0.1:37333/8K4tNNeL45U=/ws
Syncing files to device ONEPLUS A5010...
I/flutter (19730): HomePage: Called didPush
I/flutter (19730): HomePage: Called didPushNext
I/flutter (19730): SecondPage: Called didPush
I/flutter (19730): HomePage: Called didPopNext
I/flutter (19730): SecondPage: Called didPop
I/flutter (19730): HomePage: Called didPushNext
I/flutter (19730): SecondPage: Called didPush
I/flutter (19730): HomePage: Called didPopNext
I/flutter (19730): SecondPage: Called didPop
I/flutter (19730): HomePage: Called didPushNext
I/flutter (19730): SecondPage: Called didPush
I/flutter (19730): HomePage: Called didPopNext
I/flutter (19730): SecondPage: Called didPop

Conclusion:

In the article, I have explained the basic structure of RouteAware in a flutter; you can modify this code according to your choice. This was a small introduction to RouteAware On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the RouteAware in your flutter projects. We will show you what RouteAware is?. Show the methods of RouteAware. Make a demo program for working RouteAware. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---