Folder Structure Overview

Estimated reading: 6 minutes 88 views

This guide explains the folder structure of the FlutKit Dashboard UI Kits project.
Understanding this layout helps you customize the template easily and maintain a clean architecture as your project grows.

Project Structure

Dart

lib/
├── app_router.dart
├── main.dart
├── root_app.dart
├── configs/
├── constants/
├── demo/
├── generated/
├── l10n/
├── providers/
├── theme/
├── utils/
└── widgets/

assets/
├── animations/
├── images/
└── maps/

lib/
├── app_router.dart
├── main.dart
├── root_app.dart
├── configs/
├── constants/
├── demo/
├── generated/
├── l10n/
├── providers/
├── theme/
├── utils/
└── widgets/

assets/
├── animations/
├── images/
└── maps/

1. configs/

This folder contains global configuration files used across the entire project. It includes:

Global App Config
Defines universal settings such as application name, version, description, logo paths, default theme mode, default language, and other high-level metadata.
Sidebar Menu Config
Stores the structure and settings for the sidebar menu, including menu items, icons, routes, grouping, and hierarchy.

These configuration files allow developers to quickly customize the dashboard’s identity and navigation without modifying the core UI logic.

2. constants/

Stores all global constants used throughout the project.

Examples:

Padding values
Text sizes
Sidebar width
Responsive breakpoints
App-wide configuration constants

Useful for keeping the UI consistent across multiple modules.

3. demo/

The demo folder contains all the screens shown in the FlutKit Dashboard UI Kit demo. You can use these screens directly or as a reference for your app development.

Dart

demo/
├── app/
│   └── Contains screens related to the main application structure
│       (layouts, navigation, app shell, and routing examples).
│
├── authentication/
│   └── Contains authentication flow screens such as:
│       login, register, forgot password, reset password,
│       and verification (OTP) pages.
│
├── base_ui/
│   └── Contains basic UI component demo screens including:
│       buttons, typography, colors, icons, spacing,
│       and core layout elements.
│
├── chart/
│   └── Contains data visualization screens such as:
│       line charts, bar charts, pie charts, and analytics views.
│
├── dashboard/
│   └── Contains complete dashboard screens that combine:
│       summary cards, charts, tables, KPIs, and activity widgets.
│
├── form/
│   └── Contains form-related screens including:
│       input fields, validation examples, date & time pickers,
│       dropdowns, and complex form layouts.
│
├── page/
│   └── Contains general-purpose pages such as:
│       profile, settings, error pages (404/500),
│       and informational/static content pages.
│
└── table/
    └── Contains table and data-grid screens including:
        sortable tables, paginated tables,
        searchable and filterable data views.

demo/
├── app/
│   └── Contains screens related to the main application structure
│       (layouts, navigation, app shell, and routing examples).
│
├── authentication/
│   └── Contains authentication flow screens such as:
│       login, register, forgot password, reset password,
│       and verification (OTP) pages.
│
├── base_ui/
│   └── Contains basic UI component demo screens including:
│       buttons, typography, colors, icons, spacing,
│       and core layout elements.
│
├── chart/
│   └── Contains data visualization screens such as:
│       line charts, bar charts, pie charts, and analytics views.
│
├── dashboard/
│   └── Contains complete dashboard screens that combine:
│       summary cards, charts, tables, KPIs, and activity widgets.
│
├── form/
│   └── Contains form-related screens including:
│       input fields, validation examples, date & time pickers,
│       dropdowns, and complex form layouts.
│
├── page/
│   └── Contains general-purpose pages such as:
│       profile, settings, error pages (404/500),
│       and informational/static content pages.
│
└── table/
    └── Contains table and data-grid screens including:
        sortable tables, paginated tables,
        searchable and filterable data views.

4. generated/

Auto-generated files.
In this template, it mainly contains localization output from Flutter’s intl tools.

You should not modify these files manually.

5. l10n/

Localization resources.
Contains the .arb files that store all translatable strings used in the UI.

Example:

Dart

intl_en.arb
intl_id.arb

intl_en.arb
intl_id.arb

6. providers/

FlutKit Dashboard UI Kits use a lightweight and efficient state management approach based on Provider. Several providers are included to handle global UI state and shared application behaviors.

This helps maintain a clean architecture by separating UI, logic, and state updates.

7. theme/

This folder contains all theme-related files responsible for controlling the visual identity of the entire dashboard. It includes:

ThemeData configuration
Custom color schemes (including extended palette themes)
Typography definitions
Spacing, radius, and layout scales
Dark and Light theme configuration

These files give you full control over how the dashboard looks and feels.
Developers can easily adjust colors, fonts, spacing, and appearance rules to match any branding or design system.

8. utils/

Utility classes, helpers, formatters, and shared logic.

9. widgets/

The widgets folder contains reusable UI components that are shared and used across the entire FlutKit Dashboard UI Kit ecosystem.

These widgets are designed to be:

Generic
Configurable
Consistent with the FlutKit design system
Reused by multiple screens and modules

Examples of what this folder typically includes:

Custom buttons
Form controls
Cards and panels
Navigation elements
Dialogs and modals
Status indicators
Common layout helpers

⚠️ Important Note

It is strongly recommended not to modify the files inside this folder.

Reason:

This folder is managed as part of the FlutKit core.
Any changes you make may be overwritten when a new update is applied.
Editing these files can cause:
Merge conflicts
Loss of custom changes
Incompatibility with future versions

✅ Best Practice

If you need customization:

Extend the widget in your own folder, or
Wrap it with a new widget in your project code

Instead of:
❌ Modifying the original widget
Do:
✅ Create a custom widget based on it

This ensures:

Safe upgrades
Maintainability
Compatibility with future FlutKit releases

10. assets/

The assets/ directory stores all static resources used throughout the FlutKit Dashboard UI Kits. These files support the visual presentation, animations, and map-based components across different screens.

11. app_router.dart

The app_router.dart file is responsible for handling all navigation flows in the project using the GoRouter package. This file centralizes route definitions, access rules, and navigation behaviors to ensure a clean and scalable routing architecture. It has key responsibilities:

Define all application routes through GoRouter.
Set the app’s initial route (usually /).
Provide custom error handling using errorPageBuilder.
Register restricted, unrestricted, and public routes based on user authentication state.
Inject UserDataProvider to control route access dynamically.

12. root_app.dart

The entry point of the application.

Responsibilities:

Initializes the app
Loads routing
Loads global configurations
Launches MaterialApp.router

This file replaces the traditional main.dart for improved scalability.

13. main.dart

A minimal launcher that simply calls runApp(RootApp()).

Most logic is intentionally moved to root_app.dart.

Summary

This folder structure is designed for:

Clean architecture
Easy customization
Clear separation between UI, data, and logic
Scalability for large dashboard systems
A consistent structure across all FlutKit Dashboard UI Kits.