Flutter current route active tracking debug

route_active_mixin.dart

import 'package:flutter/material.dart';
import 'package:nft/my_app.dart';
import 'package:nft/utils/app_log.dart';

mixin RouteActiveMixin<T extends StatefulWidget> on State<T>
    implements RouteAware {
  bool _subscribed = false;
  bool active = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!_subscribed) {
      MyApp.routeObserver.subscribe(this, ModalRoute.of(context));
      _subscribed = true;
    }
  }

  @override
  void dispose() {
    if (_subscribed) {
      MyApp.routeObserver.unsubscribe(this);
      _subscribed = false;
    }
    super.dispose();
  }

  @override
  void didPush() => onActive();

  @override
  void didPopNext() => onActive();

  @override
  void didPop() => onInactive();

  @override
  void didPushNext() => onInactive();

  /// Update active flag
  void onActive() {
    active = true;
    logger.d(
        '${runtimeType.toString()} onActive ${ModalRoute.of(context).settings.name}');
  }

  /// Update inactive flag
  void onInactive() {
    active = false;
    logger.d(
        '${runtimeType.toString()} onInactive ${ModalRoute.of(context).settings.name}');
  }
}

Update MyApp class


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

  static final GlobalKey<NavigatorState> _navigatorKey =
      GlobalKey<NavigatorState>();
  static final RouteObserver<Route<dynamic>> routeObserver =
      RouteObserver<Route<dynamic>>();

  static NavigatorState get navigator => _navigatorKey.currentState;

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: MyApp._navigatorKey,
      debugShowCheckedModeBanner: false,
      initialRoute: AppConstant.rootPageRoute,
      onGenerateRoute: AppRoute.generateRoute,
      navigatorObservers: <NavigatorObserver>[MyApp.routeObserver],
    );
  }
}

Add RouteActiveMixin<HomePage> to Home Page State

class _HomePageState extends State<HomePage>
    with RouteActiveMixin<HomePage> {

  @override
  Widget build(BuildContext context) {
    return const ScreenWidget(
      body: HomeScreenBody(),
    );
  }
}

Important thing to get a correct route name.

import 'package:flutter/material.dart';
import 'package:nft/pages/base/content_page.dart';
import 'package:nft/pages/counter/counter_page.dart';
import 'package:nft/pages/home/home_page.dart';
import 'package:nft/utils/app_constant.dart';

class AppRoute {
  /// Generate route for app here
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case AppConstant.counterPageRoute:
        return MaterialPageRoute<dynamic>(
            settings: settings,
            builder: (_) => ContentPage(
                body: CounterPage(argument: settings.arguments as String)));
      case AppConstant.rootPageRoute:
      default:
        return MaterialPageRoute<dynamic>(
            settings: settings,
            builder: (_) => const ContentPage(body: HomePage()));
    }
  }
}

Do push to another screen and get output

- Start app
flutter: [D]  _HomePageState onActive /

- Navigate to Counter Screen 
flutter: [D]  _HomePageState onInactive /
flutter: [D]  _CounterPageState onActive /counter_screen

- Navigate back to Home by pop
flutter: [D]  _HomePageState onActive /
flutter: [D]  _CounterPageState onInactive /counter_screen

https://github.com/nhancv/nft

@nhancv

Leave a Reply

Your email address will not be published.Required fields are marked *