【Flutter】ライフサイクルをRxDartで管理する

バックグラウンドからの復帰処理を追加したかったので、LifecycleWidgetとライフサイクルを一元管理できるLifecycleServiceを作成しました。

Flutterのライフスタイルを取得するためにはStatefulWidgetを使う必要がありますが、各ページはStatelessWidgetで実装されているため毎度StatefulWidgetを使いたくありません。

なのでLifecycleWidgetでアプリ全体をラップして使用します。

ステートの取得はRxDartを使用して、どこからでもstreamで取得できるようにしています。

この記事の目次

LifecycleService

sink/streamを持つだけのサービスを用意します。

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

class LifecycleService {
  static LifecycleService shared = LifecycleService();

  /// アプリ全体のライフサイクル
  AppLifecycleState lifecycleState;
  final _lifecycleStateSubject = PublishSubject<AppLifecycleState>();

  /// アプリ全体のライフサイクルの通知用Stream
  Stream<AppLifecycleState> get lifecycleState$ =>
      _lifecycleStateSubject.stream;

  /// アプリ全体のライフサイクルの通知用Sink
  Sink<AppLifecycleState> get lifecycleStateSink$ =>
      _lifecycleStateSubject.sink;

  void dispose() {
    _lifecycleStateSubject.close();
  }
}

import 'package:flutter/material.dart';

import 'package:rxdart/rxdart.dart';

class LifecycleService {

static LifecycleService shared = LifecycleService();

/// アプリ全体のライフサイクル

AppLifecycleState lifecycleState;

final _lifecycleStateSubject = PublishSubject<AppLifecycleState>();

/// アプリ全体のライフサイクルの通知用Stream

Stream<AppLifecycleState> get lifecycleState$ =>

_lifecycleStateSubject.stream;

/// アプリ全体のライフサイクルの通知用Sink

Sink<AppLifecycleState> get lifecycleStateSink$ =>

_lifecycleStateSubject.sink;

void dispose() {

_lifecycleStateSubject.close();

}

LifecycleWidget

LifecycleWidgetはStatefulWidgetでできています。

やっていることは単純で、sinkで各ステートをサービスに流しているだけです。

import 'package:flutter/material.dart';
import 'package:app/service/app/lifecycle_service.dart';

/// ライフサイクル用のwidget
class LifecycleWidget extends StatefulWidget {
  final Widget child;

  LifecycleWidget({Key key, this.child}) : super(key: key);

  _LifeCycleWidgetState createState() => _LifeCycleWidgetState();
}

class _LifeCycleWidgetState extends State<LifecycleWidget>
    with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('state = $state');
    //ステートをLifecycleServiceのストリームに流す
    switch (state) {
      case AppLifecycleState.resumed:
        LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.resumed);
        break;
      case AppLifecycleState.inactive:
        LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.inactive);
        break;
      case AppLifecycleState.paused:
        LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.paused);
        break;
      case AppLifecycleState.detached:
        LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.detached);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: widget.child,
    );
  }
}

import 'package:flutter/material.dart';

import 'package:app/service/app/lifecycle_service.dart';

/// ライフサイクル用のwidget

class LifecycleWidget extends StatefulWidget {

final Widget child;

LifecycleWidget({Key key, this.child}) : super(key: key);

_LifeCycleWidgetState createState() => _LifeCycleWidgetState();

}

class _LifeCycleWidgetState extends State<LifecycleWidget>

with WidgetsBindingObserver {

@override

void initState() {

WidgetsBinding.instance.addObserver(this);

super.initState();

}

@override

void dispose() {

WidgetsBinding.instance.removeObserver(this);

super.dispose();

}

@override

void didChangeAppLifecycleState(AppLifecycleState state) {

print('state = $state');

//ステートをLifecycleServiceのストリームに流す

switch (state) {

case AppLifecycleState.resumed:

LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.resumed);

break;

case AppLifecycleState.inactive:

LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.inactive);

break;

case AppLifecycleState.paused:

LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.paused);

break;

case AppLifecycleState.detached:

LifecycleService.shared.lifecycleStateSink$.add(AppLifecycleState.detached);

break;

}

@override

Widget build(BuildContext context) {

return Container(

child: widget.child,

);

}

アプリ全体をLifecycleWidgetでラップする

main.dartでアプリ全体をLifecycleWidgetでラップしてあげます。

import 'package:flutter/material.dart';
import 'package:app/utilities/LifecycleWidget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return LifecycleWidget(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData.dark(),
        home: MainPage(),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:app/utilities/LifecycleWidget.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return LifecycleWidget(

child: MaterialApp(

title: 'Flutter Demo',

theme: ThemeData.dark(),

home: MainPage(),

);

}

各ページでの使用方法

あとは使用したいところでstreamをlistenしてあげるだけです。どこからでも呼べるので便利ですね。

LifecycleService.shared.lifecycleState$.listen((AppLifecycleState state) {
  switch (state) {
    case AppLifecycleState.resumed:
      print('resumed');
      break;
    case AppLifecycleState.inactive:
      print('inactive');
      break;
    case AppLifecycleState.paused:
      print('paused');
      break;
    case AppLifecycleState.detached:
      print('detached');
      break;
  }
});

LifecycleService.shared.lifecycleState$.listen((AppLifecycleState state) {

switch (state) {

case AppLifecycleState.resumed:

print('resumed');

break;

case AppLifecycleState.inactive:

print('inactive');

break;

case AppLifecycleState.paused:

print('paused');

break;

case AppLifecycleState.detached:

print('detached');

break;

}

});