Managing State in Flutter Pragmatically

Waleed Arshad

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781801072090
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming Mobile Devices
• Index: Computer Science

Explore popular state management techniques in Flutter and implement them in real-world applicationsKey Features• Get to grips with popular approaches for managing your Flutter application state• Think declaratively in order to decide on the most fitting approach for different applications• Learn to implement state management solutions by building a popular use case in the form of a shopping cart appBook DescriptionFlutter is a cross-platform user interface (UI) toolkit that enables developers to create beautiful native applications for mobile, desktop, and the web with a single codebase. State management in Flutter is one of the most crucial and complex topics within Flutter, with a wide array of approaches available that can make it easy to get lost due to information overload. Managing State in Flutter Pragmatically is a definitive guide to starting out with Flutter and learning about state management, helping developers with some experience of state management to choose the most appropriate solutions and techniques to use. The book takes a hands-on approach and begins by covering the basics of Flutter state management before exploring how to build and manipulate a shopping cart app using popular approaches such as BLoC/Cubit, Provider, MobX, and Riverpod. Throughout the book, you'll also learn how to adopt approaches from React such as Redux and all its types. By the end of this Flutter book, you'll have gained a holistic view of all the state management approaches in Flutter, and learned which approach is the best solution for managing state in your app development journey.What you will learn• Understand the core concepts of different state management techniques used in Flutter• Build optimal and performant applications in Flutter• Develop an understanding of which technique to apply in what sort of apps• Build the habit of writing clean state management code• Produce code with techniques from beginner to advanced level for different state management solutions• Use state management techniques to create robust and scalable apps in FlutterWho this book is forThis book is for developers who have already started with their Flutter journey and are now looking to learn optimal state management approaches for app development. The book will also help less experienced Flutter engineers to find the best state management solution to fit their app, along with Flutter engineers who want to learn which state management approach should be taken under what circumstances.

Section 1:The Basics of State Management

In this section, we will explore what a state in Flutter is, what state management is, and why it is so important.

This section comprises the following chapters:

• Chapter 1, States and State Management Overview
• Chapter 2, The Core Building Blocks of State Management

Chapter 1: States and State Management Overview

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

Flutter – a brief introduction

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/).

What is a state?

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.

Importance of a state 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).

What is state management?

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).

Choosing the best technique for...