lokio_design_system 0.1.0

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:lokio_design_system/lokio_design_system.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lokio Design System Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const ButtonShowcasePage(),
    );
  }
}

class ButtonShowcasePage extends StatefulWidget {
  const ButtonShowcasePage({super.key});

  @override
  State<ButtonShowcasePage> createState() => _ButtonShowcasePageState();
}

class _ButtonShowcasePageState extends State<ButtonShowcasePage> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lokio Button Examples'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _buildSection(
              title: 'Button Variants',
              children: [
                _buildVariantSection('Primary', ButtonVariant.primary),
                _buildVariantSection('Secondary', ButtonVariant.secondary),
                _buildVariantSection('Outlined', ButtonVariant.outlined),
                _buildVariantSection('Text', ButtonVariant.text),
              ],
            ),
            const SizedBox(height: 32),
            _buildSection(
              title: 'Button Sizes',
              children: [
                _buildSizeSection('Small', ButtonSize.small),
                _buildSizeSection('Medium', ButtonSize.medium),
                _buildSizeSection('Large', ButtonSize.large),
              ],
            ),
            const SizedBox(height: 32),
            _buildSection(
              title: 'Button States',
              children: [
                _buildStateSection(),
              ],
            ),
            const SizedBox(height: 32),
            _buildSection(
              title: 'Buttons with Icons',
              children: [
                _buildIconSection(),
              ],
            ),
            const SizedBox(height: 32),
            _buildSection(
              title: 'Factory Constructors',
              children: [
                _buildFactoryConstructorSection(),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required List<Widget> children,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 16),
        ...children,
      ],
    );
  }

  Widget _buildVariantSection(String label, ButtonVariant variant) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: const TextStyle(fontWeight: FontWeight.w600)),
          const SizedBox(height: 8),
          LokioButton(
            onPressed: () => _showSnackBar('$label button pressed'),
            variant: variant,
            child: Text(label),
          ),
        ],
      ),
    );
  }

  Widget _buildSizeSection(String label, ButtonSize size) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: const TextStyle(fontWeight: FontWeight.w600)),
          const SizedBox(height: 8),
          LokioButton(
            onPressed: () => _showSnackBar('$label button pressed'),
            variant: ButtonVariant.primary,
            size: size,
            child: Text(label),
          ),
        ],
      ),
    );
  }

  Widget _buildStateSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Enabled', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () => _showSnackBar('Enabled button pressed'),
          variant: ButtonVariant.primary,
          child: const Text('Enabled Button'),
        ),
        const SizedBox(height: 16),
        const Text('Disabled', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: null,
          variant: ButtonVariant.primary,
          child: const Text('Disabled Button'),
        ),
        const SizedBox(height: 16),
        const Text('Loading', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () {},
          variant: ButtonVariant.primary,
          isLoading: _isLoading,
          child: const Text('Loading Button'),
        ),
        const SizedBox(height: 8),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isLoading = !_isLoading;
            });
          },
          child: Text(_isLoading ? 'Stop Loading' : 'Start Loading'),
        ),
      ],
    );
  }

  Widget _buildIconSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Leading Icon', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () => _showSnackBar('Button with leading icon pressed'),
          variant: ButtonVariant.primary,
          leadingIcon: const Icon(Icons.add),
          child: const Text('Add Item'),
        ),
        const SizedBox(height: 16),
        const Text('Trailing Icon', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () => _showSnackBar('Button with trailing icon pressed'),
          variant: ButtonVariant.primary,
          trailingIcon: const Icon(Icons.arrow_forward),
          child: const Text('Continue'),
        ),
        const SizedBox(height: 16),
        const Text('Both Icons', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () => _showSnackBar('Button with both icons pressed'),
          variant: ButtonVariant.outlined,
          leadingIcon: const Icon(Icons.download),
          trailingIcon: const Icon(Icons.arrow_downward),
          child: const Text('Download'),
        ),
        const SizedBox(height: 16),
        const Text('Icon Only', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton(
          onPressed: () => _showSnackBar('Icon button pressed'),
          variant: ButtonVariant.primary,
          leadingIcon: const Icon(Icons.favorite),
        ),
      ],
    );
  }

  Widget _buildFactoryConstructorSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Factory: Primary', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton.primary(
          onPressed: () => _showSnackBar('Primary factory button pressed'),
          child: const Text('Primary Button'),
        ),
        const SizedBox(height: 16),
        const Text('Factory: Secondary', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton.secondary(
          onPressed: () => _showSnackBar('Secondary factory button pressed'),
          child: const Text('Secondary Button'),
        ),
        const SizedBox(height: 16),
        const Text('Factory: Outlined', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton.outlined(
          onPressed: () => _showSnackBar('Outlined factory button pressed'),
          child: const Text('Outlined Button'),
        ),
        const SizedBox(height: 16),
        const Text('Factory: Text', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton.text(
          onPressed: () => _showSnackBar('Text factory button pressed'),
          child: const Text('Text Button'),
        ),
        const SizedBox(height: 16),
        const Text('Expanded Button', style: TextStyle(fontWeight: FontWeight.w600)),
        const SizedBox(height: 8),
        LokioButton.primary(
          onPressed: () => _showSnackBar('Expanded button pressed'),
          isExpanded: true,
          child: const Text('Full Width Button'),
        ),
      ],
    );
  }

  void _showSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }
}