State Management in Flutter

Understanding State Management in Flutter
Authored by Bhavesh Daswani
https://twitter.com/digitaldaswani

As we know state management is a core challenge in any flutter app. Here I try to explain that before going into state management directly we need to understand some core topics that are crucial for state management. We need to understand the following concept
1. Start thinking declaratively
2. Understand to differentiate between local state vs app state
3. After understanding the core, choose the simple and easy state management strategy first

So by understanding the core concept and choosing simple and easy approach will make state management in Flutter easy

Transcript

1. State Management in Flutter By Bhavesh Daswani
2. My self Bhavesh Daswani. I am a youtuber, blogger and engineer. I am a fullstack developer my tech stack are flutter,react-native, react, nodejs, laravel and i am daily upgrading myself. I am available at following platform Twitter: @digitaldaswani Instagram: @digitaldaswani Facebook: @digitaldaswani Dev.to: @digitaldaswani Medium: @digitaldaswani Blog: https://geekycoders.net Youtube: https://rebrand.ly/geeky-coders-channel
3. Agenda - Start thinking declaratively? - Ephemeral (local) vs app state - List of state management approaches? - My Suggestions to make state management easy - Demo
4. Start thinking declaratively • If you’re coming to Flutter from an imperative framework (such as Android SDK or iOS UIKit), you need to start thinking about app development from a new perspective. • Many assumptions that you might have don’t apply to Flutter. For example, in Flutter it’s okay to rebuild parts of your UI from scratch instead of modifying it. Flutter is fast enough to do that, even on every frame if needed. • Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app
5. Start thinking declaratively • When the state of your app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative changing of the UI itself (like widget.setText)—you change the state, and the UI rebuilds from scratch. • The declarative style of UI programming has many benefits. Remarkably, there is only one code path for any state of the UI. You describe what the UI should look like for any given state, once—and that is it.
6. Why Declarative UI ? • Frameworks like Android and iOS typically use an imperative style of UI programming. This might be the style you’re most familiar with—where you manually construct a full-functioned UI entity, such as a UIView or equivalent, and later mutate it using methods and setters when the UI changes. • In order to lighten the burden on developers from having to program how to transition between various UI states, Flutter, by contrast, lets the developer describe the current UI state and leaves the transitioning to the framework.
7. How to change UI in Declarative Framework? • In the declarative framework, views (such as Flutter’s Widgets) are immutable and are only lightweight “blueprints”. To change the UI, a widget triggers a rebuild on itself (most commonly by calling setState() on StatefulWidgets in Flutter) and constructs a new Widget subtree.
8. Ephemeral vs App State Before going into difference let understand what state is? In the broadest possible sense, The state of an app is everything that exists in memory when the app is running. This includes the app’s assets, all the variables that the Flutter framework keeps about the UI, animation state, textures, fonts, and so on. While this broadest possible definition of state is valid, it’s not very useful for architecting an app. First, you don’t even manage some state (like textures). The framework handles those for you. So a more useful definition of state is “whatever data you need in order to rebuild your UI at any moment in time”. Second, the state that you do manage yourself can be separated into two conceptual types: ephemeral state and app state.
9. Ephemeral vs App State (cont...) Ephemeral State • Ephemeral state (sometimes called UI state or local state) is the state you can neatly contain in a single widget. • Local State Examples are like: ◦ Form input ◦ Form validation ◦ current page in a PageView ◦ current progress of animation ◦ current selected tab in a BottomNavigationBar • Other parts of the widget tree seldom need to access this kind of state. • You use Stateful widget to manage local state.
10. Ephemeral vs App State (cont...) App State • State that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state. • Examples of application state:: ◦ User Login Info ◦ User preferences ◦ The shopping cart in an e-commerce app ◦ Notifications in a social networking app ◦ And much more There are many approach to manage App state we will checkout the option in next slides
11. Ephemeral vs App State (cont...) The following diagram will help you to make understand when to choose which state.
12. List of state management approaches For Local State Management Approach • Stateful Widget ( setState ) For App State Management Approach • InheritedWidget & InheritedModel • Provider & Scoped Model • Redux • BLoC / Rx • MobX
13. My suggestion to make state management easy • First understand the core concept like. ◦ What is state? ◦ Types of state ◦ Understand the state management approaches ◦ I suggest choose the simple state management approach first like Provider package • Understand a single logic that if state is being used in single widget go for local state while if state (data) is being used by multiple widget go for app state • Whenever it comes to any topic not limited to state management be simple, understand the core concept first • My secret that i use to learn any new technology is to understand the core topics so strong that you do not need to google for it. And it is really helpful to me.
14. Provider state management approach In the demo i have chosen provider package as it is easy to understand and it doesn’t use much code. It also uses concepts that are applicable in every other approach. Provider package has three important concept. • ChangeNotifier • ChangeNotifierProvider • Consumer You will see them in action in the demo. I will provide more info on these along the demo
15. Demo Time Architecture of the demo app.
16. References Source code: https://github.com/flutter/samples/tree/master/provider_shopper Flutter Doc: https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro Provider package: https://pub.dev/packages/provider setState: https://flutter.dev/docs/development/ui/interactive Stateful vs stateless widget: https://flutter.dev/docs/development/ui/interactive Documentation for Demo: https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple