Mobintix UI Kit

A fully configurable, theme-driven Flutter UI kit with responsive breakpoints, design tokens, accessibility support, and 50+ 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.
• 50+ Widgets — Buttons, inputs, selection controls, pickers, sliders, cards, navigation, feedback, media, typography, 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.2

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 Examples

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,
)

Selection Controls

AppSwitch(
  value: isDarkMode,
  label: 'Dark Mode',
  onChanged: (v) => setState(() => isDarkMode = v),
)

AppCheckbox(
  value: agreeToTerms,
  label: 'I agree to terms',
  onChanged: (v) => setState(() => agreeToTerms = v ?? false),
)

AppDropdown<String>(
  label: 'Country',
  value: selected,
  items: countries,
  itemLabel: (c) => c,
  onChanged: (v) => setState(() => selected = v),
)

Cards

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

Feedback

AppBanner(
  message: 'Profile updated successfully!',
  variant: BannerVariant.success,
)

AppSnackBar.success(context, message: 'Saved!');

Responsive Layout

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

ResponsiveGrid(
  crossAxisCountXs: 1,
  crossAxisCountMd: 2,
  crossAxisCountLg: 3,
  children: items.map((i) => ItemCard(item: i)).toList(),
)

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},
});

Branded Widget Aliases

If your project uses a prefix (e.g. PC, RD) for widgets, create a single brand.dart file using typedef. This is zero-cost at compile time:

// lib/brand.dart
import 'package:mobintix_ui_kit/mobintix_ui_kit.dart';
export 'package:mobintix_ui_kit/mobintix_ui_kit.dart';

typedef PCButton = AppButton;
typedef PCTextField = AppTextField;
typedef PCCard = AppCard;
// ... add all widgets your app needs

Then import brand.dart instead of the package directly:

import 'package:my_app/brand.dart';

PCButton.primary(text: 'Save', onPressed: () {});

Full Widget Catalog

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 (50+)

Category	Widgets	Count
Buttons	AppButton, AppIconButton, AppTextButton	3
Inputs	AppTextField, PasswordTextField, PinInput, SearchField, PhoneField	5
Selection	AppSwitch, AppCheckbox, AppRadioGroup, AppDropdown, AppChip, AppChipGroup, AppSegmentedControl	7
Pickers & Sliders	AppDatePicker, AppTimePicker, AppSlider, AppRangeSlider, AppRatingBar	5
Cards	AppCard, InfoCard, ListDetailCard	3
Layout	VSpace, HSpace, SafeContent, AppAppBar, AppListTile, AppExpansionTile, SectionHeader, ResponsiveGrid, GradientContainer	9
Navigation	AppTabBar, AppBottomNavBar	2
Feedback	LoadingIndicator, LoadingOverlay, EmptyState, ErrorState, showAppToast, AppProgressBar, AppSnackBar, AppBanner, AppStepper, AppSkeleton, AppSkeletonParagraph	11
Dialogs	showAppDialog, AppDialog, showConfirmDialog, showAppBottomSheet	4
Media	AppImage, AppAvatar, StatusAvatar	3
Typography	AppText (all Material 3 text styles)	1
Misc	AppDivider, DividerWithText, AppBadge, NotificationBadge, ShimmerLoading, AppPopupMenu, AppTooltip, AnimatedCounter, AppStatusIndicator, AppClipboardCopy, AppCountdownTimer	11

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

Example App

The example/ directory contains a full showcase app with 15 screens demonstrating every widget in the kit:

cd example
flutter run

Category	Screen
Buttons	Primary, secondary, outline, ghost, danger, icon, text
Inputs	Text fields, password, search, PIN, phone
Selection Controls	Switch, checkbox, radio, dropdown, chips
Pickers & Sliders	Date, time, slider, range, rating, segmented
Cards	Basic, info, list-detail
Navigation & Lists	Tab bar, bottom nav, list tiles, expansion tiles
Dialogs & Sheets	Alert, confirm, bottom sheet
Feedback	Loading, empty, error, toasts
Progress & Snackbar	Progress bars, themed snackbar variants
Advanced	Stepper, banner, counter, skeleton, clipboard, tooltip...
Media	Images, avatars, status avatars
Typography	All Material 3 text styles
Layout & Grid	Spacing, responsive grid, gradient containers
Misc	Badges, dividers, shimmer, popup menu
Theme Tokens	Colors, spacing, sizing, radius, shadows, durations

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
shimmer	Skeleton loading animations

Testing

The package includes 175+ widget tests covering all components:

flutter test              # Run all tests
flutter test --coverage   # With coverage report
flutter analyze           # Static analysis

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.