mobintix_ui_kit 0.0.1

A fully configurable, theme-driven Flutter UI kit with responsive breakpoints, design tokens, accessibility support, and 30+ production-ready widgets for building consistent cross-platform apps.

example/lib/main.dart

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

import 'screens/buttons/buttons_example.dart';
import 'screens/cards/cards_example.dart';
import 'screens/dialogs/dialogs_example.dart';
import 'screens/feedback/feedback_example.dart';
import 'screens/inputs/inputs_example.dart';
import 'screens/layout/layout_example.dart';
import 'screens/media/media_example.dart';
import 'screens/misc/misc_example.dart';
import 'screens/theme/theme_example.dart';
import 'screens/typography/typography_example.dart';

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

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

  @override
  State<UiKitExampleApp> createState() => _UiKitExampleAppState();
}

class _UiKitExampleAppState extends State<UiKitExampleApp> {
  bool _isDark = false;

  void _toggleTheme() {
    setState(() => _isDark = !_isDark);
  }

  @override
  Widget build(BuildContext context) {
    final theme = _isDark ? AppTheme.dark() : AppTheme.light();

    return AppThemeScope(
      theme: theme,
      child: MaterialApp(
        title: 'MOBINTIX UI Kit',
        debugShowCheckedModeBanner: false,
        theme: theme.toThemeData(),
        initialRoute: '/',
        routes: {
          '/': (_) =>
              _HomeScreen(isDark: _isDark, onToggleTheme: _toggleTheme),
          '/buttons': (_) => const ButtonsExample(),
          '/inputs': (_) => const InputsExample(),
          '/cards': (_) => const CardsExample(),
          '/dialogs': (_) => const DialogsExample(),
          '/feedback': (_) => const FeedbackExample(),
          '/media': (_) => const MediaExample(),
          '/typography': (_) => const TypographyExample(),
          '/layout': (_) => const LayoutExample(),
          '/misc': (_) => const MiscExample(),
          '/theme': (_) => const ThemeExample(),
        },
      ),
    );
  }
}

class _HomeScreen extends StatelessWidget {
  final bool isDark;
  final VoidCallback onToggleTheme;

  const _HomeScreen({required this.isDark, required this.onToggleTheme});

  @override
  Widget build(BuildContext context) {
    final colors = context.appColors;
    final spacing = context.appSpacing;

    return Scaffold(
      appBar: AppAppBar(
        title: 'MOBINTIX UI Kit',
        centerTitle: false,
        actions: [
          AppIconButton(
            icon: isDark ? Icons.light_mode : Icons.dark_mode,
            tooltip: isDark ? 'Light mode' : 'Dark mode',
            onPressed: onToggleTheme,
          ),
        ],
      ),
      body: SafeContent(
        child: ListView(
          padding: EdgeInsets.all(spacing.lg),
          children: [
            Center(
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: spacing.md),
                child: Image.asset(
                  'assets/logo.png',
                  height: 48,
                ),
              ),
            ),
            const VSpace.sm(),
            AppText.headlineMedium(
              'Components',
              color: colors.textPrimary,
            ),
            const VSpace.xs(),
            AppText.bodyMedium(
              'Explore all UI Kit widgets organized by category.',
              color: colors.textSecondary,
            ),
            const VSpace.lg(),
            _CategoryTile(
              icon: Icons.smart_button,
              title: 'Buttons',
              subtitle:
                  'Primary, secondary, outline, ghost, danger, icon, text',
              color: colors.primary,
              onTap: () => _push(context, const ButtonsExample()),
            ),
            _CategoryTile(
              icon: Icons.text_fields,
              title: 'Inputs',
              subtitle: 'Text fields, password, search, PIN, phone',
              color: colors.secondary,
              onTap: () => _push(context, const InputsExample()),
            ),
            _CategoryTile(
              icon: Icons.credit_card,
              title: 'Cards',
              subtitle: 'Basic, info, transaction cards',
              color: colors.success,
              onTap: () => _push(context, const CardsExample()),
            ),
            _CategoryTile(
              icon: Icons.open_in_new,
              title: 'Dialogs & Sheets',
              subtitle: 'Dialogs, confirmations, bottom sheets',
              color: colors.warning,
              onTap: () => _push(context, const DialogsExample()),
            ),
            _CategoryTile(
              icon: Icons.feedback_outlined,
              title: 'Feedback',
              subtitle: 'Loading, empty, error states, toasts',
              color: colors.error,
              onTap: () => _push(context, const FeedbackExample()),
            ),
            _CategoryTile(
              icon: Icons.image_outlined,
              title: 'Media',
              subtitle: 'Images, avatars, status avatars',
              color: colors.info,
              onTap: () => _push(context, const MediaExample()),
            ),
            _CategoryTile(
              icon: Icons.text_format,
              title: 'Typography',
              subtitle: 'All Material 3 text styles with AppText',
              color: colors.primary,
              onTap: () => _push(context, const TypographyExample()),
            ),
            _CategoryTile(
              icon: Icons.dashboard_outlined,
              title: 'Layout',
              subtitle: 'Spacing, SafeContent, AppAppBar, responsive',
              color: colors.secondary,
              onTap: () => _push(context, const LayoutExample()),
            ),
            _CategoryTile(
              icon: Icons.widgets_outlined,
              title: 'Misc',
              subtitle: 'Badges, dividers, shimmer loading',
              color: colors.success,
              onTap: () => _push(context, const MiscExample()),
            ),
            _CategoryTile(
              icon: Icons.palette_outlined,
              title: 'Theme Tokens',
              subtitle: 'Colors, spacing, sizing, radius, durations',
              color: colors.warning,
              onTap: () => _push(context, const ThemeExample()),
            ),
            const VSpace.xxl(),
          ],
        ),
      ),
    );
  }

  void _push(BuildContext context, Widget screen) {
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => screen),
    );
  }
}

class _CategoryTile extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final Color color;
  final VoidCallback onTap;

  const _CategoryTile({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.color,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final spacing = context.appSpacing;
    final colors = context.appColors;
    final radius = context.appTheme.radius;

    return Padding(
      padding: EdgeInsets.only(bottom: spacing.sm),
      child: AppCard(
        semanticLabel: title,
        onTap: onTap,
        padding: EdgeInsets.all(spacing.md),
        child: Row(
          children: [
            Container(
              width: 44,
              height: 44,
              decoration: BoxDecoration(
                color: color.withValues(alpha: 0.12),
                borderRadius: BorderRadius.circular(radius.md),
              ),
              child: Icon(icon, color: color, size: 22),
            ),
            SizedBox(width: spacing.md),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  AppText.titleSmall(title),
                  AppText.bodySmall(subtitle, color: colors.textSecondary),
                ],
              ),
            ),
            Icon(Icons.chevron_right, color: colors.textSecondary, size: 20),
          ],
        ),
      ),
    );
  }
}