FMTUI

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

pub package pub points license

📦 View on pub.dev · 🚀 Live Demo

✨ 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.

Libraries

fmtui