Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bloc Pattern in Flutter | Kiran Sharma | Gurzu

September 06, 2023

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.


September 06, 2023

More Decks by Gurzu

Other Decks in Programming


  1. 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
  2. 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
  3. 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 ?
  4. 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 ?
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. Gurzu Confidential • Bloc Consumers ◦ It is the combination

    of bloc builder and bloc listeners. Bloc Components
  11. 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: