I'm using a modal sheet with a TextEditingController and a TextField to allow the users to make inputs. When the user submints (presses enter on the keyboard), a function is triggered, the data collected and everything works perfectly. But: If the user clicks outside of the modal sheet, it closes without the onsubmit function being triggered. Can I change that somehow?
In short: I want to treat tapping outside of the modal sheet as if the user hits enter/submits.
Thanks!
wrap the model sheet with WillPopScop widget and onpop you can write your function
eg
WillPopScope(
onWillPop: () async {
//enter your function here
return true;
},
child://child);
Related
I need to make a change in my page (changing a bool in setState etc...) when the user presses the back button.
I looked it up and I know people use WillPopScope to override the default "back" action, but in all of the examples they were just popping the page, and I need to do a custom function instead of that, and have no Idea how to do so.
my function looks like this, and I need to run in when the user pressed the back button:
Future<void> backToCats() async{
setState(() {
isLoaded=false;
});
if(isFromSearch){
loadCategories();
}
setState(() {
showingBrands=false;
isLoaded=true;
});
}
You can perform custom logic in the onWillPop argument of a WillPopScope widget. Just make sure to return true or false at the end to indicate whether the page is allowed to pop. WillPopScope will activate for the back button, and other actions that automatically navigate back such as swiping from the side of the screen on iOS.
For example, if you need to set a bool to false in your stateful widget, it would look something like this
WillPopScope(
onWillPop: () async {
setState(() => myBool = false);
return true;
}
child: ...
);
I am showing a popupmenu by calling the showMenu() method inside my custom appbar widget.
I need to be able to detect if user closed the popupmenu in anyway.
I tried using GestureDetector but it only detects taps when the popupmenu is already closed which is not what I need.
body: GestureDetector(
onTap: () => print('Tapped'),
child: MyWidget(),
),
Any ideas on how to solve this problem?
you can look at the PopupMenuButton documentation you will find it has a property called onCancelled you can read about it here
showMenu method returns a value, you should wait for. It returns either null (if menu has been closed in ANYWAY) or any value(if user selected menu button)
final result = await showMenu(...)
// you can detect close event even if user just dismissed menu like this:
if(result==null){...do something}
else{...use result}
I've been building an app that has a back arrow '<-' and cross 'X' in the app bar. Programmatically, I have included various commands, including Navigator.pop(context) and to clear global data stored with a GetX data controller, like so:
onPressed: () {
try {
/// Clear data, so the app is ready to use again
c.updateValue('');
/// Close Screen
Navigator.pop(context);
} catch (e) {
print(
'Error when closing the database input window.');
}
},
In this instance, clearing the value means simply replacing whatever string is stored with an empty string.
Now, this works perfectly when either the back arrow or cross in the app bar are pressed. However, I've noticed on a physical device that when I make use of the phone's back arrow/button, which is outside of the app, whilst it moves the screen, it does not clear any of the data, as per the first statement in my onPressed function above.
My question is, how do I get the same commands to take place when the user makes use of the phone's back button, compared to the app's programmed back button?
Thank you!
Wrap your Scaffold with WillPopScope and execute the same command on the onWillPop like this:
return WillPopScope(
onWillPop: () async{
try {
/// Clear data, so the app is ready to use again
c.updateValue('');
return true; // true allows navigating back
} catch (e) {
print(
'Error when closing the database input window.');
return false; // false prevents navigating back
}
},
child: Scaffold(....),
);
I want add data at all 'pop'
It two case,
Android back key and some button for 'navigator.(context).pop()'
So I used WillPopScope but I can't add data like this
onWillPop: () async {
return Navigator.of(context).pop(myData));
},
this is not working.
How can I add data?
If you call
Navigator.of(context).pop(myData)
in your code, the pop with arguments will be delivered if onWillPop return true.
When popping a page, onWillPop has the duty to day "ok you can pop" or "ok you cannot".
I launch a modal bottom sheet, then use the data that is returned as its future.
var modalFuture = showModalBottomSheet(
// ...
);
modalFuture.then((data) {
// Use data
});
I return data to it from the modal widget with:
Navigator.pop(context, data);
This is working well when completing the modal interaction with a widget I've set up.
I encounter my issue when clicking outside of the modal. Clicking outside of the modal causes the modal to dismiss automatically (with a Navigator.pop(context) call?). I am okay with this closing interaction, but I would like to send data back with it (with a Navigator.pop(context, data) call). Is there anyway to override the implicit pop when clicking outside of a showModalBottomSheet modal?
You can wrap your ModalWidget with WillPopScope. You can see the example below
WillPopScope(
onWillPop: () async {
Navigator.pop(context, data);
return true; // return true if needs to be popped
},
child: ModelWidget(
…
),
);
This will ensure that Navigator.pop is called when auto popped using the back button.