How to handle back button of browser in Flutter Web - flutter

this question had already asked in this link How to configure go back button in Browser for Flutter Web App
and I implement onWillPop, so when user is in A screen and then click the button See Detail I will navigate them to B screen and then.. when user is in B screen and click the back button of browser I will navigate them back to A screen... the first trial is success but when I do it second time I got an error like this
Error: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/navigation/history.dart:288:14
_userProvidedRouteName != null
is not true
in my first screen (A Screen), I have a button like this:
FlatButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (BuildContext ctx) =>
Detail(
value:x[i])));
},
child: Text("See Detail"),
textColor: Colors.white,
color: Colors.blueAccent,
)
and for the Detail Screen (B Screen) I use onWillPop like this
WillPopScope(
onWillPop: () {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (BuildContext ctx) => FirstScreen()));
return Future.value(true);
},
child: Scaffold(
key: _globalKey,
....
is there something that I should add more?

Call Navigator.pop(context); inside the onWillPop of screen B.
Make sure when you navigate from Screen A to Screen B, you should not use Navigator.pushReplacement as it removes ScreenA from the screen stack(not sure if this is the right term)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenB()),
);
Here is an example by flutter.
https://flutter.dev/docs/cookbook/navigation/navigation-basics

Related

how to call another page (class) if user pressed the button? (flutter)

What to put inside onPressed to call another page, for example I want to call class_one() after I press the button, what is the solution for it?
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Text('Kehadiran Anggota'),
)),
You can use the pushNamed function like this:
Navigator.of(context).pushNamed('/yourScreen');
In order for it to work you need to register the route inside MaterialApp like this:
MaterialApp(routes: {
'/': (context) => TelaSplashScreen(),
},)
You can use the code below to navigate between pages, with Navigator.push() you will be able to go next page and back and with Navigator.pushReplacement() it will proceed to next page but loses its capability to go back to previous page.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const MemberAttendancePage(),
),
);

Android Back button closes app for some reason

My app closes when I press the android back button but returns to the back page from the default back button from the app bar. I think the problem is due to providing bloc in navigation
I have navigated like this
IconButton(
onPressed: () {
Navigator.of(context).push(
CreateProfileFormPage.route(
onFormSubmitSuccess: (context) {
Navigator.of(context).pop();
},
),
);
},
icon: const Icon(FlatIcons.add),
),
you need to do is first clear all path before going to screen.
onPressed:(){
clearSession();
//Navigator.popUntil(context, ModalRoute.withName('/'));
Navigator.pop(context,true);// It worked for me instead of above line
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Login()),);
},

Dismiss or pop alert dialog on press of a fire stick remote button

I'm building an app for fire tv/fire stick using flutter.
My requirement: Show a dialog on press of a button in the fire TV remote and hide the dialog when the user presses the back button on the remote.
What I have accomplished: I'm able to show the dialog on the press of a button on the remote.
I need help in dismissing the dialog when the user presses back button on the remote.
What is happening now: When I press back while the dialog is shown, the entire page gets rerouted to the previous page.
I'm guessing it has something to do with the context, not sure how to fix this issue.
_showInfoModal(context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.transparent,
content: Container(
child: Center(
child: Text(widget.message, style: TextStyle(color: Colors.white)),
),
)
);
},
);
}
This is the code I'm using to show the dialog.
Navigator.of(context, rootNavigator: true).pop();
This is how I'm trying to pop the alert dialog.
Can someone please help me out here? TIA.
Try below code hope its works because I also build apk for TV and use below Alert Code
showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Top '),
content: Text('Bottom '),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('Ok'),
),
],
);
},
);
}
So I was able to accomplish this using a workaround.
Having a boolean variable and showing either the dialog or a container with 0 height.
Not a good approach but gets the work done.

flutter carousel image click to open new page

Example this Screen short, Click this Red Banner open new Page.
Any one please share Source code.enter image description here
I don't know if that's what you want but you can do it like this:
return GestureDetector(
onTap: () async {
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => Page(), // The page you want
),
);
},
child: Child(), // The banner
);

Flutter: How can I catch a back button press to exit my app

I am developing an app that mainly just displays information from a web service to the user (info created by their admin). On the Drawer Menu there are 5 screens to display different information.
After the user has logged in, I use Navigator to move between screens by using pushReplacement. Meaning the current screen is always at the bottom of the screen stack. If the user presses the back button on their device, the app exists immediately.
How can I catch this, so I can ask the user if they want to log out, and then display the login screen?
Thanks for any suggestions.
Cheers,
Paul
You can do this with the WillPopScope widget and changing the onWillPop parameter. The example I posted does something similar to what you want as it shows an alert dialog that can determine what will happen next. The FlatButton onPressed code probably isn't exactly what you're looking for and you'll have to handle that according to your implementation This is the example code is from #AironTark answer to this related question.
#override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(...),
onWillPop: () => showDialog<bool>(
context: context,
builder: (c) => AlertDialog(
title: Text('Warning'),
content: Text('Do you really want to exit'),
actions: [
FlatButton(
child: Text('Yes'),
onPressed: () => Navigator.pop(c, true),
),
FlatButton(
child: Text('No'),
onPressed: () => Navigator.pop(c, false),
),
],
),
),
);
}