Working with Ready-Made Screens

Estimated reading: 6 minutes 13 views

One of the biggest advantages of FlutKit is the large collection of ready-made screens available inside the lib/demo directory.

These screens are not intended to be used only as demos. They are designed to serve as starting points for real-world applications, helping developers accelerate development and avoid building common features from scratch.

Directory Structure

Dart

lib/
└── demo/
    ├── app/
    ├── authentication/
    ├── dashboard/
    └── page/

lib/
└── demo/
    ├── app/
    ├── authentication/
    ├── dashboard/
    └── page/

Folder	Description
`app`	Complete application modules such as Chat, Calendar, Email, Projects, Tickets, Contacts, etc.
`authentication`	Login, Register, Forgot Password, Lock Screen, OTP Verification, and other authentication-related screens.
`dashboard`	Dashboard layouts and analytics screens.
`page`	Generic pages such as Profile, Settings, Pricing, FAQ, Error Pages, and more.

Understanding Feature Structure

Most application modules inside FlutKit follow a consistent structure to improve maintainability and make customization easier.

Example:

Dart

project/
├── dialogs/
├── widgets/
├── project_create_screen.dart
├── project_data.dart
├── project_detail_screen.dart
├── project_grid_screen.dart
└── project_models.dart

project/
├── dialogs/
├── widgets/
├── project_create_screen.dart
├── project_data.dart
├── project_detail_screen.dart
├── project_grid_screen.dart
└── project_models.dart

dialogs/

Contains reusable dialogs related to the feature.

Examples:

Dart

dialogs/
├── delete_warning_dialog.dart

dialogs/
├── delete_warning_dialog.dart

Use this folder when a feature requires modal interactions.

widgets/

Contains reusable UI components specific to the feature.

Examples:

Dart

widgets/
├── project_create_form.dart
├── project_detail_activity.dart
├── project_detail_attachment_overview.dart
├── project_detail_attachment.dart
.
.
.

widgets/
├── project_create_form.dart
├── project_detail_activity.dart
├── project_detail_attachment_overview.dart
├── project_detail_attachment.dart
.
.
.

Keeping feature-specific widgets separated makes screens cleaner and easier to maintain.

*_screen.dart

Contains the main pages displayed to users.

Examples:

Dart

project_create_screen.dart
project_detail_screen.dart
project_grid_screen.dart

project_create_screen.dart
project_detail_screen.dart
project_grid_screen.dart

Typically these represent:

List Screens
Detail Screens
Create Screens

*_data.dart

Contains mock data used by demo screens.

Example:

Dart

project_data.dart

project_data.dart

During development, this is usually the first file replaced when integrating a real backend.

Example migration:

Dart

Mock Data
      ↓
Repository
      ↓
API Service
      ↓
Backend

Mock Data
      ↓
Repository
      ↓
API Service
      ↓
Backend

*_models.dart

Contains data models used throughout the feature.

Example:

Dart

project_models.dart

project_models.dart

Typical model definitions:

Dart

Project
ProjectDetails
Member
ProjectMilestone
ProjectAttachment
.
.
.

Project
ProjectDetails
Member
ProjectMilestone
ProjectAttachment
.
.
.

These models can often be reused directly when connecting to APIs.

Why This Structure Matters

FlutKit intentionally keeps each feature self-contained.

Instead of spreading files across multiple unrelated directories, each module keeps its:

Screens
Widgets
Dialogs
Models
Data

together in one location.

Benefits:

Easier navigation
Faster customization
Better maintainability
More AI-agent friendly structure
Simpler onboarding for new developers

This organization allows developers to copy an entire feature module, rename it, replace the data source, and quickly transform it into a production-ready business feature.

Recommended Development Workflow

Step 1: Find the Closest Demo Feature

Before creating a new feature, explore the available screens inside:

Dart

lib/demo/

lib/demo/

Look for the module that most closely matches your business requirements.

Examples

Your Feature	Recommended Starting Point
CRM System	CRM Dashboard, Projects, Task, Chat, Calendar
Customer Support	Tickets, Chat, Email, Documentation
Internal Messaging	Chat
Booking System	Calendar
E-commerce Admin	Ecommerce Dashboard
Employee Directory	User Management, Profile, Team
Analytics Platform	Analytics Dashboard
User Management	Profile, Settings Pages, User Management

The closer the match, the less customization will be required.

Step 2: Copy the Feature Folder

Once you identify the closest feature, duplicate the entire module.

Example:

Dart

lib/demo/app/project/

lib/demo/app/project/

Copy it into:

Dart

lib/apps/project_management/

lib/apps/project_management/

Dart

lib/features/project_management/

lib/features/project_management/

depending on your preferred project structure.

Step 3: Rename Screens

Update all naming to reflect your business domain.

Example:

Dart

ProjectDetailScreen

ProjectDetailScreen

becomes:

Dart

ProjectOverviewScreen

ProjectOverviewScreen

Step 4: Update Routes

Dart

lib/app_router.dart

lib/app_router.dart

Example:

Dart

class RouteUri {
  static String projectOverview= '/project-overview';
}

GoRoute(
  path: RouteUri.projectOverview,
  pageBuilder: (context, state) => NoTransitionPage<void>(
    key: state.pageKey,
    child: ProjectOverviewScreen(),
  ),
),

class RouteUri {
  static String projectOverview= '/project-overview';
}

GoRoute(
  path: RouteUri.projectOverview,
  pageBuilder: (context, state) => NoTransitionPage<void>(
    key: state.pageKey,
    child: ProjectOverviewScreen(),
  ),
),

Without this step, the screen cannot be accessed through navigation.

Step 5: Add Navigation Menu

Expose the newly created screen through the application navigation.

Sidebar Navigation

Update:

Dart

lib/configs/sidebar_menu_config.dart

lib/configs/sidebar_menu_config.dart

Example:

Dart

SidebarMenuConfig(
  uri: RouteUri.projectOverview,
  icon: Icons.remove,
  title: (context) => Lang.of(context).projectOverview,
),

SidebarMenuConfig(
  uri: RouteUri.projectOverview,
  icon: Icons.remove,
  title: (context) => Lang.of(context).projectOverview,
),

This makes the new feature visible and accessible to users.

Step 6: Replace Mock Data

All demo modules in FlutKit include mock data that is used to demonstrate layouts, interactions, and user flows. You can find mock data in:

Dart

project_data.dart

project_data.dart

For example, the Project module contains a data source similar to:

Dart

final mockProjectDatas = ProjectDetails(
  id: '5',
  title: 'Flutter Project Management App',
  client: 'Sun Digital Media Corp',
  description: '...',
  status: 'inProgress',
  priority: 'high',
  progress: 0.45,
  billingType: 'Task Hours',
);

final mockProjectDatas = ProjectDetails(
  id: '5',
  title: 'Flutter Project Management App',
  client: 'Sun Digital Media Corp',
  description: '...',
  status: 'inProgress',
  priority: 'high',
  progress: 0.45,
  billingType: 'Task Hours',
);

The purpose of this mock data is to help developers understand how the UI is structured and how data flows through the application.

Replace the Data Source

Example:

Dart

final project = mockProjectDatas;

final project = mockProjectDatas;

Replace with:

Dart

final project = await projectService.getProject();

final project = await projectService.getProject();

Dart

final project = ref.watch(projectProvider);

final project = ref.watch(projectProvider);

depending on your preferred state management solution.

Step 7: Connect Backend Services

Replace demo data providers with your actual backend implementation.

Possible integrations include:

REST API
GraphQL
Firebase
Supabase
PocketBase
WordPress
Custom Backend

Recommended structure:

Dart

services/
repositories/
providers/

services/
repositories/
providers/

Keep API logic separated from UI components.

Step 8: Add Business Logic

After navigation and data are complete, implement domain-specific functionality.

Examples:

CRM

Lead Management
Customer Segmentation
Sales Tracking

Project Management

Task Assignment
Milestones
Progress Tracking

HR System

Employee Records
Attendance
Leave Requests

Inventory Management

Stock Tracking
Purchase Orders
Supplier Management

At this stage, the ready-made screen becomes a fully functional business feature.

Best Practices

Reuse Before Rebuild

Always check whether an existing screen already solves part of your problem before creating a new one.

Preferred workflow:

Dart

Reuse Existing Screen
        ↓
Customize
        ↓
Extend
        ↓
Build New

Reuse Existing Screen
        ↓
Customize
        ↓
Extend
        ↓
Build New

Avoid:

Dart

Build From Scratch
        ↓
Discover Similar Screen Later

Build From Scratch
        ↓
Discover Similar Screen Later

Focus on Patterns, Not Names

Even if a module appears unrelated to your project, its UI pattern may still be valuable.

Examples:

Existing Demo	Can Be Reused As
Projects	CRM Pipeline
Tickets	Support Requests
Calendar	Booking System
Team	Customer Directory
Chat	Customer Messaging
Email	Notification Center

Think in terms of reusable patterns rather than feature names.

Summary

The fastest way to build applications with FlutKit is:

Dart

1. Find the closest demo feature in lib/demo

2. Copy the feature folder

3. Rename models and screens

4. Update app_router.dart

5. Add the screen to sidebar_menu_config.dart

6. Replace mock data

7. Connect backend

8. Add business logic

1. Find the closest demo feature in lib/demo

2. Copy the feature folder

3. Rename models and screens

4. Update app_router.dart

5. Add the screen to sidebar_menu_config.dart

6. Replace mock data

7. Connect backend

8. Add business logic

By following this workflow, developers can transform a ready-made demo screen into a production-ready feature with significantly less effort than building everything from scratch.

Working with Ready-Made Screens

Directory Structure

Categories

Understanding Feature Structure

dialogs/

widgets/

*_screen.dart

*_data.dart

*_models.dart

Why This Structure Matters

Recommended Development Workflow

Step 1: Find the Closest Demo Feature

Examples

Step 2: Copy the Feature Folder

Step 3: Rename Screens

Step 4: Update Routes

Step 5: Add Navigation Menu

Sidebar Navigation

Step 6: Replace Mock Data

Step 7: Connect Backend Services

Step 8: Add Business Logic

CRM

Project Management

HR System

Inventory Management

Best Practices

Reuse Before Rebuild

Focus on Patterns, Not Names

Summary

Working with Ready-Made Screens