Clean Architecture with Flutter

Overview

• Building a blog app with Flutter using clean architecture.
• Features include:
  • Signup and login
  • Keeping users logged in
  • Uploading and displaying blogs
  • Reading blogs with calculated reading time
  • Caching for offline access
• Technologies used:
  • Flutter for UI
  • Superbase for backend
  • Bloc and Cubit for state management
  • GetIt for dependency injection
  • Hive for local storage
  • Functional programming principles

Prerequisites

• Basic knowledge of Dart and Flutter.
• Recommended to watch a 20-hour tutorial on the channel.
• Familiarity with Bloc state management or use a state management tool of choice.

Project Setup

1. Create a Flutter project in terminal.
   • Command: flutter create blog_app
2. Open project in Visual Studio Code or IDE of choice.
3. Run the application to ensure setup is correct.

Application Flow

• On app start:
  • Check if user is authenticated:
    • If authenticated, check internet connection:
      • Fetch blogs from Superbase if internet is available.
      • Display blogs from local storage if not.
    • If not authenticated, show login page.

App Structure

• Use flowchart to guide development.

Clean Architecture Components

1. Presentation Layer:

   • UI components (pages, widgets).
   • Bloc for state management.
   • Events and states for Bloc.

2. Domain Layer:

   • Use cases for business logic (e.g., signup, login).
   • Entities to define data structure (e.g., User, Blog).

3. Data Layer:

   • Data sources (remote and local).
   • Repositories handling data fetching and storage.

Implementation

Bloc and Use Cases

• Implement signup and login features via use cases.
• Use Bloc pattern to manage state changes.
• Emit loading states and handle success/failure outcomes.

Error Handling

• Implement error handling following repository pattern.
• Use specific exceptions for better error messages.

Local Storage with Hive

• Use Hive to persist user data and allow offline access.
• Store blogs in Hive and load them when internet is unavailable.

UI Components

• Create blog viewer page to display blog content.
• Implement image picker to allow users to upload blog images.
• Design input forms for blog title and content.
• Use a scrollable view for reading long blogs.

Final Thoughts

• Clean architecture is beneficial for larger apps, maintaining structure and separation of concerns.
• Implement additional features, like editing and deleting blogs, filtering by topics, etc.

Code Refactoring

• Utilize constants for cleaner code and easier updates.
• Ensure proper dependency injection for easy testing and maintenance.

Conclusion

• The tutorial demonstrates clean architecture principles using Flutter.
• Encouraged to explore and build upon the app with new features.