Bloc Pattern in Flutter | Kiran Sharma | Gurzu

Bloc (Business Logic Components) is a design pattern created by google. It is a state management library for flutter, used to separate UI and business logic.
In this episode of Knowledge ketchup, mobile developer Kiran Sharma talked about Bloc Pattern and its usages.

Transcript

1. Bloc Pattern in Flutter Kiran Sharma
2. 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
3. Gurzu Confidential What is State Management ?
4. 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
5. Gurzu Confidential
6. 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 ?
7. 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 ?
8. Gurzu Confidential 8 Bloc elements:
9. 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
10. 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
11. 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
12. 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
13. 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
14. Gurzu Confidential • Bloc Consumers ◦ It is the combination of bloc builder and bloc listeners. Bloc Components
15. 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:
16. Gurzu Confidential How the folder structure is organized ?
17. Gurzu Confidential Weather Event
18. Gurzu Confidential Weather State
19. Gurzu Confidential Weather Bloc
20. Gurzu Confidential Weather Screen
21. Advantages: • Separation of Concerns • Easy to test • Code reusability
22. Disadvantages • Boilerplate code • Not an option for small projects
23. “ Gurzu Confidential Thank You!! 2 3 Kiran Sharma
24. “ Gurzu Confidential References: 2 4 - Bloc Library: https://bloclibrary.dev/#/