This chapter is an introduction to the core concepts of states and state management in Flutter. You will learn the basic important concepts of a state in Flutter and how it affects your application in general. You will also learn about state management, what it is, why it is necessary, and the advantages of using it in your application.

In this chapter, we are going to cover the following main topics:

• What is a state?
• Why is studying states important?
• What is state management?
• Why do we need state management?
• Choosing the best state management technique

This chapter is going to show you why you need to study state management in order to build better, stable, and scalable Flutter applications. By the end of this chapter you will have a grasp of the following:

• The concepts of states and state management in Flutter
• The importance of studying and applying state management in Flutter
• How state and state management are interrelated to each other

Before we jump right into states, state management, and the techniques related to states, we should learn a little about what Flutter is (though this is already this book's pre-requisite).

Flutter is a cross-platform development toolkit that is backed by Google itself. Flutter enables you to create beautiful native applications for iOS, Android, the web, Windows, macOS, Linux, and even embedded systems, with a single code base.

Flutter uses Dart, a language created by Google back in October 2011. Dart is easy to learn as it is based on concepts from both open languages such as JavaScript and object-oriented languages such as C# and Java. Dart can be used for client-side programming, such as mobile and web, as well as for server-side development, such as RESTful services.

You can learn more about Flutter and Dart on Flutter's official website (https://flutter.dev/).

Before diving into creating applications and managing states in Flutter, it is necessary to understand what a state actually is and how it affects our application.

Put simply, the state of an application is a condition or a situation – an instance or a snapshot that shows the condition of your application at a certain point in time.

For example, your application shows two variables, x and y, with values 2 and 3 respectively. Let's call this state State A. Now, if there is a user interaction and the values of your variables x and y change to something else, let's say 4 and 5, that would be a different state of your application, State B.

Figure 1.1 – Two different states of an application

States A and B are two different conditions of your application. Each one of them denotes a certain set of values of the variables that can be used to identify which state the application is currently in.

Another example of a state would be a counter application that shows an increasing counter every time the user presses a plus button.

Figure 1.2 – Two different states in a counter example app

The counter keeps on increasing and the state keeps changing as the user presses the plus button.

To summarize, the state shows your application's current set of values and can be changed based on user interaction.

Now we know what a state is, how it is detected and used within an application, and how it affects your application's UI. To better understand states for a large-scale application, let's see why a state is important in an application.

The state is the core building block of your application. It defines the overall behavior of your app, from the beginning of your user journey to the time the user closes/terminates your application. Every change the user sees is a state of its own, and you need to make sure that your user sees what you intend to show. You also need to make sure that with every possible user interaction, the application shows valid states. It should not show something that you or the user don't expect to see (an exception, a red screen, an unexpected or unhandled error, and so on).

Different states in a large application

Since we now know that every user interaction creates a new state for an application, a complete functional application can have hundreds of states. In order to keep track of and manage every state, it is important to understand what role a state plays inside your application. Here are some examples of states that get updated by user interactions in a simple login page consisting of two text fields and a button:

• The user enters a correct email and password – A new state that navigates the user to some other screen
• The user enters the wrong email and password – A new state showing an error
• The user presses the login button without entering anything – A state that says that the user has to fill in both the required fields
• The user presses the login button with only one filled-in field – A state indicating the field that needs to be filled in
• The internet gets disconnected – A state that shows a pop-up dialog for no internet connection

The preceding example was of one single login page with the three simplest forms of UI components, and you saw how many states were extracted from it. When your application gets bigger, there can be a lot of states to manage. Therefore, studying states and knowing everything about them is as important as building an entire application.

We have seen how important states are and how they help us get the most out of our application. We have also seen the immense importance of states in a larger application with many states. Let's now understand what state management is and how we can manage states in our application through different techniques (the actual point of this book).

State management is simply a technique, or multiple techniques, used to take care of the changes that occur in your application. When your application gets bigger, you need to apply a proper state management approach in order to be able to keep track of every change inside your application and make the application respond to the user accordingly. This can include the following:

• Responding to user interactions
• Keeping track of data throughout the different screens in the application
• Changing data points in the application at one place and handling the response at other points in the app that read that data

This book will show you different techniques of managing states in your Flutter application, ranging from very basic ways, such as setState (pushing changes to the UI through a function call), to advanced approaches, such as BloC (a business logic component, used to decouple the UI from business logic) and provider (a community-favorite technique used widely among a variety of applications).

After finishing this book, you will clearly understand which state management techniques should be used for different kinds of application. It is necessary to be able to figure out the best state management solution for a given kind of application. Remember, there is no one solution that is best for every single application. It is all about choosing the right one for the application you are going to create.

The correct choice of state management solution will enable you to create better, scalable, highly performant, and faster applications with less code mess and better readability.

Using the right approach is going to make your application life cycle easier, as it will enable you to add and update features seamlessly. Also, you will help new developers to understand your code better and adjust with you faster.

In this chapter, we saw that the state is the condition or situation of your application, giving you a certain set of values for variables inside your application that may or may not be reflected on your screen. When an application transitions from one state to another, the set of values is updated, and a new state is formed and is mostly changed by user interaction.

We studied how many states can be formed with or without user interaction in the case of a simple login screen and the importance of state in a large-scale application. There was an overview of what state management is and why choosing a good state management technique is beneficial to the development life cycle.

In the next chapter, we will discuss the most basic forms of state management techniques, mainly setState and InheritedModel. We will also see how these approaches are reflected in code with real running examples.