hashanranasinghe/lumen_ui

Lumen UI

A CLI-based Flutter package for generating modular, customizable UI components on demand.

Motivation

Flutter developers often struggle with bloated UI component libraries that increase app size and affect performance. Lumen UI CLI solves this by providing a command-line tool that generates only the components you need, with full customization options.

Features

Modular UI component generation
Customizable component templates
Theme and style configuration options
Material Design and Cupertino guideline compliance
Inline documentation for generated components

Full Documentation

For complete knowledge about the package, please visit the official documentation website:

Lumen UI Documentation

Installation

Follow these steps to set up your Flutter project and integrate Lumen UI:

1. Create a New Flutter Project

Using Flutter CLI

 flutter create my_app
 cd my_app

Using VS Code

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
Type "Flutter: New Project"
Select "Application"
Choose project directory
Name your project

Using Android Studio

Click "New Flutter Project" from welcome screen
Select Flutter project type
Configure project settings
Click "Finish"

📚 New to Flutter? Check out the official Flutter documentation for detailed setup instructions.

2. Add Lumen UI to Your Project

Add this line to your pubspec.yaml under dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  lumen_ui: 0.0.1 # Add Lumen UI package

3. Install Dependencies

Run this command in your project directory:

flutter pub get

4. Verify Installation

Run this command to verify the installation:

flutter pub list

You should see lumen_ui: 1.0.0 in the list of installed packages.

🎉 Congratulations! You're now ready to use Lumen UI in your Flutter project.

Continue to the Usage section to learn how to implement Lumen UI components.

Usage

dart run lumen_ui [options]

Options

Option	Alias	Description	Required
`--type`	`-t`	Type of component to generate	Yes
`--name`	`-n`	Name of the component	Yes
`--output`	`-o`	Output directory (defaults to `lib/ui`)	No
`--help`	`-h`	Show help information	No
`--version`	`-v`	Show version information	No
`--verbose`	-	Enable verbose logging	No

Component Types

button: Button components
dummy: Dummy components for testing

Component Naming Rules

Must start with a letter
Can contain letters, numbers, and underscores
Cannot contain spaces or special characters

Examples

List all supported types and their related UIs:

dart run lumen_ui --list

List all supported component types:

dart run lumen_ui --list-types

List related UIs for a specific component type:

dart run lumen_ui --list-uis button

Generate a primary button:

dart run lumen_ui -t button -u primarybutton -n primary

Generate with custom output directory:

dart run lumen_ui -t button -u iconbutton -n iconbtn -o lib/components

Output Structure

Components are generated in the following structure:

lib/ui/
  ├── buttons/
  │   └── primary_button
        └── primary_button.dart
  └── styles/
      └── color.dart
      └── styles.dart

Error Handling

Common error messages and solutions:

Both --type, --ui and --name are required: Ensure both -t, -u and -n options are provided
Invalid component name: Follow the component naming rules
Error parsing arguments: Check the command syntax
Invalid argument format: Verify option values are correct

Additional Commands

Show help:

dart run lumen_ui --help

Show version:

dart run lumen_ui --version

Architecture

The project follows a Layered Architecture pattern with:

HMI Layer: Command-line interface
Service Layer: Component generation and template services
Application Layer: Core business logic
Communication Layer: File system operations

Technology Stack

Dart SDK (>=2.18.0)
Flutter SDK (>=3.0.0)
Development Tools: VS Code, Android Studio
CLI Framework: args/cli_util

Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request

hashanranasinghe/lumen_ui