Lokio Design System #

A beautiful, modern Flutter design system package with ready-to-use UI components. Built with Material 3 principles and fully customizable through design tokens.

✨ Features #

• 🎨 Modern Components - Beautiful, production-ready UI components
• 🎯 5 Button Variants - Primary, Secondary, Outline, Text, and Icon buttons
• 📏 5 Button Sizes - From tiny to giant, perfect for any use case
• 🎨 Design Tokens - Easy color customization with theme system
• 📱 Responsive - Works beautifully on all screen sizes
• ♿ Accessible - Built with accessibility in mind
• 🔧 Simple API - Easy to use and integrate

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  lokio_design_system: ^0.1.0

Then install it:

flutter pub get

🚀 Quick Start #

Import the package:

import 'package:lokio_design_system/lokio_design_system.dart';

Use a button:

LokioButton(
  onPressed: () {
    print('Button pressed!');
  },
  child: Text('Click me'),
)

That's it! 🎉

🎯 Button Component #

Basic Button #

The simplest way to create a button:

LokioButton(
  onPressed: () {
    // Your action here
  },
  child: Text('Button'),
)

Button Variants #

Choose from five button styles:

Primary Button

Perfect for main actions like "Submit", "Save", or "Continue".

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

Secondary Button

Great for secondary actions or less important buttons.

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

Outline Button

Use when you want a button with a border but no background fill.

LokioButton.outline(
  onPressed: () {},
  child: Text('Outline Button'),
)

Text Button

Minimal style for subtle actions like "Cancel" or "Skip".

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

Icon Button

Perfect for icon-only buttons like favorite, share, or menu buttons.

LokioButton.icon(
  onPressed: () {},
  icon: Icon(Icons.favorite),
)

Button Sizes #

Buttons come in five sizes to fit your design needs:

// Tiny - 24px (compact spaces)
LokioButton(
  onPressed: () {},
  size: ButtonSize.tiny,
  child: Text('Tiny'),
)

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

// Medium - 40px (default)
LokioButton(
  onPressed: () {},
  size: ButtonSize.medium, // or omit for default
  child: Text('Medium'),
)

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

// Giant - 56px (maximum visibility)
LokioButton(
  onPressed: () {},
  size: ButtonSize.giant,
  child: Text('Giant'),
)

Button States #

Disabled State

Simply pass null to onPressed to disable the button:

LokioButton(
  onPressed: null, // Button is disabled
  child: Text('Disabled Button'),
)

Loading State

Show a loading spinner while processing an action. The button automatically becomes disabled during loading, and the spinner appears in the leading position.

LokioButton(
  onPressed: () async {
    setState(() => isLoading = true);
    await doSomething();
    setState(() => isLoading = false);
  },
  isLoading: isLoading,
  child: Text('Save'),
)

Note: When isLoading is true, the button is automatically disabled and a loading spinner replaces the leading icon (if any).

Buttons with Icons #

Add icons to enhance your buttons:

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

// Trailing icon (after text)
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'),
)

Full-Width Buttons #

Make buttons fill the entire width (great for forms):

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

🎨 Customizing Colors (Design Tokens) #

Using Default Colors #

By default, buttons use beautiful blue colors that match Material 3 design principles. No configuration needed!

LokioButton.primary(
  onPressed: () {},
  child: Text('Uses default theme'),
)

Custom Colors #

Want to match your brand colors? Easy! Create a custom theme:

import 'package:lokio_design_system/config/lokio_theme.dart';

// Option 1: Create custom theme with specific colors
final myTheme = LokioTheme.custom(
  primaryBackground: Colors.purple,
  primaryForeground: Colors.white,
  secondaryBackground: Colors.pink,
  secondaryForeground: Colors.white,
);

// Use it in your buttons
LokioButton(
  onPressed: () {},
  variant: ButtonVariant.primary,
  theme: myTheme,
  child: Text('Custom Color'),
)

Generate Theme from Material 3 ColorScheme #

If you're using Material 3 theming, generate the Lokio theme from your ColorScheme:

final theme = LokioTheme.fromColorScheme(
  ColorScheme.fromSeed(seedColor: Colors.green),
);

LokioButton(
  onPressed: () {},
  variant: ButtonVariant.primary,
  theme: theme,
  child: Text('Matches Material 3'),
)

What Colors Can You Customize? #

The LokioTheme class lets you customize:

• Primary buttons - Background and text colors
• Secondary buttons - Background and text colors
• Outline buttons - Border and text colors
• Text buttons - Text color
• Icon buttons - Background and icon colors
• Disabled state - All disabled button colors
• Loading state - Loading spinner color

See the full API in the documentation.

📖 Complete Examples #

Form with Submit Button #

Column(
  children: [
    TextField(
      decoration: InputDecoration(labelText: 'Email'),
    ),
    SizedBox(height: 16),
    LokioButton.primary(
      onPressed: () {
        // Submit form
      },
      isExpanded: true,
      child: Text('Submit'),
    ),
  ],
)

Action Row with Multiple Buttons #

Row(
  children: [
    Expanded(
      child: LokioButton.outline(
        onPressed: () {
          // Cancel action
        },
        child: Text('Cancel'),
      ),
    ),
    SizedBox(width: 12),
    Expanded(
      child: LokioButton.primary(
        onPressed: () {
          // Save action
        },
        child: Text('Save'),
      ),
    ),
  ],
)

Loading Button Example #

class MyForm extends StatefulWidget {
  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  bool _isSaving = false;

  Future<void> _saveData() async {
    setState(() => _isSaving = true);
    try {
      await saveToServer();
      showSnackBar('Saved successfully!');
    } finally {
      setState(() => _isSaving = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return LokioButton.primary(
      onPressed: _isSaving ? null : _saveData,
      isLoading: _isSaving,
      leadingIcon: Icon(Icons.save),
      child: Text('Save'),
    );
  }
}

Icon Button in AppBar #

AppBar(
  title: Text('My App'),
  actions: [
    LokioButton.icon(
      onPressed: () {
        // Share action
      },
      icon: Icon(Icons.share),
    ),
    LokioButton.icon(
      onPressed: () {
        // Favorite action
      },
      icon: Icon(Icons.favorite),
    ),
  ],
)

🎨 Design Tokens API Reference #

Creating a Theme #

// Default theme (blue colors)
final defaultTheme = LokioTheme.defaultTheme();

// Custom theme
final customTheme = LokioTheme.custom(
  primaryBackground: Color(0xFF6366F1),
  primaryForeground: Colors.white,
  // ... more colors
);

// From Material 3 ColorScheme
final materialTheme = LokioTheme.fromColorScheme(yourColorScheme);

// Modify existing theme
final modifiedTheme = defaultTheme.copyWith(
  primaryBackground: Colors.purple,
);

Available Theme Properties #

• primaryBackground, primaryForeground
• secondaryBackground, secondaryForeground
• outlineBorder, outlineForeground
• textForeground
• iconBackground, iconForeground
• disabledBackground, disabledForeground, disabledBorder, disabledText
• loadingColor
• defaultBorderRadius

📱 Example App #

Try the complete example app to see all features in action:

git clone https://github.com/lokio/flutter-design-system-lokio.git
cd flutter-design-system-lokio/example
flutter run

📚 Widgetbook (Component Showcase) #

Want to see all components interactively? Check out our Widgetbook:

cd widgetbook
flutter run -d chrome

This opens an interactive component library where you can see all button variants, sizes, and states.

🔗 API Reference #

LokioButton #

The main button widget with the following properties:

• onPressed (required) - Callback when button is pressed. Set to null to disable.
• variant - Button style: primary, secondary, outline, text, or icon
• size - Button size: tiny, small, medium, large, or giant
• child - Text or widget to display in button
• leadingIcon - Icon to show before text
• trailingIcon - Icon to show after text
• isLoading - Show loading spinner (disables button automatically)
• isExpanded - Make button fill available width
• theme - Custom LokioTheme instance (optional)

Factory Constructors #

Quick constructors for each variant:

• LokioButton.primary(...) - Primary button
• LokioButton.secondary(...) - Secondary button
• LokioButton.outline(...) - Outline button
• LokioButton.text(...) - Text button
• LokioButton.icon(...) - Icon button

📋 Requirements #

• Flutter SDK: >=3.16.0
• Dart SDK: >=3.1.0

🤝 Contributing #

We welcome contributions! Please feel free to submit a Pull Request.

📄 License #

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

💬 Support #

• 📧 Email: [your-email@example.com]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Full Docs

Made with ❤️ by the Lokio team