mkx_ui_kit 0.0.2

A customizable UI widget kit with themes and useful components.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mkx_ui_kit/mkx_ui_kit.dart';
import 'components_example.dart';
import 'theme_example.dart';

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

/// Launcher for the different examples
class ExampleLauncher extends StatelessWidget {
  const ExampleLauncher({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MKX UI Kit Examples',
      theme: MkxTheme.light,
      darkTheme: MkxTheme.dark,
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: const LauncherHome(),
    );
  }
}

/// Home screen for the launcher
class LauncherHome extends StatelessWidget {
  const LauncherHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MKX UI Kit Examples'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'MKX UI Kit',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Choose an example to explore:',
                style: TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 48),
              _buildExampleButton(
                context,
                'Components Example',
                'Explore all UI components in the kit',
                Icons.widgets,
                () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const ComponentsExample(),
                  ),
                ),
              ),
              const SizedBox(height: 24),
              _buildExampleButton(
                context,
                'Theme Customization',
                'See how to create and apply custom themes',
                Icons.palette,
                () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const ThemeExample(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// Helper method to build consistent example buttons
  Widget _buildExampleButton(
    BuildContext context,
    String title,
    String description,
    IconData icon,
    VoidCallback onPressed,
  ) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.all(20),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        child: Column(
          children: [
            Icon(icon, size: 48),
            const SizedBox(height: 16),
            Text(
              title,
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              description,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}