🚀 Flutter FSD Counter

A Flutter counter application built with Feature-Sliced Design architecture. This example project demonstrates modern Flutter development patterns with Riverpod state management.

📋 Project Overview

Flutter FSD Counter is a demo application that applies Feature-Sliced Design (FSD) architecture principles to the Flutter environment. It provides a scalable and maintainable codebase through hierarchical structure and feature-centric modularization.

✨ Key Features

• 🎯 FSD Architecture: Organized code with systematic 6-layer structure
• 🔥 Riverpod State Management: Modern and safe state management pattern
• 💡 Automatic Navigation: Smart routing based on counter state
• 🛡️ Type Safety: Immutable models and pattern matching with Freezed
• 📱 Material Design 3: Latest design system implementation
• 🧪 Code Generation: Automated code generation with build_runner

🛠️ Tech Stack

📦 Frontend

• Flutter SDK: >=3.5.0 <4.0.0
• Dart: Modern object-oriented language
• Material Design 3: Google's latest design system

🔧 Core Libraries

• riverpod: - State management
• flutter_riverpod: - Riverpod integration for Flutter
• go_router: - Declarative routing
• freezed: - Immutable class generation
• json_annotation: - JSON serialization

⚙️ DevOps & Tools

• build_runner: - Code generation tool
• freezed_annotation: - Freezed annotations
• json_serializable: - JSON serialization generation
• flutter_lints: - Code quality tools

🏗️ Project Structure

lib/
├── app/                    # App layer - Global configuration
│   ├── router/            # GoRouter navigation setup
│   └── theme/             # Material Design theme
├── entities/              # Entities layer - Business models
│   └── counter/           # Counter entity
│       ├── api/           # API interfaces
│       ├── model/         # Freezed models
│       └── providers/     # State providers
├── features/              # Features layer - Business features
│   ├── increment/         # Increment feature
│   ├── decrement/         # Decrement feature
│   ├── reset/             # Reset feature
│   ├── display/           # Display feature
│   ├── start/             # Start feature
│   └── stop/              # Stop feature
├── pages/                 # Pages layer - Route pages
│   ├── home/              # Home page
│   └── counter/           # Counter page
├── widgets/               # Widgets layer - Reusable UI
│   ├── controller/        # Composite controllers
│   └── app_bars/          # App bar components
└── shared/                # Shared layer - Common resources
    ├── providers/         # Global providers
    └── ui/                # Common UI components

🚀 Getting Started

📋 Prerequisites

• Flutter SDK: 3.5.0 or higher
• Dart SDK: 3.5.0 or higher
• IDE: VS Code or Android Studio recommended

📦 Installation

# Clone the repository
git clone <repository-url>
cd flutter_fsd_counter

# Install dependencies
flutter pub get

# Generate code (Freezed models)
flutter packages pub run build_runner build --delete-conflicting-outputs

🔧 Environment Setup

Check Flutter installation status:

flutter doctor

Check available devices:

flutter devices

▶️ Running the App

# Run in development mode
flutter run

# Run in release mode
flutter run --release

# Run web version
flutter run -d web

# Run on specific device
flutter run -d <device-id>

📱 Usage

🏠 Home Screen

• The home screen is displayed when the app starts
• Press the "Start Counter" button to navigate to the counter screen

🔢 Counter Screen

• + button: Increment counter value
• - button: Decrement counter value
• Reset button: Reset counter to 0
• Stop button: Return to home screen

🔄 State-Based Navigation

Screens automatically transition based on counter state (CounterStatus):

• stopped: Displays home screen
• running: Displays counter screen

🏛️ FSD Architecture Guide

Layer Responsibilities

1. App: Global configuration (router, theme)
2. Entities: Business entities and APIs
3. Features: Independent business features
4. Pages: Route-level page composition
5. Widgets: Reusable UI components
6. Shared: Common utilities and resources

Dependency Rules

• Upper layers depend only on lower layers
• No direct dependencies between features (via Entities/Shared)
• Clean interfaces through index.dart files

🧪 Testing

# Run all tests
flutter test

# Run specific test file
flutter test test/widget_test.dart

# Run tests with coverage
flutter test --coverage

🔧 Development Tools

Code Generation

# One-time build
flutter packages pub run build_runner build

# Watch mode for file changes
flutter packages pub run build_runner watch

# Build with conflict resolution
flutter packages pub run build_runner build --delete-conflicting-outputs

Code Analysis

# Run static analysis
flutter analyze

# Check dependency tree
flutter pub deps

# Update dependencies
flutter pub upgrade

Build

# Build Android APK
flutter build apk

# Build iOS app (macOS only)
flutter build ios

# Build web app
flutter build web

🚀 Deployment

Android

# Build APK
flutter build apk --release

# Build App Bundle (recommended)
flutter build appbundle --release

iOS

# Build iOS app
flutter build ios --release

Web

# Build web app
flutter build web --release

🤝 Contributing

1. 🍴 Fork the Project
2. 🌟 Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. 💾 Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. 📤 Push to the Branch (git push origin feature/AmazingFeature)
5. 🔍 Open a Pull Request

Coding Conventions

• Follow FSD architecture principles
• Use Riverpod state management patterns
• Utilize Freezed models
• Define interfaces through index.dart files
• Adhere to Flutter lints rules

📜 License

This project is distributed under the MIT License.

👥 Author

Hardy - Flutter Developer

🙏 Acknowledgments

• Feature-Sliced Design community for architecture guidelines
• Riverpod team for excellent state management solution
• Flutter team for continuous framework improvements

📞 Contact

For questions or suggestions about the project, please create an issue.

🔗 Useful Links

• Feature-Sliced Design Official Documentation
• Riverpod Official Documentation
• Flutter Official Documentation
• Freezed Package
• GoRouter Package

---

⭐ If you find this project useful, please give it a star! ⭐