FMTUI #

A modern and customizable Flutter UI component library for building consistent and scalable applications.

license

✨ Overview #

FMTUI is a reusable Flutter UI component library designed to help developers build applications with a consistent and scalable design system.

It provides reusable widgets, design tokens, theming, responsive dimensions, typography, colors, and common UI utilities.

The goal of FMTUI is simple:

Build once, customize easily, and keep your Flutter applications visually consistent.

🚀 Live Demo #

Explore the complete FMTUI component showcase:

https://fmtui.vercel.app #

The showcase demonstrates the available components, design tokens, themes, customization options, playgrounds, and API usage.

📦 Installation #

Add FMTUI to your pubspec.yaml:

dependencies:
  fmtui: ^0.1.0

Then run:

flutter pub get

Or install it directly from:

https://pub.dev/packages/fmtui

🏁 Quick Start #

Import FMTUI:

import 'package:fmtui/fmtui.dart';

Configure the FMTUI theme:

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

void main() {
  runApp(
    MaterialApp(
      theme: AppTheme.light(),
      darkTheme: AppTheme.dark(),
      themeMode: ThemeMode.system,
      home: const ExamplePage(),
    ),
  );
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AppButton(
          label: 'Continue',
          onPressed: () {},
        ),
      ),
    );
  }
}

🎨 Features #

🎨 Customizable light and dark themes
🧩 Reusable Flutter UI components
📐 Design tokens for spacing, sizing, radius, and typography
🔤 Customizable typography
🌈 Theme-aware color system
📱 Responsive layout helpers
🔄 Runtime design-scale support
🧱 Ready-to-use common UI components
🛠️ Component playgrounds and API examples
♻️ Reusable design-system utilities
🌐 Flutter Web support

🧩 Components #

FMTUI currently includes:

Component	Description
`AppButton`	Customizable application buttons
`AppCard`	Flexible card component
`AppCheckbox`	Custom checkbox with sizing and labeling
`AppIcon`	Centralized icon component
`AppIconButton`	Icon-based action button
`AppLoader`	Loading indicators with multiple variants
`AppPopover`	Popover and contextual content
`AppProgress`	Linear and circular progress indicators
`AppRadio`	Radio buttons and radio groups
`AppSwitch`	Customizable switch component
`SegmentedButton`	Segmented selection control

More components will be added as the library evolves.

🎨 Theming #

FMTUI provides built-in light and dark themes:

MaterialApp(
  theme: AppTheme.light(),
  darkTheme: AppTheme.dark(),
  themeMode: ThemeMode.system,
);

You can customize the color system without modifying individual widgets:

MaterialApp(
  theme: AppTheme.light(
    colors: ColorVariables.light().copyWith(
      textBrandPrimary: Colors.blue,
      fgBrandPrimary: Colors.blue,
      btnBrandPrimary: Colors.white,
      btnBrandPrimaryBg: Colors.blue,
    ),
  ),
);

Components automatically consume the active theme through the FMTUI theme system.

🌗 Dark Mode #

FMTUI uses Flutter's standard theme system, so components automatically respond to the active theme.

MaterialApp(
  theme: AppTheme.light(),
  darkTheme: AppTheme.dark(),
  themeMode: ThemeMode.system,
);

You can also check the currently active theme:

if (context.isDarkMode) {
  // Dark theme
}

Or:

if (context.isLightMode) {
  // Light theme
}

📐 Design Tokens #

FMTUI includes reusable design tokens to help maintain consistent spacing and sizing throughout your application.

Spacing #

AppSpacing.xl
AppSpacing.twoxl
AppSpacing.threexl

Or access scaled values through BuildContext:

Padding(
  padding: EdgeInsets.all(context.spacingXL),
)

Radius #

context.radiusMD
context.radiusLG

Or:

BorderRadius.circular(context.radiusMD)

Icon Size #

context.iconSizeMD
context.iconSizeLG

Or:

Icon(
  Icons.home,
  size: context.iconSizeLG,
)

Component Size #

AppSize.sm
AppSize.md
AppSize.lg

Or:

SizedBox(
  width: context.sizeMD,
  height: context.sizeMD,
)

Typography #

AppFontSize.sm
AppFontSize.md
AppFontSize.lg

📱 Responsive Design #

FMTUI provides simple responsive helpers:

if (context.isMobile) {
  // Mobile layout
}

if (context.isTablet) {
  // Tablet layout
}

if (context.isDesktop) {
  // Desktop layout
}

You can also use responsive dimensions:

Container(
  width: context.dp(280),
  padding: EdgeInsets.all(context.spacingXL),
)

🔢 Design Scale #

FMTUI supports a configurable design scale.

For example:

AppTheme.light(
  scale: const AppScale(
    factor: 1.0,
  ),
);

You can increase the scale:

AppTheme.light(
  scale: const AppScale(
    factor: 1.25,
  ),
);

This allows design-system dimensions such as spacing, radius, icon sizes, and component sizes to scale consistently.

🛠️ Component Example #

For example, creating a button is simple:

AppButton(
  label: 'Continue',
  onPressed: () {
    // Handle action
  },
)

FMTUI components are designed to consume the active theme and design tokens rather than requiring each application to implement its own styling system.

📚 Documentation & Showcase #

The interactive showcase provides examples and playgrounds for FMTUI components.

🚀 Live Showcase #

https://fmtui.vercel.app

📦 Package #

https://pub.dev/packages/fmtui

The showcase includes:

Component examples
Interactive playgrounds
API usage
Light and dark themes
Design tokens
Responsive layouts
Customization examples

🏗️ Design System #

FMTUI is designed around a layered design-system architecture:

FMTUI
│
├── Theme
│   ├── Colors
│   ├── Typography
│   ├── Scale
│   └── Branding
│
├── Design Tokens
│   ├── Spacing
│   ├── Sizing
│   ├── Radius
│   ├── Font Size
│   └── Icon Size
│
├── Components
│   ├── AppButton
│   ├── AppCard
│   ├── AppCheckbox
│   ├── AppIcon
│   ├── AppIconButton
│   ├── AppLoader
│   ├── AppPopover
│   ├── AppProgress
│   ├── AppRadio
│   ├── AppSwitch
│   └── SegmentedButton
│
└── Utilities
    ├── Responsive Helpers
    ├── Theme Helpers
    └── Formatting Utilities

This structure allows applications to share a common visual language while still allowing individual projects to customize the theme.

🌐 Platform Support #

FMTUI is built for Flutter and supports the platforms supported by the Flutter framework.

The package currently supports:

Android
iOS
Web
Linux
macOS
Windows

🧪 Example Project #

A complete example application is included with the package.

The example acts as an interactive component showcase and demonstrates how the components, themes, design tokens, and responsive utilities can be used together.

🤝 Contributing #

Contributions, bug reports, feature requests, and improvements are welcome.

If you find a bug or have an idea for a new component, please open an issue or submit a pull request.

Before submitting a pull request, please make sure the project passes:

flutter analyze
flutter test

📋 Roadmap #

FMTUI is actively evolving.

Planned improvements include:

Additional UI components
More customization options
Expanded design tokens
Improved accessibility
More documentation
Additional examples
Improved animation support
Expanded form components

📄 License #

FMTUI is released under the MIT License.

See LICENSE for more information.

🔗 Links #

Resource	Link
📦 Pub.dev	fmtui
🚀 Live Demo	fmtui.vercel.app
📚 API Documentation	pub.dev API Reference
📋 Changelog	CHANGELOG.md
📄 License	MIT License

❤️ Built with Flutter #

FMTUI is built with Flutter and is intended to make building consistent Flutter applications faster, cleaner, and more enjoyable.

FMTUI — Build consistent Flutter interfaces, faster.

fmtui 0.1.3 fmtui: ^0.1.3 copied to clipboard

Metadata