I'm working on a Flutter web PWA that gets installed on Android devices, and I'm running into a frustrating navigation issue with the browser's back button.
The Problem My app has a typical flow: Home → Page1 → Page2 → Dialog. When users navigate through multiple pages and open a dialog, the back button works once to close the dialog, but then it either stops working entirely or causes the PWA to exit unexpectedly instead of going back through the page history.
What Should Happen
Back button closes dialog → back to Page2
Back button again → Page2 to Page1
Back button again → Page1 to Home
Back button again → proper app exit
What Actually Happens
Back button closes dialog → back to Page2 ✅
Back button again → button becomes disabled or PWA exits ❌
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PWA Navigation Issue',
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page1()),
);
},
child: Text('Go to Page 1'),
),
),
);
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Page 1')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2()),
);
},
child: Text('Go to Page 2'),
),
),
);
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Page 2')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Dialog'),
content: Text('This is a dialog'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Close'),
),
],
),
);
},
child: Text('Show Dialog'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => Container(
height: 300,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Bottom Sheet'),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('Close'),
),
],
),
),
),
);
},
child: Text('Show Bottom Sheet'),
),
],
),
),
);
}
}
**
What do I need to change or implement to make the browser back button work properly for multi-level navigation in my Flutter web PWA?**
showDialogfunction