Managing State in Flutter Pragmatically E-Book

Waleed Arshad

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 189

Veröffentlichungsjahr: 2021

Beschreibung

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

Leseprobe

Managing State in Flutter Pragmatically

Discover how to adopt the best state management approach for scaling your Flutter app

Waleed Arshad

BIRMINGHAM—MUMBAI

Managing State in Flutter Pragmatically

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Assistant Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Kaustubh Manglurkar

Senior Editor: Keagan Carneiro

Content Development Editor: Adrija Mitra

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Rashika Ba

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Sinhayna Bais

First published: November, 2021

Production reference: 1291021

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-077-5

www.packt.com

To my parents, Raheela Perveen and M. Arshad, and to my wife, Safa.

– Waleed Arshad

Contributors

About the author

Waleed Arshad is a core mobile technologist and a passionate cross-platform developer. He is the first person from Pakistan to become a Google Developer Expert in Flutter. Since graduating from FAST-NUCES Karachi, he has been working in the industry for more than 5 years and is currently working in the Developer Experience team for Flutter at Tendermint Inc. He also holds a master's in computer science from the Institute of Business Administration, Karachi. As a community leader at Flutter Karachi, Pakistan, he has organized substantial physical and online events in Karachi, along with having the honor of speaking at different events and venues across the globe.

About the reviewer

Nishant Srivastava is an Android engineer with experience developing mobile apps/SDKs for the Android platform. He is passionate about working at the intersection of hardware and software, focusing on firmware and audio engineering. He is an open source enthusiast and contributes to the ecosystem in various formats, such as conference talks, blog posts, books, and podcasts.

In the past, he has coauthored Kotlin Coroutines by Tutorial (Raywenderlich Team) and tech-reviewed Seven Mobile Apps in Seven Weeks: Native Apps, Multiple Platforms (Pragmatic Programmer), Beginning Android Game Development (4th Ed., Apress), and Learning Java by Building Android Games (3rd Ed., Packt).

Table of Contents

Preface

Section 1:The Basics of State Management

Chapter 1: States and State Management Overview

Flutter – a brief introduction

What is a state?

Importance of a state in an application

Different states in a large application

What is state management?

Choosing the best technique for your application

Summary

Chapter 2: The Core Building Blocks of State Management

Technical requirements

Managing states within a widget with setState

The counter application example

Widget rebuilding – widget trees

Passing data to another screen – setState example

Updating the first screen's counter value

Section overview – setState

Optional challenge – setState

Inherited widgets – injecting the state at the root

Inherited widgets – updating the counter variable

Section overview – inherited widgets

Inherited models – optimizing inherited widgets

Remember the optional challenge?

Section overview – inherited models

Summary

Section 2:Types, Techniques, and Approaches

Chapter 3: Diving into Advanced State Management Approaches

Technical requirements

Provider – using less boilerplate code than InheritedWidget

Adding a Provider dependency in a sample application

Consuming Provider using the ChangeNotifierProvider class

Section overview – Provider

Riverpod – enhancing Provider

Adding a Riverpod dependency in a sample application

Using the simplest version of Riverpod to update the counter value

Using a custom class as a state in Riverpod

Section overview – Riverpod

BLoC – writing business logic separately

Adding a BLoC dependency in your application

Creating a counter example application using BLoC

Optional challenge – BLoC

Section overview – BLoC

Cubit – simplified BLoC

Creating a counter example application using Cubit

Section overview – Cubit

Summary

Chapter 4: Adopting State Management Approaches from React

Technical requirements

Redux – using unidirectional data flow

Adding a Redux dependency to a sample app

Consuming Redux using StoreProvider in code

Section overview – Redux

MobX – using observables with the fewest lines of code

Adding MobX, Build Runner, and Codegen dependencies to the sample app

Using code generation to create boilerplate code through build runner

MobX – section overview

Summary

Chapter 5: Executing Distinctive Approaches Like GetX, GetIt, and Binder

Technical requirements

GetX – simplified reactions

Adding a GetX dependency in a sample application

Example of a counter application using GetBuilder

Exploring more in GetX

Section overview – GetX

Optional challenge – GetX

GetIt – no BuildContext required

Adding a GetIt dependency in a sample application

Counter example application using GetIt

Section overview – GetIt

Binder – using scopes to separate business logic

Adding a Binder dependency in a sample application

Counter example application using Binder

Section overview – Binder

Summary

Section 3:Code-Level Implementation

Chapter 6: Creating a Shopping Cart Application Using Basic Approaches

Technical requirements

Creating a shopping cart application with setState

Section overview

Optional challenge

Creating a shopping cart application with InheritedWidget

Section overview

Optional challenge

Creating a shopping cart application with InheritedModel

Section overview

Summary

Chapter 7: Manipulating a Shopping Cart Application through BLoC, Provider, and React-Based Approaches

Technical requirements

Creating a shopping cart application with BLoC

Creating a shopping cart application with Cubit

Creating a shopping cart application with Provider

Creating a shopping cart application with Riverpod

Creating a shopping cart application with Redux

Creating a shopping cart application with MobX

Summary

Chapter 8: Using GetX, GetIt, and Binder to Update the Cart Application

Technical requirements

Creating a cart app with GetX

Optional challenge – GetX

Creating a cart app with GetIt

Creating a cart app using Binder

Summary

Chapter 9: Comparative State Management Analysis: When to Use What?

Technical requirements

Revisiting the techniques

setState

InheritedWidget and InheritedModel

Provider

Riverpod

BLoC and Cubit

Redux

MobX

GetX

GetIt

Binder

Mapping different techniques to different application ideas

setState

InheritedWidget/InheritedModel

Provider/Riverpod

BLoC/Cubit

Distinctive approaches

Redux

MobX

Creating a good architecture

Author's choice of state management technique – a hybrid approach

A short overview of state management decision-making

Summary

Other Books You May Enjoy

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 OverviewChapter 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 FlutterThe importance of studying and applying state management in FlutterHow 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 screenThe user enters the wrong email and password – A new state showing an errorThe user presses the login button without entering anything – A state that says that the user has to fill in both the required fieldsThe user presses the login button with only one filled-in field – A state indicating the field that needs to be filled inThe 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 interactionsKeeping track of data throughout the different screens in the applicationChanging 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 your application

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.

Summary