https://github.com/uchamod/flutter-bloc-learning
A repository to practice and learn Flutter BLoC state management - transitioning from Provider/Riverpod
https://github.com/uchamod/flutter-bloc-learning
bloc blocpattern cubit dart flutter state-management
Last synced: 2 months ago
JSON representation
A repository to practice and learn Flutter BLoC state management - transitioning from Provider/Riverpod
- Host: GitHub
- URL: https://github.com/uchamod/flutter-bloc-learning
- Owner: uchamod
- Created: 2025-10-21T12:16:34.000Z (6 months ago)
- Default Branch: develop
- Last Pushed: 2025-11-04T20:04:03.000Z (5 months ago)
- Last Synced: 2025-11-04T21:20:46.914Z (5 months ago)
- Topics: bloc, blocpattern, cubit, dart, flutter, state-management
- Language: C++
- Homepage:
- Size: 266 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Flutter BLoC Architecture Example
This repository demonstrates the **BLoC (Business Logic Component)** architecture pattern in Flutter using the official **`flutter_bloc`** package.
It showcases both **Cubit** and **Bloc** implementations to help developers understand the difference between them and how to apply each effectively.
---
## 🧠 Overview
The **BLoC pattern** is a predictable state management solution that separates business logic from the presentation layer.
By organizing your Flutter app using BLoC, you ensure a **scalable**, **maintainable**, and **testable** codebase.
This repository illustrates:
- How **Cubit** provides a simplified way to handle state.
- How **Bloc** adds an event-driven layer for more structured logic handling.
- The key differences, use cases, and advantages of both.
---
## 🧩 Architecture Summary
The app structure follows the **BLoC architecture** pattern:
- **Presentation Layer**: Flutter widgets that rebuild when the state changes.
- **BLoC / Cubit Layer**: Contains the core business logic, transforming user input or events into new application states.
- **Repository Layer**: Handles data fetching, caching, or database access.
- **Data Source Layer**: Connects to APIs, Firebase, or local data sources.
---
## ⚡ Cubit
**Cubit** is a lightweight and straightforward state management solution that emits new states through direct method calls.
It is best suited for simple logic such as counters, toggles, or theme switching.
**Key Characteristics:**
- Simple to implement.
- Minimal boilerplate.
- Direct method calls instead of events.
- Emits new states directly.
**Best For:** Small features and local UI state updates.
---
## ⚙️ Bloc
**Bloc** extends Cubit by introducing the concept of **events**.
Each user interaction or trigger is represented as an event, and the Bloc maps these events to states using event handlers.
**Key Characteristics:**
- Event-driven architecture.
- Clear separation between events and states.
- Scalable for complex features.
- Better suited for handling asynchronous operations such as API calls.
**Best For:** Complex workflows, data fetching, authentication, and form validation.
---
## 🧱 Folder Structure
The repository is organized for clarity and modularity:
This separation makes it easy to see how each approach handles state differently while following the same architectural principles.
---
## 💡 Key Features
- 🔹 Clear separation between business logic and UI
- 🔹 Implementation of both **Cubit** and **Bloc** approaches
- 🔹 Reactive UI updates through state streams
- 🔹 Reusable and testable logic components
- 🔹 Demonstrates event-to-state mapping in Bloc
- 🔹 Easy scalability for large Flutter applications
---
## 🧭 When to Use What
| Use Case | Recommended |
|-----------|--------------|
| Simple state changes | 🟢 **Cubit** |
| Multiple user actions or async flows | 🟣 **Bloc** |
| Beginners learning state management | 🧩 **Start with Cubit** |
| Production-grade apps with complex logic | ⚙️ **Bloc** |
---
## 🧪 Testing & Scalability
Both Cubit and Bloc are fully testable:
- You can test emitted states without UI dependencies.
- The clear logic separation allows integration and unit testing at all levels.
As your app grows, you can easily transition from Cubit to Bloc for more complex workflows without rewriting your entire architecture.
---
## 🚀 Getting Started
1. Clone the repository.
2. Run `flutter pub get` to install dependencies.
3. Open the project in your IDE.
4. Explore the **Cubit** and **Bloc** examples to understand their behavior.
---
## 🧠 Learning Resources
- [Bloc Documentation](https://bloclibrary.dev)
- [Flutter Bloc Package on pub.dev](https://pub.dev/packages/flutter_bloc)
- [Bloc Architecture Overview (bloclibrary.dev)](https://bloclibrary.dev/#/architecture)
---
## 👨💻 Author
**Your Name**
Flutter Developer | Mobile App Architect
🌐 [Portfolio](#) • 💼 [LinkedIn](#) • 🐙 [GitHub](#)
---
## 📝 License
This project is licensed under the **MIT License**.
See the [LICENSE](LICENSE) file for details.
---
### 💬 Final Note
> The BLoC pattern provides structure and predictability to Flutter apps.
> Start simple with **Cubit**, scale up with **Bloc**, and maintain clean, testable code as your project grows.