State restoration in Flutter

Updated 14 March 2024

Save

Flutter’s state restoration lets you to preserve and restore the state of widgets in your app. This is especially useful when users switch between apps or when your app is closed and then reopened.

state-restoration-in-flutter

State restoration preserves user interactions and progress, ensuring a seamless experience. Users can resume where they left off, even after interruptions or app restarts.

Read about the variety of Flutter App Development Services offered by Mobikul.

Some basics Terminology

Implementation

  1. Provide restorationScopeId property in MaterialApp (“root” in our example).
  2. Extends Stateful widget with RestorationMixin class and implement its members.
  3. Create restorable properties and use it instead of the common Dart’s data type.
  4. Register restorable properties for restoration.

First, go to Developer options and enable the “don’t keep activities” option as shown below:

developer_option_enable

This will make it look like the device doesn’t have enough memory, and the device will kill all activities immediately after you leave it.

Now, add a unique restorationScopeId inside your material app (I have used “root“).

Now, Create Stateful widget (SignUpFormView) and add the RestorationMixin with _SignUpFormViewState as shown below :

RestorableTextEditingController: RestorableTextEditingController used instead of TextEditingController to save the state of text field.

RestorableBool: RestorableBoolean value used instead of bool.

Need to implement the getter restorationId and restoreState function of RestorationMixin :

registerForRestoration: function that register the restorable properties with unique restorationId.

getter restorationId: return the string “signup_page” This value serves as the unique identifier for the state of SignUpFormView.

You can learn about widgets states in flutter.

Lastly, create a simple view having a TextFormField and Checkbox widget inside body of Scaffold.

Access the restorable property values using (.value) and assign to TextFormField controller and Checkbox value property as shown in above example.

Build and run the project.

Output

We have successfully restored the state of application as :

  1. When the application is minimized or moved to the background, the operating system terminates the application.
  2. After clicking on minimized app, the operating system resumes the application.
  3. We just got back the text of the form we have filled out and the checkbox was set to a bool value.

Restoration of route stack

we can restore the routes when we are navigating from one screen to another screen we have to use restorablePush function as :

Elevated button onPressed property we have used Navigator.restorablePush which provide restorable route stack feature.

Navigation and routing in flutter.

Create static method _myRouteBuilder outside the build method of SignUpFormView widget.

Create a simple dart class (SubmitView) to show another screen on navigation by clicking submit button.

Read more about state management in flutter.

Output of Navigation restoration

We have successfully restored the route when the move to background and resume again, we got same route as SubmitView.

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to restore state in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about flutter and android.

Happy Learning ✍️

want to know about SavedState in android.

References

https://hrishikeshpathak.com/blog/flutter-state-restoration/

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home