We all know about the flutter life cycle, but developed from an Android, it is not at all suitable for this state of flutter. Fortunately, I haven’t used much to write demos or do small things, and I didn’t pay much attention to them at the beginning. Later, I had to create a small app that had to go live and add some stats, so I added the umeng stats that other people had integrated on pub. Unfortunately, I couldn’t count pages in the app because Umeng counts pages in onResume and onPause, but flutter didn’t have this method. Only initState and Dispose, added in these two places is certainly not accurate, and see the development of umeng plug-in author also said that Android end will be inaccurate statistics. So I started looking for a way to have a well-defined life cycle like Android. View a lot of implementation methods, fortunately, there is a way, so comprehensive way of you to rewrite their own LifecycleState, if wrong, please correct.

lifecycle_state

Github:github.com/tianyu704/l… Pub: pub. Dev/packages/li…

A flutter package similar to Android’s lifecycle. Add an Android-like lifecycle method to Flutter, where LifecycleState applies to normal pages. Just replace the State we used with LifecycleInnerState, which applies to pages in PageView

Getting Started

The importlifecycle_state

lifecycle_state:
    git:
      url: "https://github.com/tianyu704/lifecycle_state.git"
Copy the code

or

Lifecycle_state: ^ 0.0.1Copy the code

MaterialApp addnavigatorObservers: [routeObserver]

import 'package:lifecycle_state/lifecycle_state.dart';

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test', navigatorObservers: [routeObserver], ... ) ; }Copy the code

The routeObserver is defined in lifecycle_state

Use in pages

  1. Direct inheritanceLifecycleState
class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestPageState();
  }
}

class _TestPageState extends LifecycleState<TestPage> {
  PageController _controller;

  @override
  void onCreate() {
    // TODO: implement onCreate
    super.onCreate();
    _controller = PageController();
//    log("onCreate");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement buildWidget
    return Scaffold(
      body: PageView(
        controller: _controller,
        onPageChanged: (index) {
          eventBus.fire(LifecycleInnerEvent(index, "tag"));
        },
        children: <Widget>[
          ItemPage(0, "tag"),
          ItemPage(1, "tag"),
          ItemPage(2, "tag"),
        ],
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) {
          returnSecondPage(); })); })); } @override voidonResume() {
    // TODO: implement onResume
    super.onResume();
    log("onResume");
  }

  @override
  void onPause() {
    // TODO: implement onPause
    super.onPause();
    log("onPause");
  }

  @override
  void onDestroy() {
    // TODO: implement onDestroy
    super.onDestroy();
    log("onDestroy");
  }

  @override
  void onLoadData() {
    // TODO: implement onLoadData
    super.onLoadData();
    log("onLoadData");
  }

  @override
  void onBackground() {
    // TODO: implement onBackground
    super.onBackground();
    log("onBackground");
  }

  @override
  void onForeground() {
    // TODO: implement onForeground
    super.onForeground();
    log("onForeground"); }}Copy the code
  1. If you want to use flutter in PageView, the default flutter is to switch page every time. The old page is destroyed. If your page can do this, you can use LifecycleState directly, but if you don’t want to destroy and rebuild every time, use flutterLifecycleInnerState, but this slightly troublesome is to manually notify the page state changes, which is used here temporarilyevent_busTo communicate, navigate the package inside PageView onPageChanged and calleventBus.fire(LifecycleInnerEvent(index, "tag"));“,” Tag “is used to tag each PageView, avoid a pageView change, notify other PageViews.LifecycleInnerStateTo add theAutomaticKeepAliveClientMixinTo prevent page destruction, don’t add it to your own classes
import 'package:schulte_grid_flutter/src/lifecycle_inner_state.dart'; . PageView( controller: _controller, onPageChanged: (index) { eventBus.fire(LifecycleInnerEvent(index,"tag"));
        },
        children: <Widget>[
          ItemPage(0),
          ItemPage(1),
          ItemPage(2),
        ],
      ),
...
Copy the code
class ItemPage extends StatefulWidget {
  final int index;
  ItemPage(this.index);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return_ItemPageState(); } } class _ItemPageState extends LifecycleInnerState<ItemPage> { @override Widget build(BuildContext context) { // TODO:  implement buildreturn Scaffold(
      body: Center(
        child: Text("${widget.index}"),),); } @override intsetPosition() {
    // TODO: implement setPosition
    return widget.index;
  }

  @override
  void onLoadData() {
    // TODO: implement onLoadData
    super.onLoadData();
    log("onLoadData");
  }

  @override
  void onResume() {
    // TODO: implement onResume
    super.onResume();
    log("onResume");
  }

  @override
  void onPause() {
    // TODO: implement onPause
    super.onPause();
    log("onPause");
  }

  @override
  void onDestroy() {
    // TODO: implement onDestroy
    super.onDestroy();
    log("onDestroy");
  }

  @override
  void onCreate() {
    // TODO: implement onCreate
    super.onCreate();
    log("onCreate");
  }

  @override
  // TODO: implement wa
  //  ntKeepAlive
  bool get wantKeepAlive => true;

  @override
  String setTag() {
    // TODO: implement setTag
    return "tag"; }}Copy the code

Reference:

  1. LifecycleState can be found at github.com/tinyvampire… When jumping to the page that inherits the native State and coming back, the method call will be wrong, and some life cycle methods will not be called
  2. LifecycleInnerState is available at github.com/385841539/f… Part of this he has the base class for a general page life cycle, using a map recorded all pages, and then by judging the current page is the top or second to invoke the corresponding method of life cycle, so you must succeed to the base class, all pages if don’t jump to inherit the base class of page so that method calls is wrong

Combining the advantages and disadvantages of the two, I changed a version by myself. When I want to use LifecycleState or fecycleInnerState, it doesn’t matter if I don’t want to use it, it doesn’t affect the page I use