Mobintix UI Kit

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.

Features

• Design Token System — Colors, typography, spacing, radius, shadows, durations, and sizing are all tokenized and configurable via JSON.
• Responsive Breakpoints — 5-tier breakpoint system (xs/sm/md/lg/xl) with Responsive.value() helper and ResponsiveBuilder widget.
• Theme Injection — Lightweight InheritedWidget-based theming with no dependency on any state management library.
• Light & Dark Mode — Built-in light and dark theme factories, plus JSON-driven white-label customization.
• Accessibility — Semantics on all interactive widgets, reduced-motion support, minimum 48dp tap targets.
• 30+ Widgets — Buttons, inputs, cards, dialogs, feedback states, media, typography, badges, shimmer loading, and more.
• Zero App-Level Coupling — No routing, state management, or business logic leaks. Drop into any host app.

Getting Started

Installation

Add mobintix_ui_kit to your pubspec.yaml:

dependencies:
  mobintix_ui_kit: ^0.0.1

Then run:

flutter pub get

Basic Setup

Wrap your app with AppThemeScope and pass the theme data to MaterialApp:

import 'package:mobintix_ui_kit/mobintix_ui_kit.dart';

void main() {
  final theme = AppTheme.light();

  runApp(
    AppThemeScope(
      theme: theme,
      child: MaterialApp(
        theme: theme.toThemeData(),
        home: const HomeScreen(),
      ),
    ),
  );
}

Access Tokens

Use context extensions anywhere in your widget tree:

final colors = context.appColors;
final spacing = context.appSpacing;
final typography = context.appTypography;
final sizing = context.appSizing;
final durations = context.appDurations;

Usage

Buttons

AppButton.primary(
  text: 'Continue',
  onPressed: () {},
  isLoading: isSubmitting,
)

AppButton.outline(
  text: 'Cancel',
  onPressed: () => Navigator.pop(context),
)

Text Fields

AppTextField(
  label: 'Email',
  hint: 'you@example.com',
  prefixIcon: Icon(Icons.email_outlined),
  keyboardType: TextInputType.emailAddress,
)

Cards

InfoCard(
  title: 'Balance',
  value: '\$1,234.56',
  icon: Icons.account_balance_wallet,
  iconColor: context.appColors.primary,
)

Responsive Layout

final columns = Responsive.value<int>(context, xs: 1, md: 2, lg: 3);

JSON-Driven Theming

Load a theme from your API, remote config, or local file:

final theme = AppTheme.fromJson({
  'isDark': false,
  'colors': {'primary': '#6366F1'},
  'typography': {'fontFamily': 'Inter'},
  'spacing': {'md': 12, 'lg': 16},
});

Components

Theme Tokens

Token Class	Context Extension	Purpose
AppColors	context.appColors	Brand, semantic, and text colors
AppTypography	context.appTypography	Font sizes, line heights, letter spacing
AppSpacing	context.appSpacing	xxs through xxxl spacing values
AppRadius	context.appRadius	Border radius tokens
AppShadows	context.appShadows	Box shadow definitions
AppDurations	context.appDurations	Animation duration tokens
AppSizing	context.appSizing	Button heights, icon sizes, avatars

Widgets

Category	Widgets
Buttons	AppButton, AppIconButton, AppTextButton
Inputs	AppTextField, PasswordTextField, PinInput, SearchField, PhoneField
Cards	AppCard, InfoCard, TransactionCard
Layout	VSpace, HSpace, SafeContent, AppAppBar
Feedback	LoadingIndicator, LoadingOverlay, EmptyState, ErrorState, showAppToast
Dialogs	showAppDialog, showConfirmDialog, showAppBottomSheet
Media	AppImage, AppAvatar, StatusAvatar
Typography	AppText (all Material 3 text styles)
Misc	AppDivider, AppBadge, NotificationBadge, ShimmerLoading

Responsive Breakpoints

Size	Range	Convenience
xs	< 480 dp	context.isMobile
sm	480–767 dp	context.isMobile
md	768–1023 dp	context.isTablet
lg	1024–1439 dp	context.isDesktop
xl	>= 1440 dp	context.isDesktop

Screenshots

Home	Buttons	Inputs	Cards

Dialogs	Feedback	Media	Typography

Layout	Misc	Theme Tokens

API Reference

Full API documentation is auto-generated and available on pub.dev.

Dependencies

This package intentionally keeps dependencies minimal:

Package	Purpose
equatable	Value equality for immutable token classes
cached_network_image	Network image caching with placeholders
shimmer	Skeleton loading animations

Additional Information

• Changelog: See CHANGELOG.md for version history.
• Issues: File bugs or feature requests on the issue tracker.
• Contributing: Pull requests are welcome. Please run flutter analyze and flutter test before submitting.

License

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