How to use PopScope Widget in Flutter with Example

in this video I will show you how to handle system back gesture in your flutter app using pops scope widget class so let me give you an example of when you have to handle system back gesture for example in my emulator you can see that I have an elevated button when I click on the elevated button I will be navigated to a new screen now when I click on the elevated button on the new screen it pops out an alert dialog asking for confirmation if I click on no I will stay on the new page but if I click on yes I will navigate back to the first screen as shown however in Android device there is a system back button outside from the app itself at the bottom left now let's navigate to a new page and when I click on the system back button on bottom left it skip the alert dialogue and navigate back without user confirming sometimes if user are submitting form or transaction killing the state without notifying user could create that user experience so in this video I will show you how to handle system back gesture firstly look for the button that requires user confirmation which in my case is the elevated Buton button in the second page now wrap the elevated button with pop scope widget then set the can po parameter to false this Boolean parameter is true by default when we set it to false it will disable the system back gesture let's try it out in the emulator now we are in the second page p and you can see that when I click on the bottom left button it don't navigate back to the first screen because we set canp Boolean to false now what happens if you doesn't want the system button to be disabled instead you wanted it to show the alert dialog same as the elevated button to do this you have to provide function to the second parameter provided by pop scope class which is on pop invoke so this function returns a did pop Boolean so firstly we check if did pop is true just return if not we will execute the alert dialog function now let's try it out in the emulator so firstly when I click on the elevator button it shows the alert dialogue as expected now when I click on the bottom left back button it shows the alert dialog as well now with this feature you can make sure that user are notified before they leave the screen in conclusion this is how you handle system back navigation in your flutter app using pop scope class if if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 2,750

Keywords: flutter popscope, flutter willpopscope, flutter willpopscope deprecated, flutter pop scope back button, flutter pop scope example

Id: xFq3Ote4w_8

Length: 3min 53sec (233 seconds)

Published: Wed May 01 2024