kitiumai_flutter 1.0.0

Kitium UI Flutter - A comprehensive Flutter widget library with 39 pre-built components for consistent, framework-agnostic UI across web, mobile, and desktop platforms.

example/main.dart

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

/// Kitium UI Flutter Example App
/// Demonstrates all 39 components in action

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kitium UI Flutter - Component Showcase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final tabs = [
    'Buttons',
    'Forms',
    'Cards',
    'Feedback',
    'Layout',
    'Advanced',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kitium UI Flutter'),
        elevation: 0,
      ),
      body: PageView(
        onPageChanged: (index) => setState(() => _currentIndex = index),
        children: [
          _buildButtonsTab(),
          _buildFormsTab(),
          _buildCardsTab(),
          _buildFeedbackTab(),
          _buildLayoutTab(),
          _buildAdvancedTab(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.scrollable,
        items: tabs
            .map((tab) => BottomNavigationBarItem(icon: const Icon(Icons.widgets), label: tab))
            .toList(),
        onTap: (index) => setState(() => _currentIndex = index),
      ),
    );
  }

  Widget _buildButtonsTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Buttons'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              KtButton(
                variant: ComponentVariant.primary,
                size: ComponentSize.small,
                onPressed: () => _showSnackBar('Primary'),
                child: const Text('Small'),
              ),
              KtButton(
                variant: ComponentVariant.primary,
                size: ComponentSize.medium,
                onPressed: () => _showSnackBar('Primary'),
                child: const Text('Medium'),
              ),
              KtButton(
                variant: ComponentVariant.primary,
                size: ComponentSize.large,
                onPressed: () => _showSnackBar('Primary'),
                child: const Text('Large'),
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Variants'),
          Column(
            children: ComponentVariant.values
                .map(
                  (variant) => Padding(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: KtButton(
                      variant: variant,
                      onPressed: () => _showSnackBar(variant.name),
                      child: Text(variant.name),
                    ),
                  ),
                )
                .toList(),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('States'),
          Column(
            children: [
              KtButton(
                variant: ComponentVariant.primary,
                onPressed: () => _showSnackBar('Enabled'),
                child: const Text('Enabled'),
              ),
              const SizedBox(height: 8),
              KtButton(
                variant: ComponentVariant.primary,
                disabled: true,
                onPressed: () {},
                child: const Text('Disabled'),
              ),
              const SizedBox(height: 8),
              KtButton(
                variant: ComponentVariant.primary,
                loading: true,
                onPressed: () {},
                child: const Text('Loading'),
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Avatar & Badge'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              KtAvatar(name: 'John Doe', size: ComponentSize.small),
              KtAvatar(name: 'Jane Smith', size: ComponentSize.medium),
              KtAvatar(name: 'Bob Johnson', size: ComponentSize.large),
            ],
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              KtBadge(content: 5, variant: ComponentVariant.primary),
              KtBadge(content: 99, variant: ComponentVariant.warning),
              KtBadge(content: 150, maxCount: 99, variant: ComponentVariant.error),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildFormsTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Checkboxes & Radio'),
          KtCheckbox(
            label: 'I agree to terms',
            onChange: (value) => _showSnackBar('Checkbox: $value'),
          ),
          const SizedBox(height: 12),
          KtCheckbox(
            label: 'Subscribe to newsletter',
            checked: true,
            onChange: (value) => _showSnackBar('Checked: $value'),
          ),
          const SizedBox(height: 24),
          KtRadio(
            label: 'Option 1',
            onChange: (value) => _showSnackBar('Radio: $value'),
          ),
          const SizedBox(height: 8),
          KtRadio(
            label: 'Option 2',
            checked: true,
            onChange: (value) => _showSnackBar('Radio: $value'),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Toggle Switch'),
          KtToggle(
            label: 'Enable notifications',
            onChange: (value) => _showSnackBar('Toggle: $value'),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Rating'),
          KtRating(
            value: 3.5,
            showLabel: true,
            onChange: (value) => _showSnackBar('Rating: $value'),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Search'),
          KtSearch(
            placeholder: 'Search components...',
            onChange: (value) => print('Search: $value'),
          ),
        ],
      ),
    );
  }

  Widget _buildCardsTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Card Variants'),
          ...ComponentVariant.values.map(
            (variant) => Padding(
              padding: const EdgeInsets.only(bottom: 16),
              child: KtCard(
                variant: variant,
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text(
                    '${variant.name.toUpperCase()} Card',
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Card with Header & Footer'),
          KtCard(
            header: const Text('Product Info'),
            footer: const Text('Limited Offer'),
            child: const Padding(
              padding: EdgeInsets.all(16),
              child: Text('Amazing product description goes here'),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeedbackTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Alerts'),
          ...ComponentVariant.values
              .take(4)
              .map(
                (variant) => Padding(
                  padding: const EdgeInsets.only(bottom: 12),
                  child: KtAlert(
                    variant: variant,
                    title: 'Alert Title',
                    message: 'This is a ${variant.name} alert message',
                    onClose: () => _showSnackBar('${variant.name} alert closed'),
                  ),
                ),
              )
              .toList(),
          const SizedBox(height: 24),
          _buildSectionTitle('Progress & Skeleton'),
          KtProgress(
            value: 65,
            max: 100,
            variant: ComponentVariant.primary,
            showLabel: true,
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              KtSkeleton(width: 48, height: 48, variant: 'circular'),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  children: [
                    KtSkeleton(height: 14),
                    const SizedBox(height: 8),
                    KtSkeleton(height: 14),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Toast'),
          KtButton(
            variant: ComponentVariant.primary,
            onPressed: () => _showSnackBar('This is a toast notification!'),
            child: const Text('Show Toast'),
          ),
        ],
      ),
    );
  }

  Widget _buildLayoutTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Divider'),
          const Text('Horizontal Divider'),
          const SizedBox(height: 8),
          const KtDivider(spacing: 'medium'),
          const SizedBox(height: 16),
          _buildSectionTitle('Breadcrumb'),
          KtBreadcrumb(
            items: [
              BreadcrumbItem(label: 'Home'),
              BreadcrumbItem(label: 'Components'),
              BreadcrumbItem(label: 'Current'),
            ],
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('List'),
          KtList(
            items: [
              ListItem(
                title: 'First Item',
                subtitle: 'Item description',
                icon: Icons.star,
                onPress: () => _showSnackBar('Item 1 tapped'),
              ),
              ListItem(
                title: 'Second Item',
                subtitle: 'Another description',
                icon: Icons.favorite,
                onPress: () => _showSnackBar('Item 2 tapped'),
              ),
              ListItem(
                title: 'Third Item',
                subtitle: 'Last item',
                icon: Icons.bookmark,
                onPress: () => _showSnackBar('Item 3 tapped'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildAdvancedTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('Pagination'),
          KtPagination(
            current: 2,
            total: 5,
            onChange: (page) => _showSnackBar('Go to page $page'),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Icon'),
          Wrap(
            spacing: 12,
            runSpacing: 12,
            children: [
              KtIcon(name: 'home', size: 'lg'),
              KtIcon(name: 'star', size: 'lg'),
              KtIcon(name: 'heart', size: 'lg'),
              KtIcon(name: 'search', size: 'lg'),
              KtIcon(name: 'settings', size: 'lg'),
              KtIcon(name: 'check', size: 'lg'),
            ],
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('Label & Link'),
          KtLabel(
            required: true,
            child: const Text('Required Field'),
          ),
          const SizedBox(height: 12),
          KtLink(
            onPress: () => _showSnackBar('Link tapped'),
            child: const Text('Click me'),
          ),
          const SizedBox(height: 24),
          _buildSectionTitle('View Source Code'),
          KtButton(
            variant: ComponentVariant.info,
            onPressed: () => _showSnackBar(
              'Check out /example/main.dart in the package',
            ),
            child: const Text('GitHub Repository'),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

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