Android Back Button skipping page when using overlay

[flodaniel]

I have two Pages A and B. Page A is the root of my app and when going back from Page A, the app is closed.

Page A uses LoaderOverlay at its root and displays a loading before navigating from Page A to Page B.
When using the android back button on Page B, the app closes instead of navigating back to Page A.
When context.loaderOverlay.show() is not called, this behaviour does not occur. So the bug is not caused by the presence of the LoaderOverlay, but rather by the display of it.

We use the https://pub.dev/packages/flow_builder package for navigation, but I also tried a simple Navigator.push, which also shows the same behaviour.

[rodrigobastosv]

Hi @flodaniel , first of all thanks for using this package and thanks for the detailed issue.

This is a very strange behavior, LoaderOverlay has nothing to do with navigation. Are you using the disableBackButton property set to true or false? I guess this is the only thing closely related to navigation.

Can you provide a small repo with the problem? It will help me a lot debuging this issue.

Thanks very much!

[flodaniel]

Hi @rodrigobastosv ,

thanks for your reply :)

I tried it with both variants but the behaviour did not change sadly.

Will try to create a repo today :)

[flodaniel]

Hi @rodrigobastosv ,

thanks for your reply :)

I tried it with both variants but the behaviour did not change sadly.

Will try to create a repo today :)

[golfziller]

I has same problem

[rodrigobastosv]

Hey guys, can you provide a small sample so i can reproduce this on my side?

[poringe]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:loader_overlay/loader_overlay.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@OverRide
Widget build(BuildContext context) {
return const MaterialApp(
home: PageA(),
);
}
}

class PageA extends StatelessWidget {
const PageA({
Key? key,
}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return LoaderOverlay(
child: Scaffold(
appBar: AppBar(
title: const Text('Page A'),
),
body: Center(
child: Column(
children: [
SizedBox(
width: 200,
child: ElevatedButton(
onPressed: () async {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const PageB()));
},
style: ElevatedButton.styleFrom(
elevation: 5,
primary: Colors.black,
),
child: const Text('Show Page B')),
),
SizedBox(
width: 200,
child: ElevatedButton(
onPressed: () async {
context.loaderOverlay.show();
await Future.delayed(const Duration(seconds: 1))
.whenComplete(() {
context.loaderOverlay.hide();
});
},
style: ElevatedButton.styleFrom(
elevation: 5,
primary: Colors.black,
),
child: const Text('Show LoaderOverlay')),
),
],
)),
),
);
}
}

class PageB extends StatelessWidget {
const PageB({Key? key}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return LoaderOverlay(
child: Scaffold(
appBar: AppBar(
title: const Text('Page B'),
),
body: const Center(
child: Text(
'"Back" and click "Show LoaderOverlay" it not working..'))),
);
}
}

[rodrigobastosv]

Thanks for providing an example i can work on. I will see whats going on

[rodrigobastosv]

The fix to this issue is on the 2.0.10, already on pub.dev.

Thanks very much!

[poringe]

The fix to this issue is on the 2.0.10, already on pub.dev.

Thanks very much!

Hi @rodrigobastosv

after upgrade to 2.0.10 still not showing loaderOverlay on example above

[rodrigobastosv]

Hey @poringe , will see again if i forgot something. Maybe i'll create a repo with the code so you can take a look.

Will reopen this issue and give you some feedback soon

[rodrigobastosv]

I can confirm the issue is still hapening @poringe . Thanks for pointing it. Give me some days to figure out whats going on

[flodaniel]

Hey @rodrigobastosv do you have a plan why this is still happening? I would love to use the package!

[flodaniel]

@rodrigobastosv I just read throw the sample code and it is not what my issue is about. I have a navigation issue, whereas @poringe has a display problem.

[rodrigobastosv]

Hey, @flodaniel i was trying to debug this based on the sample code @poringe provided. Can you provide a sample code reproducing your error. I would love to see whats going on

[flodaniel]

Hey @rodrigobastosv,
I tried to reproduce it today but failed in a smaller sample app.
We use the flow_builder package to handle navigation and what i noticed is that usually the android back button triggers a call of the call onGeneratePages, which is required for the back navigation to work.
As soon as we call context.loaderOverlay.show() + context.loaderOverlay.hide() the back button no longer triggers a call to the onGeneratePages. Is is possible that you override an existing back button interceptor or similar?

Edit: Indeed it is only the call to context.loaderOverlay.show() that causes this behaviour. If i just call hide(), it ofc does nothing, but the back button keeps working

[flodaniel]

I am now working on finding the root cause and it appears to be the adding of the back button interceptor in loader_overlay.dart:

 if (isLoading) {
              BackButtonInterceptor.add(myInterceptor);
            } 

Interesting enough this interceptor is never called when I try to debug it.
I will try to find a solution.

[rodrigobastosv]

Thanks for these informations @flodaniel . Im not used to flow_builder, but i will try to create an example using it so i can reproduce the problem

[flodaniel]

the flow_builder uses this implementation i think to work with navigation events. i would not be surprised if there can be some conflicts here.
@felangel is the maintener of that project and could probably shine more light on how flow_builder handles the back button

[flodaniel]

@rodrigobastosv i opened a new ticket here: marcglasberg/back_button_interceptor#23

[rodrigobastosv]

Great @flodaniel , i'll follow this ticket too