Flutter web: Prevent UI state update on browser window resize

user_11161388 0
Viewed 881

I have a flutter web page with three dropdown buttons which I use to query the database and show some objects to the user, selecting the dropdown value updates the UI as expected and modifying the variable the API needs to make the query.

The problem comes when the user resizes the browser window, that causes the UI to update again and the dropdown values revert to the default ones.

There is no error message or anything, I just want to keep the state when the screen resizes.

Is there a way for me to prevent that state change when the browser window changes its size?

or do I just let the user see that when the screen size changes, the choices made disappear and they have to select them again?

flutter-web flutter
1 Answers

Few options to do that:

Option 1: (recommended best practice) the future variable that you use to retrieve from db should be in initState(). This will prevent re-querying when resizing

   @override void initState() {
      super.initState();
      myFuture = _dbService.get(dropDownValues);
   }

Option 2: add a new bool variable isIntendedRebuild that you can set to true in your setState() after the drop down is updated. then, in your build(), add an if to prevent updating of your object if not intended rebuild. Do not forget to set isIntendedRebuild to false at the end of build.

   @override Widget build(BuildContext context) {
      if (intendedRebuild) {
         ///update the values of your displayed objects , otherwise dont
      }
   }
user_147280300
Related