Skip to content
BranchesTags

Repository files navigation

🌱 Flutter Clean Architecture Demo

A modern Flutter application built with Clean Architecture and a feature-first project structure.

The application demonstrates scalable Flutter development practices through plant discovery, onboarding, search, premium paywall, theme support, localization, and in-app web content.

📋 Table of Contents

✨ Technical Highlights

  • Clean Architecture principles
  • Feature-first project structure
  • State management with Cubit and BLoC
  • Dependency injection with get_it
  • Declarative navigation with auto_route
  • API integration with dio
  • Functional error handling with dartz
  • JSON serialization with code generation
  • Centralized error and failure management
  • Development and production environment configurations
  • Responsive layouts with flutter_screenutil
  • Light and dark theme support
  • Localization support
  • Reusable UI components
  • Centralized logging
  • In-app WebView support
  • Accessibility with semantic widgets

🌿 Application Features

Plant Discovery

  • Browse more than 3,000 plant categories
  • Search plant categories by name
  • View plant-related questions and care content
  • Open external content inside the application with WebView

User Experience

  • Splash and onboarding flow
  • Get Started and onboarding screens
  • Premium paywall experience
  • Responsive Material Design 3 interface
  • Light and dark themes
  • System theme preference detection
  • Hero animations and custom page transitions
  • Semantic labels for screen-reader accessibility

Navigation

The main application flow is:

Splash
  └── Get Started
       └── Onboarding
            └── Paywall
                 └── Home

The bottom navigation bar contains:

  • Home
  • Diagnose
  • Garden
  • Profile

🏗️ Architecture

The project follows Clean Architecture principles with a feature-first structure.

Each feature is separated into three primary layers:

Domain Layer

Contains application-independent business rules.

  • Entities
  • Use cases
  • Repository interfaces

Data Layer

Handles communication with external and local data sources.

  • API services
  • Data sources
  • Data models
  • Mappers
  • Repository implementations

Presentation Layer

Contains the user interface and presentation logic.

  • Pages
  • Widgets
  • Cubits and BLoCs
  • States
  • UI models

Core Layer

Contains functionality shared across the entire application.

  • Dependency injection
  • Networking
  • Routing
  • Environment configuration
  • Error handling
  • Logging
  • Base use cases
  • Extensions and utilities

State Management

The project uses:

  • flutter_bloc for Cubit and BLoC-based state management
  • equatable for value equality in state classes

🛠️ Tech Stack

Core Dependencies

Package Purpose
Flutter SDK ^3.9.2 Application framework
flutter_bloc ^9.1.1 State management
auto_route ^11.0.0 Declarative routing
dio ^5.9.0 HTTP client
get_it ^9.2.0 Dependency injection
flutter_screenutil ^5.9.0 Responsive layouts
shared_preferences ^2.3.2 Local storage
equatable ^2.0.7 Value equality
dartz ^0.10.1 Functional error handling with Either
google_fonts ^6.3.3 Custom fonts
webview_flutter ^4.13.0 In-app web content

Development Dependencies

Package Purpose
flutter_lints ^6.0.0 Dart and Flutter lint rules
build_runner ^2.4.9 Code generation
auto_route_generator ^10.4.0 Route generation
json_serializable ^6.11.3 JSON serialization generation

📁 Project Structure

lib/
├── core/
│   ├── config/             # Application initialization
│   ├── di/                 # Dependency injection
│   ├── environment/        # Development and production configuration
│   ├── error/              # Exceptions, failures, and error handling
│   ├── network/            # Dio client and network interceptors
│   ├── router/             # AutoRoute configuration
│   ├── usecase/            # Base use case definitions
│   └── utils/              # Logger and utility classes
│
├── features/
│   ├── categories/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   │
│   ├── questions/
│   ├── onboarding/
│   ├── home/
│   ├── paywall/
│   ├── splash/
│   ├── diagnose/
│   ├── garden/
│   └── profile/
│
└── shared/
    ├── resource/           # Colors, typography, values, and assets
    ├── theme/              # Light and dark theme configuration
    └── widgets/            # Reusable widgets

🚀 Getting Started

Prerequisites

Before running the project, make sure the following tools are installed:

  • Flutter SDK ^3.9.2
  • Dart SDK
  • Android Studio or Visual Studio Code
  • Flutter and Dart editor extensions
  • Xcode for iOS development on macOS

Installation

  1. Clone the repository:
git clone https://github.com/senaecelik/flutter_clean_arch_demo_project.git
cd flutter_clean_arch_demo_project
  1. Install the project dependencies:
flutter pub get

  1. Configure the required environment values.

  2. Generate the required source files:

dart run build_runner build --delete-conflicting-outputs
  1. Run the application:
flutter run

🔧 Environment Configuration

The project supports environment-specific configurations.

lib/core/environment/
├── dev_env.dart
└── prod_env.dart

The active configuration contains values such as:

  • API base URL
  • Development-specific settings
  • Production-specific settings

API Base URL

https://dummy-api-jtg6bessta-ey.a.run.app

API Endpoints

GET /getCategoried
GET /getQuestions

Before running the project, verify that the required environment values are configured correctly.

Do not commit private API keys, secrets, or credentials to the repository.

▶️ Running the App

List Available Devices

flutter devices

Run on the Default Device

flutter run

Run on a Specific Device

flutter run -d <device-id>

Build an Android Release

flutter build apk --release

Build an iOS Release

flutter build ios --release

🔨 Code Generation

Code generation is used for:

  • AutoRoute route definitions
  • JSON serialization
  • Generated environment configuration

Generate Files Once

dart run build_runner build --delete-conflicting-outputs

Watch for File Changes

dart run build_runner watch --delete-conflicting-outputs

Delete Generated Files

dart run build_runner clean

🧪 Testing

The testing infrastructure is currently under development.

Planned test coverage includes:

  • Unit tests for use cases and Cubits
  • Repository tests
  • Widget tests for reusable UI components
  • Integration tests for critical application flows

Tests can be executed with:

flutter test

🎨 Design

The user interface is based on the following Figma design:

View the Figma Design

The implementation focuses on:

  • Responsive layouts
  • Reusable components
  • Consistent spacing and typography
  • Light and dark theme compatibility
  • Accessibility
  • Smooth page transitions

📸 Screenshots

Application screenshot 1 Application screenshot 2 Application screenshot 3 Application screenshot 4 Application screenshot 5 Application screenshot 6 Application screenshot 7

🎥 Demo Video

project-video.mov

📝 Code Style

The project follows the official Flutter and Dart style guidelines.

  • flutter_lints is enabled
  • Consistent file and class naming conventions are used
  • Features are separated by responsibility
  • Reusable widgets are preferred over duplicated UI code
  • Comments are used only when additional context is necessary

Run static analysis with:

flutter analyze

Format the project with:

dart format .

👩‍💻 Author

Sena Ercihan Çelik

About

Flutter - Clean Arch Demo Project

Topics

clean-architecture

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages