Flutter Clean Architecture - Learn By A Project | Full Beginner's Tutorial

Introduction

In this tutorial, we will explore how to implement Clean Architecture in a Flutter application. Clean Architecture promotes separation of concerns, making it easier to manage, test, and maintain your code. By following this step-by-step guide, you will learn how to structure your Flutter project effectively while building a practical application.

Step 1: Set Up Your Flutter Project

1. Create a New Flutter Project

   • Open your terminal or command prompt.
   • Run the command:

     flutter create flutter_news_app
     

   • Navigate to your project folder:

     cd flutter_news_app
     

2. Add Required Packages

   • Open pubspec.yaml and add the following dependencies:

     dependencies:
       dio: ^4.0.0
       flutter_bloc: ^8.0.0
       sqflite: ^2.0.0
       get_it: ^7.0.0
     

   • Run flutter pub get to install the packages.

3. Create Folder Structure

   • Organize your project directories. Use the following structure:

     /lib
       /data
       /domain
       /presentation
       /main.dart
     

Step 2: Define Entity Classes

1. Create Entity Models
   • In the lib/domain/entities folder, create a file called article.dart and define your Article class:

     class Article {
       final String title;
       final String description;
     
       Article({required this.title, required this.description});
     }
     

Step 3: Create Repository Classes and Models

1. Define Repository Interface

   • Create an interface in lib/domain/repositories/article_repository.dart:

     abstract class ArticleRepository {
       Future<List<Article>> fetchArticles();
     }
     

2. Implement Repository

   • Create a repository class in lib/data/repositories/article_repository_impl.dart that implements the interface.

Step 4: Make API Requests Using Retrofit

1. Set Up Retrofit
   • Create a service class in lib/data/services/article_service.dart to handle API calls using Dio.
   • Define your API methods:

     class ArticleService {
       final Dio dio;
     
       ArticleService(this.dio);
     
       Future<List<Article>> getArticles() async {
         final response = await dio.get('https://api.example.com/articles');
         return (response.data as List)
             .map((article) => Article.fromJson(article))
             .toList();
       }
     }
     

Step 5: Define Use Cases

1. Create Use Cases
   • In lib/domain/use_cases/get_articles.dart, implement the use case for fetching articles:

     class GetArticles {
       final ArticleRepository repository;
     
       GetArticles(this.repository);
     
       Future<List<Article>> execute() {
         return repository.fetchArticles();
       }
     }
     

Step 6: Create Bloc for State Management

1. Set Up Bloc

   • Create a bloc in lib/presentation/bloc/article_bloc.dart for managing article states.

2. Define Events and States

   • Create events like FetchArticles and states like ArticlesLoaded to manage the article fetching process.

Step 7: Implement Dependency Injection

1. Set Up Dependency Injection
   • Use the GetIt package to register your services and repositories in lib/main.dart:

     final getIt = GetIt.instance;
     
     void setup() {
       getIt.registerSingleton<ArticleService>(ArticleService(Dio()));
       getIt.registerSingleton<ArticleRepository>(ArticleRepositoryImpl(getIt<ArticleService>()));
     }
     

Step 8: Display News

1. Build the UI
   • In your main Flutter widget, use BlocBuilder to display articles:

     BlocBuilder<ArticleBloc, ArticleState>(
       builder: (context, state) {
         if (state is ArticlesLoaded) {
           return ListView.builder(
             itemCount: state.articles.length,
             itemBuilder: (context, index) {
               return ListTile(title: Text(state.articles[index].title));
             },
           );
         }
         return CircularProgressIndicator();
       },
     );
     

Step 9: Implement Local Database

1. Set Up SQLite with sqflite
   • Create database helper methods to store and retrieve articles locally.

Step 10: Add Database Methods to Layers

1. Integrate Database with Repository
   • Update your repository implementation to save and retrieve articles from the local database.

Step 11: Save and Remove Articles

1. Implement Save and Remove Logic
   • Add methods in your repository to handle saving and removing articles from the database.

Conclusion

By following these steps, you have successfully implemented Clean Architecture in your Flutter application. You can now manage your code more efficiently, making it easier to test and maintain. Consider exploring additional features or enhancements to further develop your application. Happy coding!