Bloc Pattern in Flutter Kiran Sharma

Gurzu Confidential • State Management • Bloc( Business Logic Component) • Why Bloc ? • Bloc Elements(Events, States , Bloc). • Bloc Components (Bloc Provider, Bloc Builder, Bloc Listeners and Bloc Consumers) • Bloc Example Analogy (Weather App) • Advantages and Disadvantages of using Bloc Agendas

Gurzu Confidential What is State Management ?

Gurzu Confidential • State management refers to the process of managing and controlling the data (state) of an application. • It that ensures the user interface (UI) always reflects the current data and responds appropriately to user interactions. • Effective state management involves making sure this data is organized, updated, and synchronized correctly throughout the application's lifecycle. State Management

Gurzu Confidential

Gurzu Confidential ● A design pattern created by Google. ● State Management library for Flutter ● Used to separate ui and business logic. ● Elements: ○ Events ○ States ○ Bloc 6 What is Bloc ?

Gurzu Confidential ● Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable. ● Know what state our application is in at any point in time. ● Easily test every case to make sure our app is responding appropriately. ● Work as efficiently as possible and reuse components both within our application. ● Develop fast and reactive apps. 7 Why Bloc ?

Gurzu Confidential 8 Bloc elements:

Gurzu Confidential Event ● What is an Event? ○ An event represents a user action or an occurrence that can trigger a change in the application's state. ○ Events are typically simple objects or data structures that hold information about the action that occurred. ● Example: ○ Figure shows a screen, when pressed the increment button it add addIncrementEvent to the bloc and render the state with incremented text to the screen. 9

Gurzu Confidential ● What is a State? ○ A state represents the current condition or snapshot of the application at any given moment. ○ State can be initial, loading, loaded and failure. State

Gurzu Confidential ● Bloc Providers ○ Bloc Provider is a component that provides a bloc instance to its widgets. ○ It's used to inject a Bloc into the widgets, making it available that need access to the Bloc. ○ It serves as like Dependency Injection for bloc. Bloc Components

Gurzu Confidential ● Bloc Builder ○ Bloc builder is a widget that Re-builds the UI for every new state coming from the bloc. ○ It listens to state changes and triggers a rebuild of its subtree whenever the state changes. Bloc Components

Gurzu Confidential ● Bloc Listeners ○ As name suggests, it will listen to any states as bloc builder does. ○ It is used when you need to both listen to state changes and act on them in the same widget. ○ Eg: ■ Showing a snackbar, Navigation to other screen, Showing a dialog. Bloc Components

Gurzu Confidential ● Bloc Consumers ○ It is the combination of bloc builder and bloc listeners. Bloc Components

Gurzu Confidential Weather app using bloc. Elements used: ● Events ○ Fetch weather based on city searched, ● State: ○ WeatherInitial, WeatherLoading, WeatherFetchSuccess, WeatherError, ● Bloc: ○ Capture the events coming from the UI and dispatch the state. Example:

Gurzu Confidential How the folder structure is organized ?

Gurzu Confidential Weather Event

Gurzu Confidential Weather State

Gurzu Confidential Weather Bloc

Gurzu Confidential Weather Screen

Advantages: ● Separation of Concerns ● Easy to test ● Code reusability

Disadvantages ● Boilerplate code ● Not an option for small projects

“ Gurzu Confidential Thank You!! 2 3 Kiran Sharma

“ Gurzu Confidential References: 2 4 - Bloc Library: https://bloclibrary.dev/#/