This question already has answers here:
Detect if the user leaves the current page in Flutter?
(6 answers)
Closed 1 year ago.
I want to call a function or get notified when a user leaves the current screen whether he/she navigates back i.e pop the screen or navigate forward in the app.
You need to implement a route observer.
First you need to define an observer :
final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();
then you need to add the observer to your material app :
MaterialApp(
navigatorObservers: [routeObserver], ...
Ok. Now when you create a screen, you can add RouteAware to your state. You will need to subscribe to the observer, and dispose it as well. Therefore you need a stateful widget. Let's say you have a screen called MyScreen, it would look like this :
class MyScreen extends StatefulWidget {
#override
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> with RouteAware{
#override
void didChangeDependencies() {
routeObserver.subscribe(this, ModalRoute.of(context));
super.didChangeDependencies();
}
#override
void dispose() {
routeObserver.unsubscribe(this);
super.dispose();
} ...
Great! Now you have access to these extra events such as :
#override
void didPopNext() {
super.didPopNext();
}
#override
void didPush() {
super.didPush();
}
#override
void didPushNext() {
super.didPushNext();
}
#override
void didPop() {
super.didPop();
}
Let me know if something was unclear.
you can use dispose() lifecycle function
quote from API
dispose method
Called when this object is removed from the tree permanently.
for example i'm using it to unsubscribe a Timer when user leaves the screen
example:
#override
void dispose() {
super.dispose();
timer.cancel();
}
Related
I want to add a Listener when the widget/state is visible and remove myself from the Listener when I leave the route.
But if the user clicks on the back button and returns to the current widget/state, I want to do the same thing again.
Currently initState, didChangeDependencies, didUpdateWidget and build are NOT called when the user clicks back from the next page, therefore I cannot detect when the user is returning and the widget was loaded from cache.
After much poking around the API, I've discovered that ModalRoute and RouteObserver is what I want.
https://api.flutter.dev/flutter/widgets/ModalRoute-class.html
https://api.flutter.dev/flutter/widgets/RouteObserver-class.html
If I just want to check if the current route is active I can call isCurrent on ModalRoute.of(context):
void onNetworkData(String data) {
if (ModalRoute.of(context).isCurrent) {
setState(() => list = data);
}
}
If I want to listen to route load/unload, I just create it and serve it up the hood with Provider like this:
class HomePage extends StatelessWidget {
final spy = RouteObserver<ModalRoute<void>>();
build(BuildContext context) {
return Provider<RouteObserver<ModalRoute<void>>>.value(
value: spy,
child: MaterialApp(
navigatorObservers: [spy],
),
);
}
}
Then somewhere in another widget:
class _AboutPageState extends State<AboutPage> with RouteAware {
RouteObserver<ModalRoute<void>>? spy;
void didChangeDependencies() {
super.didChangeDependencies();
spy = context.read<RouteObserver<ModalRoute<void>>>();
spy.subscribe(this, ModelRoute.of(context)!);
}
void dispose() {
spy.unsubscribe(this);
super.dispose();
}
void didPush() => attachListeners();
void didPopNext() => attachListeners();
void didPop() => removeListeners();
void didPushNext() => removeListeners();
attachListeners() {
}
removeListeners() {
}
}
I am using Flutter with hooks and I am trying to get the App Life Cycle State. I followed documentation and created new hook (code shown below) which works ok for all situations with one exception. When the application state becomes "paused", the hook does not return the value back to the widget. I am not clear what to do at this point. Someone suggested using Isolates but I don't see how that can help. Updating App Life Cycle is not compute expensive.
Please let me know what else I could do make this work.
Thanks
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
AppLifecycleState useAppLifecycleState() {
return use(const _LifeCycleState());
}
class _LifeCycleState extends Hook<AppLifecycleState> {
const _LifeCycleState();
#override
__LifeCycleState createState() => __LifeCycleState();
}
class __LifeCycleState extends HookState<AppLifecycleState, _LifeCycleState>
with WidgetsBindingObserver {
AppLifecycleState _state;
#override
void initHook() {
super.initHook();
WidgetsBinding.instance.addObserver(this);
}
#override
void dispose() {
super.dispose();
WidgetsBinding.instance.removeObserver(this);
}
#override
AppLifecycleState build(BuildContext context) {
return _state;
}
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(() {
_state = state;
});
super.didChangeAppLifecycleState(state);
}
}
Thanks for your help.
In Flutter,I want to go back to the page I left the app from. But when I try to back, it always navigates to LoginPage. For example,I have 3 page.LoginPage,WorkoutPage,ProgressPage.Login page is my launcher. When I am on ProgressPage, I leave the app. But when I resume,it navigates Login Page.I used this code in login page.
Login Page
class ProgressTabState extends State with WidgetsBindingObserver{
AppLifecycleState state;
#override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addObserver(this);
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
WidgetsBinding.instance.removeObserver(this);
}
#override
void didChangeAppLifecycleState(AppLifecycleState appLifecycleState) {
// TODO: implement didChangeAppLifecycleState
super.didChangeAppLifecycleState(state);
state = appLifecycleState;
}
in login page I use this code to navigate to MainTab.
Navigator.push(
context,
MaterialPageRoute(
builder: (_) {
return MainTabs();
},
),
);
in Main tabs I have Tabbarviews with two page. Workoutpage and ProgressPage. This is Workout Page.
class WorkoutTabState extends State <WorkoutTab> {
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body:Text("Workout Page"),
);
}
Progress Page
class ProgressTabState extends State with WidgetsBindingObserver{
AppLifecycleState state;
#override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addObserver(this);
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
WidgetsBinding.instance.removeObserver(this);
}
#override
void didChangeAppLifecycleState(AppLifecycleState appLifecycleState) {
// TODO: implement didChangeAppLifecycleState
super.didChangeAppLifecycleState(state);
state = appLifecycleState;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body:Text("Progress Page"));
}}
In the login page dont use Navigator.push instead use Navigator.of(context).pushNamedAndRemoveUntil
The difference is Navigator.push will put login page as the first page so it will alway fall back to login page, after successful login you dont want that, you need to remove the login page from the routes stack, by using Navigator.of(context).pushNamedAndRemoveUntil, now when navigating between main and progress use Navigator.push
That will make the main page as the first route to fallbck to
Please read about it heare
https://api.flutter.dev/flutter/widgets/NavigatorState/pushAndRemoveUntil.html
I am trying to trigger an event after the app is open for ten minutes. Is there an easy way to do this? I imagine I need to start a timer when the app is first built, but then be able to cancel or pause that timer if the user navigates away from the app somehow.
I have found the screen state library, but that library only listens for the screen turning off and on, and not for events like navigating home or to another app. I'm familiar with WillPopScope, and related to that I found back button interceptor, but my understanding is that only intercepts when the user presses the back button, and not if the user presses home or switches to another app.
Is there some central way for listening to anything that will close or navigate away from the app, or a combination of things to listen to?
Start a Timer when your main method runs:
import 'dart:async';
void main() {
Timer(Duration(minutes: 10), () {
// Handle the event
});
runApp(MyApp());
}
If you want to be able to control the timer, set it up in your root widget and have that widget listen to lifecycle events:
class MyApp extends StatefulWidget {
...
}
class MyAppState extends State<MyApp> with WidgetsBindingObserver {
static const _appTimerDuration = const Duration(minutes: 10);
Timer appTimer;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
appTimer = Timer(_appTimerDuration, _timerElapsed);
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
appTimer?.cancel();
super.dispose();
}
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
appTimer = Timer(_appTimerDuration, _timerElapsed);
} else {
appTimer?.cancel();
}
}
void _timerElapsed() {
// Handle the event
}
...
}
I'm trying to share same bloc across two routes.
But when I come back from second route the bloc get automatically disposed so in the first route I find myself with all the stream closed.
For example this is the first route (HomePage) where I instantiate the bloc, download a list from api and show it in the build method.
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
GroupsBloc _groupBloc;
#override
void initState() {
super.initState();
}
#override
void didChangeDependencies(){
super.didChangeDependencies();
_groupBloc = GroupsBloc();
_groupBloc.getAll();
}
#override
void dispose(){
_groupBloc.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
...
}
}
Then I navigate to a second screen where I can add an item to the list.
_onAddGroupPress(){
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => BlocProvider<GroupsBloc>(bloc: _groupBloc, child: GroupPage()),
fullscreenDialog: true
),
);
}
In the second screen I retrieve the bloc and I use it to add an item, then I go back to Home Page.
class GroupPage extends StatefulWidget {
#override
_GroupPageState createState() => _GroupPageState();
}
class _GroupPageState extends State<GroupPage> {
FormBloc _formBloc; //another bloc
GroupsBloc _groupBloc;
#override
void initState(){
super.initState();
}
#override
void didChangeDependencies(){
super.didChangeDependencies();
_formBloc = FormBloc();
_groupBloc = BlocProvider.of<GroupsBloc>(context); //retrieve of the bloc
}
#override
void dispose() {
_formBloc?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
...
}
In the dispose method of the second screen I dispose only _formBloc bloc but _groupBloc gets disposed too, so when I come back in the first page I found myself with _groupBloc disposed and all it's stream closes.
I tought of passing the bloc to the second screen as a props but I don't know if it's the right way to do this.
It obviously depends on the scope of your Bloc, but there is nothing preventing you from sharing the same instance throughout your whole app.
ie. simply wrap your whole MaterialApp inside BlocProvider<GroupsBloc>(bloc: _groupBloc, child: MaterialApp( ... ))
if "groups" are not global to your app, you should probably just pass the bloc along to the second widget.