The backbutton interceptor is not working in the code. i also tried with PopScope, but not working yet. I don’t want to exit the app ,just redirect to previous page. For this what I need? Like do I need to provide ay parent route or something ?
class Checklist extends StatefulWidget {
const Checklist({super.key});
@override
_ChecklistState createState() => _ChecklistState();
}
class _ChecklistState extends State<Checklist> {
@override
void initState() {
super.initState();
Provider.of<checkListProvider>(context, listen: false).loadData();
BackButtonInterceptor.add(_onBackPressed);
}
@override
void dispose() {
BackButtonInterceptor.remove(_onBackPressed);
super.dispose();
}
bool _onBackPressed(bool stopDefaultButtonEvent, RouteInfo info) {
_showExitDialog();
return true;
}
Future<void> _showExitDialog() async {
final shouldPop = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
title: const Text('Confirm Exit'),
content: const Text('Do you want to go back to the previous screen?'),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
GoRouter.of(context).pop(); // Go back to the previous route
},
child: const Text('Yes'),
),
],
),
);
if (shouldPop ?? false) {
GoRouter.of(context).pop();
}
}
@override
Widget build(BuildContext context) {
final pageState = Provider.of<PageState>(context);
final titleProvider = Provider.of<PageTitle>(context);
final title =
titleProvider.title.isNotEmpty ? titleProvider.title : 'Default Title';
final checkProvider = Provider.of<checkListProvider>(context);
return Scaffold(
backgroundColor: Colors.teal[50],
appBar: AppBar(
backgroundColor: Colors.teal[50],
title: Center(child: Text(title)),
leading: IconButton(
icon: const Icon(Icons.chevron_left_outlined),
onPressed: () {
pageState.setRoute('/help-center');
GoRouter.of(context).pop('/help-center');
},
),
),
body: checkProvider.isLoading
? const Center(child: CircularProgressIndicator())
: checkProvider.errorMessage.isNotEmpty
? Center(child: Text(checkProvider.errorMessage))
: ListView(
padding: const EdgeInsets.all(10),
children: [
ExpansionTile(
title: const Text('Completed'),
children: checkProvider.completed
.map((item) => ListTile(
title: Text(item['title']),
subtitle: Text(item['description']),
))
.toList(),
),
ExpansionTile(
title: const Text('Next'),
children: checkProvider.next
.map(
(item) => CheckboxListTile(
checkColor: Colors.teal[500],
checkboxShape: const CircleBorder(),
title: Text(item['title']),
subtitle: Text(item['description']),
value: item['completed'],
onChanged: (val) {
if (val == true) {
checkProvider.toogleComplete(item, 'next');
}
},
),
)
.toList(),
),
ExpansionTile(
title: const Text('Upcoming'),
children: checkProvider.upcoming
.map(
(item) => CheckboxListTile(
checkColor: Colors.teal[500],
checkboxShape: const CircleBorder(),
title: Text(item['title']),
subtitle: Text(item['description']),
value: item['completed'],
onChanged: (val) {
if (val == true) {
checkProvider.toogleComplete(
item, 'upcoming');
}
},
),
)
.toList(),
),
],
),
);
}
}
Here is the code for backbutton interceptor package. Though the leading icon is working, the system or phone’s button is not working
2
Answers
When you use appRouter.go, you will not be able to return, to return you need to navigate with .push/.pushNamed
Navigate:
go back
Use
didPopRoute
to handle back button:& It works fine with
GoRouter
.Exact code:
Official Documentaion:
Flutter > widgets.dart > WidgetsBindingObserver > didPopRoute method
In case of not working:
State
class withWidgetsBindingObserver