Flutter Blog App Using BLoC with Clean Architecture

This is a Flutter blog application built using the BLoC pattern and Clean Architecture. The app includes features such as login, signup, displaying blogs, and adding new blogs. It uses Supabase for backend services. FpDart functional programming and GetIt is used for dependency injection.

Features

• User Authentication (Login & Signup)
• Display Blogs
• Add New Blog
• Offline Storage with Hive

UI of App

Sign In

Sign Up

Display BLogs

Add Blogs

Preview Blog Details

Architecture Overview

The app follows the Clean Architecture principles and is divided into three main layers:

1. Presentation Layer: Contains the UI and the state management logic.
2. Domain Layer: Contains the business logic and entities.
3. Data Layer: Contains the data sources, repositories, and models.

Call Flow Diagram

Folder Structure

lib
├── core
│   ├── constants
│   └── widgets
├── features
│   ├── auth
│   │   ├── data
│   │   │   ├── models
│   │   │   ├── repositories
│   │   │   └── datasources
│   │   ├── domain
│   │   │   └── repository
│   │   │   ├── entities
│   │   │   └── usecases
│   │   └── presentation
│   │       ├── blocs
│   │       └── screens
│   │       ├── widgets
│   ├── blog
│   │   ├── data
│   │   │   ├── models
│   │   │   ├── repositories
│   │   │   └── datasources
│   │   ├── domain
│   │   │   └── repository
│   │   │   ├── entities
│   │   │   └── usecases
│   │   └── presentation
│   │       ├── blocs
│   │       └── screens
│   │       ├── widgets
└── init_dependencies.dart
└── main.dart

Getting Started

Prerequisites

• Flutter SDK
• Supabase account

Installation

1. Clone the repository:

   git clone https://github.com/aliasar1/Blog-App-BLoC-Flutter.git
   cd Blog-App-BLoC-Flutter

2. Install dependencies:

   flutter pub get

3. Setup Supabase:

   • Create a new project on Supabase.
   • Get the URL and anonKey from the Supabase dashboard.
   • Replace the placeholders in the code with your Supabase credentials.

4. Run the app:

   flutter run

Dependencies

• flutter_bloc
• equatable
• hive
• hive_flutter
• supabase
• cached_network_image

Resources

• Rivaan Ranawat's Tutorial

Acknowledgments

• Thanks to Rivaan Ranawat for the tutorial on building a blog app with Flutter and Supabase.