Lokio Design System

A comprehensive Flutter design system package with reusable UI components for Lokio applications.

Features

🎨 Beautiful, customizable UI components
📱 Responsive and accessible
🎯 Built with Flutter Material Design principles
🔧 Easy to integrate and extend
📦 Ready for pub.dev publishing

Installation

Add this package to your pubspec.yaml:

dependencies:
  lokio_design_system: ^0.1.0

Then run:

flutter pub get

Usage

Import the package:

import 'package:lokio_design_system/lokio_design_system.dart';

Basic Usage

LokioButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Click me'),
)

Variants

The button supports four variants:

Primary - Main call-to-action button
Secondary - Secondary actions
Outlined - Outlined style button
Text - Minimal text button

// Primary button
LokioButton(
  onPressed: () {},
  variant: ButtonVariant.primary,
  child: Text('Primary'),
)

// Secondary button
LokioButton(
  onPressed: () {},
  variant: ButtonVariant.secondary,
  child: Text('Secondary'),
)

// Outlined button
LokioButton(
  onPressed: () {},
  variant: ButtonVariant.outlined,
  child: Text('Outlined'),
)

// Text button
LokioButton(
  onPressed: () {},
  variant: ButtonVariant.text,
  child: Text('Text'),
)

Factory Constructors

For convenience, you can use factory constructors:

LokioButton.primary(
  onPressed: () {},
  child: Text('Primary'),
)

LokioButton.secondary(
  onPressed: () {},
  child: Text('Secondary'),
)

LokioButton.outlined(
  onPressed: () {},
  child: Text('Outlined'),
)

LokioButton.text(
  onPressed: () {},
  child: Text('Text'),
)

Sizes

Buttons come in three sizes:

Small - 32px height
Medium - 40px height (default)
Large - 48px height

LokioButton(
  onPressed: () {},
  size: ButtonSize.small,
  child: Text('Small'),
)

LokioButton(
  onPressed: () {},
  size: ButtonSize.medium, // default
  child: Text('Medium'),
)

LokioButton(
  onPressed: () {},
  size: ButtonSize.large,
  child: Text('Large'),
)

States

Disabled State

LokioButton(
  onPressed: null, // null makes button disabled
  child: Text('Disabled'),
)

Loading State

LokioButton(
  onPressed: () {},
  isLoading: true,
  child: Text('Loading...'),
)

Icons

Add icons to your buttons:

// Leading icon
LokioButton(
  onPressed: () {},
  leadingIcon: Icon(Icons.add),
  child: Text('Add'),
)

// Trailing icon
LokioButton(
  onPressed: () {},
  trailingIcon: Icon(Icons.arrow_forward),
  child: Text('Continue'),
)

// Both icons
LokioButton(
  onPressed: () {},
  leadingIcon: Icon(Icons.download),
  trailingIcon: Icon(Icons.arrow_downward),
  child: Text('Download'),
)

// Icon only
LokioButton(
  onPressed: () {},
  leadingIcon: Icon(Icons.favorite),
)

Expanded Button

Make button fill available width:

LokioButton(
  onPressed: () {},
  isExpanded: true,
  child: Text('Full Width'),
)

Customization

Customize colors, borders, and more:

LokioButton(
  onPressed: () {},
  variant: ButtonVariant.primary,
  backgroundColor: Colors.purple,
  foregroundColor: Colors.white,
  borderRadius: 12.0,
  minWidth: 200,
  child: Text('Custom'),
)

For outlined buttons:

LokioButton(
  onPressed: () {},
  variant: ButtonVariant.outlined,
  borderColor: Colors.purple,
  borderWidth: 2.0,
  child: Text('Custom Border'),
)

Example

See the example directory for a complete demonstration of all button features.

Run the example:

cd example
flutter run

Requirements

Flutter SDK >=3.10.0
Dart SDK >=3.0.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.