background

In order to expand Flutter module in existing projects, flutter_boost is selected among several commonly used Flutter mixing stack modes, such as FlutterEngineGroup, Flutter_boost and Flutter_thrio. Getx is also integrated as a Flutter project status management tool. In business, there are multiple entries that open a Flutter page, and each entry corresponds to a different Flutter page.

Routing scheme selection

Both Getx and Flutter_boost have routing functions. Considering the mapping between native and Flutter routes, route management of Getx was abandoned. Use only Getx state management, internationalization, and so on in your project.

Release problem with GetxController

Because flutter_boost was used in the project to manage page routing, Getx lost control of the life cycle of the page, resulting in no sense of the page’s POP when the page was closed, resulting in the page’s failure to destroy the controller.

The solution

Use in the article Flutter GetX — the charm of simplicity! The best solution is to listen externally for the life cycle of the page and release it manually. We can release GetxController in the same way when using Flutter_boost. When we integrate Flutter_boost, we add a global declaration cycle listener in the main function:

void main() {
  ///Add a global lifecycle listener class
  PageVisibilityBinding.instance.addGlobalObserver(AppLifecycleObserver());
  runApp(MyApp());
}
Copy the code

Add handlers to the onPagePush and onPagePop methods of the listener class AppLifecycleObserver:

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:get/get_navigation/src/router_report.dart';

///Global lifecycle listening example
class AppLifecycleObserver with GlobalPageVisibilityObserver {
  @override
  void onBackground(Route route) {
    super.onBackground(route);
    print("AppLifecycleObserver - onBackground");
  }

  @override
  void onForeground(Route route) {
    super.onForeground(route);
    print("AppLifecycleObserver - onForground");
  }

  @override
  void onPagePush(Route route) {
    super.onPagePush(route);
    RouterReportManager.reportCurrentRoute(route);
    print("AppLifecycleObserver - onPagePush");
  }

  @override
  void onPagePop(Route route) {
    super.onPagePop(route);
    RouterReportManager.reportRouteDispose(route);
    print("AppLifecycleObserver - onPagePop");
  }

  @override
  void onPageHide(Route route) {
    super.onPageHide(route);
    print("AppLifecycleObserver - onPageHide");
  }

  @override
  void onPageShow(Route route) {
    super.onPageShow(route);
    print("AppLifecycleObserver - onPageShow"); }}Copy the code

Dart: import ‘package:get/get_navigation/ SRC /router_report.dart’; Times has no file: Try changing the Getx version. Handling in page:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'test_one_controller.dart';

class TestOnePage extends GetView<TestOneController> {
  const TestOnePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    TestOneController controller = Get.put(TestOneController());
    return Scaffold(
      body: Center(
        child: GetBuilder<TestOneController>(builder: (controller) {
          return Text("${controller.count.value}"); }),),); }}Copy the code

Note: The controller declaration must be placed in the build method. It cannot be released outside the build method.