Bloc: AppLifecycleState

[perryrh0dan]

Hi @felangel,

thank you for this fantastic flutter package :)

I would like to use WidgetsBindingObserver to logout the user whenever the app gets minimized.
I am using a AuthenticationBloc to hold the authentication state. Now i dont know how to get this Bloc inside of the didChangeAppLifecycleState method. Do you have any suggestion for me ?

Best regards
Thomas

[narcodico]

Hi @perryrh0dan 👋

You can achieve that using:

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
       context.bloc<AuthenticationBloc>().add(LoggedOut()); 
    }
  }

Hope that helps 👍

[heshaShawky]

Hi there I was about opening to ask a question more similar to that but for a different approach,

The google policy has a problem with an ad called AdmobInterstitial because the ad will keep working whatever the state of the app is!!

So I need the ad only and only displayed when the app is active.

I tried the following but didn't work :(, it gets only the initial value and couldn't think for how to update the appLifecycleState within the bloc every time the state change without re-initiate the event and reset the below timer

The Ad Bloc

class AdsBloc extends Bloc<AdsEvent, AdsState> {
  AdmobInterstitial interstitialAd;
  int x = 30;

  @override
  AdsState get initialState => AdsInitial();

  void showAd( AppLifecycleState appLifecycleState ) {

    print(appLifecycleState);

    Timer.periodic(Duration(seconds: x), (timer) { 
      interstitialAd = AdmobInterstitial(

        adUnitId: 'ca-app-pub-xxxxx',
        listener: (AdmobAdEvent event, Map<String, dynamic> args) {
          if (event == AdmobAdEvent.loaded) interstitialAd.show();
          if (event == AdmobAdEvent.closed) interstitialAd.dispose();
          if (event == AdmobAdEvent.failedToLoad) {
            print("Error code: ${args['errorCode']}");
          }
        },
      );

      if (appLifecycleState == AppLifecycleState.resumed || appLifecycleState == null) {
        interstitialAd.load();
      } else {
        print('App not loading as app is\'t active ');
      }

      if (x >= 150) {
        x = 30;
      }

      timer.cancel();
      x += 60;
      showAd(appLifecycleState);
    });
  }

  @override
  Stream<AdsState> mapEventToState(
    AdsEvent event,
  ) async* {
    if (event is LaunchAd) {
      showAd(event.appLifecycleState);
    }
  }
}

The App.dart

class _AppState extends State<App> with WidgetsBindingObserver  {
  // ....
  AppLifecycleState appLifecycleState;

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    appLifecycleState = state;
  }

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
       //...
        BlocProvider(lazy: false, create: (_) => AdsBloc()..add(LaunchAd(appLifecycleState)) ),
      ],
      //....
      ),
    );
  }
}

[perryrh0dan]

Hi @RollyPeres

thanks for the fast response :) I am rly new to flutter, so my problem is how to get the context in the didChangeAppLifecycleState method. When i try to use it inside the method it is undefined. I attached my code :)

class App extends StatelessWidget with WidgetsBindingObserver {
  final UserRepository userRepository;

  App({Key key, @required this.userRepository}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addObserver(this);
    return BlocBuilder<ThemeBloc, ThemeState>(builder: (context, state) {
      return _buildWithTheme(context, state);
    });
  }

  Widget _buildWithTheme(BuildContext context, ThemeState state) {
    return MaterialApp(
      title: 'Passline',
      theme: state.themeData,
      home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, state) {
          return _buildWithAuthentication(context, state);
        },
      ),
    );
  }

  Widget _buildWithAuthentication(
      BuildContext context, AuthenticationState state) {
    if (state is Authenticated) {
      return HomePage();
    }
    return LoginPage(userRepository: userRepository);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      //I dont have the context here
    } else if (state == AppLifecycleState.inactive) {
      print("inactive");
    } else if (state == AppLifecycleState.paused) {
    } else if (state == AppLifecycleState.detached) {
      print("detached");
    }
  }
}

[narcodico]

@perryrh0dan you need a StatefulWidget to properly add and remove the observer.

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      context.bloc<AuthenticationBloc>().add(LoggedOut());
    }
  }
}

@heshaShawky you should be able to achieve your desired result just by adding an event which would either result in showing the add or getting rid of it based on the app lifecycle state.

[perryrh0dan]

Hi @RollyPeres

thank you so much for your support. Its working perfect :+1: