🚀 Flutter BLoC Interactive Tutorial

Welcome to the Flutter BLoC Interactive Tutorial!

Have you ever struggled to understand how state management really works in Flutter? Reading long articles and copying static code snippets can only take you so far.

📱 Cross-Platform Ready: This project perfectly supports and is optimized for Android, iOS, and Chrome (Web). You can easily learn and explore the concepts by running it directly on any of these platforms!

⚡ Try it now on Android: For ease of setup, you can directly install and test the app on your Android device by downloading the APK here:
📥 Download Android APK (v1.0.0)

This project is a comprehensive, self-contained educational application designed to teach you the BLoC (Business Logic Component) pattern from the ground up, in the most engaging way possible. Instead of just reading about BLoC, you will experience it.

This app allows you to read theoretical concepts, examine syntax-highlighted Dart code, and interact with live, functional widgets on the same screen. You can literally press a button in the app and watch the exact code snippet above it execute in real-time!

• 📚 Progressive Curriculum: We don't throw complex architectures at you on day one. Concepts are taught in a strict, logical order so you never encounter advanced topics before mastering the basics.
• 💻 Native Code Snippets: Dart code is displayed beautifully within the app using a custom syntax highlighter (Dracula theme). No more switching between your browser and your IDE.
• ⚡ Interactive Demos: Every theoretical concept is paired with a live, interactive UI component. Want to see how BlocSelector prevents UI rebuilds? Tap the button in the app and watch the UI selectively ignore updates!
• 🏗️ Real-World Architecture: The tutorial culminates in a fully functional mini-application, complete with an interactive architectural diagram, demonstrating the complete Data -> Domain -> Presentation flow.

The application is structured into 5 deep-dive chapters, accessible via the main navigation drawer. Here is what you will master:

State management can be intimidating. We start simple by breaking down the foundational building blocks of the library.

• Cubit: Learn how to manage state using simple functions. You'll build a live counter and see exactly how emit() works under the hood.
• Bloc: Graduate to the Event-Driven approach. Understand why separating what happened (Events) from how the app responds (State) makes your app incredibly predictable.

Business logic is useless if the user can't see it. Learn how to tie your Blocs and Cubits directly into the Flutter UI widget tree.

• Provider & Builder: Master Dependency Injection (BlocProvider) and learn how to surgically rebuild parts of your UI on state changes using BlocBuilder and the buildWhen property.
• Listener & Consumer: Handling side effects in Flutter (like SnackBars or Navigation) can be messy. Learn how BlocListener and BlocConsumer solve this elegantly without triggering unwanted UI rebuilds.
• Selector: Performance matters! Learn how to use BlocSelector to filter state updates and squeeze maximum performance out of your app.
• Extension Methods: Write cleaner, more readable code using context.read(), context.watch(), and context.select().

Writing a small app is easy. Scaling a large app is hard. Learn how to structure a production-ready application.

• Providers Architecture: Explore the 3-Layer Architecture (Application, Domain, Data). We provide a custom native Flutter diagram that visually explains how your UI talks to your Blocs, how your Blocs talk to your Repositories, and how your Repositories talk to your APIs.

Take your skills from Junior to Senior.

• Modeling State: Discover the architectural tradeoffs between using Subclasses (e.g., StateSuccess, StateFailure) vs. single classes with Enums. Learn which approach to use for infinite scrolling vs standard forms.
• Lint Rules: Learn how to use the bloc_lint package to enforce best practices at compile-time. We provide "Good vs Bad" code examples for rules like avoid_public_properties_on_bloc and close_sinks.

• Weather App: A complete, miniature real-world application built entirely inside the tutorial! It demonstrates the flow from a User typing a city name -> Event dispatched -> Bloc calls WeatherRepository -> Repository fetches data -> Bloc emits states -> UI reacts with progress indicators or data. (Tip: Type "error" in the app's search box to see how BLoC gracefully handles network exceptions!)

Ready to master BLoC? Run this interactive tutorial directly on your machine:

1. Clone the repository:

   git clone <your-repo-url>

2. Install dependencies:

   flutter pub get

3. Run the app on your preferred device (iOS, Android, or Web):

   flutter run

4. Start Learning: Swipe from the left edge of the screen (or tap the hamburger menu) to open the Table of Contents and start your journey from Chapter 1!

This project was inspired by and built to align with the official documentation at bloclibrary.dev.

• 📦 Package: flutter_bloc on pub.dev
• 📖 Official Docs: Bloc Library

This project is licensed under the MIT License - see the LICENSE file for details.

This repository is provided for portfolio and evaluation purposes only.

Commercial use, redistribution, modification, or reproduction without written permission is prohibited.

Developed with ❤️ by Arpit Aswal.