FlutterDevKit

FlutterDevKit is a modular, scalable toolkit for Flutter application development. It is designed using Atomic Design principles and emphasizes reusability, maintainability, and clarity.

Project Structure

The project is organized into several key directories to separate concerns and facilitate scalability:

FlutterDevKit/
├── packages/
│   ├── ui_components/       # Contains reusable UI components
│   │   ├── atoms/           # Basic UI building blocks
│   │   ├── molecules/       # Small combinations of atoms
│   │   ├── organisms/       # Larger reusable UI components
│   │   ├── templates/       # Page-level layouts
│   │   ├── theme/           # Shared styling and themes
│   │   └── example/         # Example app demonstrating component usage
│   ├── logic/               # Reusable logic-based modules
│   │   ├── auth/            # Authentication logic (e.g., services, providers)
│   │   ├── state/           # State management utilities (e.g., BLoC, Riverpod)
│   │   ├── api/             # API clients and networking logic
│   │   └── utilities/       # General-purpose utilities and extensions
│   ├── feature_modules/     # Self-contained feature modules
│   │   ├── feature_a/       # Example feature (e.g., profile)
│   │   │   ├── models/      # Data models for the feature
│   │   │   ├── views/       # Screens and widgets for the feature
│   │   │   ├── controllers/ # Controllers or state management for the feature
│   │   │   └── services/    # Feature-specific business logic
│   │   ├── feature_b/       # Another feature (e.g., settings)
│   │   └── ...
│   └── shared/              # Shared resources across packages
│       ├── constants/       # Shared constants (e.g., route names, keys)
│       ├── localization/    # i18n files for translations
│       └── analytics/       # Analytics tracking utilities
├── melos.yaml               # Melos configuration file
└── README.md                # Documentation for the monorepo

---

Atomic Design Principles

Atomic Design organizes UI components into a hierarchy to promote modularity and reusability. Each level builds upon the one before it.

1. Atoms

Atoms are the smallest UI components. They are basic building blocks and do not depend on other components.

Examples:

• Buttons (CustomButton)
• Text elements (CustomText)
• Icons (AppIcon)

File location: packages/ui_components/atoms/

Example Code:

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({
    Key? key,
    required this.label,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

---

2. Molecules

Molecules are small combinations of atoms working together to form more complex components. They are still relatively simple but represent meaningful UI elements.

Examples:

• Input fields with labels (LabeledInputField)
• Form elements (LoginForm)

File location: packages/ui_components/molecules/

Example Code:

import 'package:flutter/material.dart';

import '../atoms/custom_button.dart';

class LabeledInputField extends StatelessWidget {
  final String label;
  final TextEditingController controller;

  const LabeledInputField({
    Key? key,
    required this.label,
    required this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label),
        TextField(controller: controller),
        SizedBox(height: 8),
        CustomButton(
          label: "Submit",
          onPressed: () => print(controller.text),
        ),
      ],
    );
  }
}

---

3. Organisms

Organisms are larger UI components that combine multiple molecules and/or atoms. They represent reusable sections of a screen.

Examples:

• Navigation bars
• Login forms
• Cards with content and actions

File location: packages/ui_components/organisms/

Example Code:

import 'package:flutter/material.dart';

import '../molecules/labeled_input_field.dart';

class LoginForm extends StatelessWidget {
  final TextEditingController emailController;
  final TextEditingController passwordController;

  const LoginForm({
    Key? key,
    required this.emailController,
    required this.passwordController,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LabeledInputField(label: "Email", controller: emailController),
        LabeledInputField(label: "Password", controller: passwordController),
      ],
    );
  }
}

---

4. Templates

Templates define the layout of a screen. They are page-level components that use organisms, molecules, and atoms to create consistent layouts.

Examples:

• Dashboard layout
• Profile screen layout

File location: packages/ui_components/templates/

---

5. Features

Features are self-contained modules that implement specific functionality. They include:

• Models: Data structures for the feature.
• Views: Screens and UI components specific to the feature.
• Controllers: State management or business logic.
• Services: Feature-specific APIs or data handling.

Examples:

• feature_a/: User profile feature.
• feature_b/: Settings feature.

File location: packages/feature_modules/<feature_name>/

---

6. Shared Resources

Shared resources are utilities or configurations used across multiple features or UI components.

Examples:

• Constants (packages/shared/constants/)
• Localization files (packages/shared/localization/)
• Analytics tracking (packages/shared/analytics/)

---

Contribution Guidelines

1. Follow the Atomic Design principles when creating UI components:
   • Place new components in the correct directory (atoms, molecules, etc.).
   • Ensure components are reusable and modular.
2. For logic and features:
   • Keep code self-contained and adhere to clean architecture principles.
3. Test your code:
   • Add unit tests for new logic modules.
   • Use example apps to verify UI components.
4. Commit changes with clear messages:
   • Use the format: [component/feature] Description.

---

Getting Started

1. Clone the repository:

   git clone https://github.com/VooStack/FlutterDevKit.git
   cd FlutterDevKit

2. Install dependencies:

   melos bootstrap

3. Run the example app to see components in action:

   flutter run

---

License

This project is licensed under the MIT License.