What is State in Flutter?

Jay Tillu
4 min readNov 23, 2022

--

What is State by Jay Tillu

There was a time on the Internet when Static Pages were the only possible thing you can do on the Internet. Some people called it Web 1.0. Where we can just consume the data, like reading information on blogs, taking little news updates, etc. But after the launch of Facebook, now people started to share data on the internet like their photos, videos, comments, likes, etc.

Today no one uses static apps. Everyone wants dynamic apps. Where they can get things done, share posts, watch reels, make payments, etc. So this introduces the concept of State in Flutter. The name can be different in other frameworks but the concept is the same.

What is a State?

We all know Flutter is all about widgets, and Flutter builds widgets based on state. So what is a State? The state is data. The state is information. Flutter uses this data to build the user interface.

We all know Flutter is a declarative framework. This Means Flutter builds its User Interface to reflect the current state of the app. So if the State changes, Flutter will need to rebuild the UI according to the new state.

State is a Data. It is information based on which Flutter will build its UI.

What are the types of States?

In Flutter conceptually State can be divided into two categories:

  1. Ephemeral State (Local State)
  2. App State (Global State)

Ephemeral State

An ephemeral State is a Local State. It works on a Single Widget or Some of the Widgets. We can neatly organize this state in a specific widget. Usually, people avoid using State Management Techniques to handle such local states. We can easily use setState() for this.

An example of an Ephemeral state is the state of the checkbox, Textfield, etc.

App State

App State is a Global State. It is also called an app-level state. Compared to the Ephemeral State, the App State is complex. It is widely spread and used on multiple pages or sometimes in an entire app. We should not organize this State’s code in a specific widget or page. Many State management approaches exist in Flutter to handle the same like GetX, Provider, Riverpod, etc.

Examples of App states are the User’s login status, User payment status, Purchased items by the user, etc.

Why do we need State Management Techniques?

If we want to manage the Local State then it is okay with setState(). But as soon as data gets larger, we need to differentiate our UI with Business Logic. Otherwise after a certain point of time logically it will become impossible to manage the codebase of the application. Also using setState() for every small widget change is the less performant way.

So there are two main reasons to use State Management Technique:

  1. To Separate our Business Logic from UI
  2. To Gain Maximum Possible Performance

Whether you use GetX, Provider, BLoC, or Riverpod, all major State Management Approaches help you in achieving both of these goals. They help you in Code Separation and achieving maximum performance. Below are some major state management approaches that exist in Flutter.

During this series of understanding Flutter, we will move forward with GetX. Check out my publication and profile to get the latest posts.

So, guys, that’s it for State Management. Feel free to tell me if I miss something, I’d love to learn it from you. Till then Keep Loving, Keep Coding. And Just like always I’ll catch you up in the next article.

Remember no teacher, no book, no video tutorial, or no blog can teach you everything. As one said Learning is Journey and Journey never ends. Just collect some data from here and there, read it, learn it, practice it, and try to apply it. Don’t feel hesitant that you can’t do that or you don’t know this concept or that concept. Remember every programmer was passed from the path on which you are walking right now. Remember Every Master was Once a Beginner. Work hard and Give your best.

Learn More about Dart and Flutter

Follow me for more such content.

--

--

Jay Tillu

I am Frontend Web Developer and Hobbyist Blogger. As a Web Developer, I hold expertise in HTML, CSS, JavaScript, and React.