pub version flutter license

❄️ Frosted

A complete, highly customizable Flutter UI kit with a stunning frosted glass aesthetic.

Glassmorphism done right — backdrop blur, specular highlights, gradient sheen, and 40+ components ready for production.

✨ Features

Feature Description
🪟 Frosted Glass Effect Real BackdropFilter blur with gradient tint, luminous borders, and specular highlights
🎛️ Highly Customizable Control glossiness, blur, opacity, colors, borders, shadows, and animations via FrostedThemeData
🧩 Complete UI Kit Containers, buttons, inputs, navigation, pickers, dialogs, and more
🌍 Localization Ready Integrates with MaterialLocalizations and supports custom labels
↔️ RTL / LTR Built with EdgeInsetsDirectional, AlignmentDirectional, and direction-aware icons
🎨 Dark & Light Adapts surface colors and text contrast to Theme.brightness

📦 Installation

Add frosted to your pubspec.yaml:

dependencies:
  frosted: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start

Wrap your app with FrostedMessengerScope + FrostedTheme:

MaterialApp(
  builder: (context, child) => FrostedMessengerScope(
    child: FrostedTheme(
      data: const FrostedThemeData(glossiness: 0.78),
      child: child!,
    ),
  ),
  home: const HomePage(),
)

Show floating messages:

showFrostedMessage(
  context: context,
  type: FrostedMessageType.success,
  title: 'Saved',
  message: 'Your changes were saved.',
);

// Or via controller:
FrostedMessengerScope.of(context).showError('Connection failed');

🔔 Floating Messages

Frosted messages appear at the top of the screen (not scaffold snackbars):

  • Newest message appears first
  • Older messages slide down smoothly
  • Supports stacked queue (up to 5 by default)
  • Types: info, success, warning, error
  • Fully customizable via FrostedMessageStyle
FrostedMessengerScope(
  controller: FrostedMessengerController(maxVisible: 4),
  child: app,
)

showFrostedMessage(
  context: context,
  type: FrostedMessageType.warning,
  title: 'Warning',
  message: 'Please review your input.',
  duration: Duration(seconds: 5),
  actionLabel: 'Review',
  onAction: () => openReview(),
);

🚀 Quick Start (components)

Wrap your app with FrostedTheme and start using components:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: FrostedTheme(
        data: const FrostedThemeData(
          glossiness: 0.78,
          activeColor: Color(0xFF2DD4BF),
        ),
        child: const HomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FrostedCard(
          title: const Text('Welcome'),
          child: FrostedButton(
            onPressed: () {},
            child: const Text('Get Started'),
          ),
        ),
      ),
    );
  }
}

Tip: Place frosted widgets over colorful or image backgrounds to see the full glass effect.

🎛️ Theming & Customization

Glossiness

The glossiness parameter (0.0 → 1.0) controls how frosted vs. clear the glass appears:

Glossiness Effect
0.6 Heavy frost — strong blur, milky appearance
0.75 Balanced default
0.9 Crystal clear — minimal blur, high transparency 
FrostedTheme(
  data: const FrostedThemeData(
    glossiness: 0.8,
    surfaceOpacity: 0.14,
    borderWidth: 0.75,
    borderRadius: BorderRadius.all(Radius.circular(16)),
    activeColor: Color(0xFF2DD4BF),
    enableSpecularHighlight: true,
    specularOpacity: 0.35,
    sheenOpacity: 0.08,
  ),
  child: myApp,
)

Per-Component Overrides

Every component accepts an optional theme parameter:

FrostedContainer(
  glossiness: 0.6,
  borderRadius: BorderRadius.circular(24),
  child: Text('Custom glass'),
)

Accessing Theme in Build Methods

final theme = context.frostedTheme;
final textColor = context.frostedTextColor;
final activeColor = context.frostedActiveColor;

🧩 Components

Layout & Surfaces

Widget Description
FrostedSurface Core glass surface with blur, gradient, border, and specular highlights
FrostedContainer General-purpose frosted container
FrostedCard Card with optional title, subtitle, and actions
FrostedDivider Subtle frosted separator line

Buttons

Widget Description
FrostedButton Primary button — filled, outlined, text, tonal variants
FrostedIconButton Square icon button
FrostedTextButton Minimal text button
FrostedFAB Floating action button

Inputs & Selection

Widget Description
FrostedTextField Text input with label, hint, prefix/suffix
FrostedDropdown Dropdown selector
FrostedCheckbox Frosted checkbox with tristate support
FrostedRadio Frosted radio button
FrostedSwitch Toggle switch with optional ON/OFF labels
FrostedSlider Range slider
FrostedChip Tag/chip with delete action
FrostedBadge Notification badge overlay
Widget Description
FrostedAppBar Frosted app bar with RTL-aware back button
FrostedTabBar Tab bar with frosted indicator
FrostedBottomNavigationBar Bottom navigation
FrostedNavigationRail Side navigation rail
FrostedSegmentedControl Segmented tab selector
FrostedPagination Page navigation controls

Lists & Menus

Widget Description
FrostedListTile List item with leading/trailing
FrostedExpansionTile Expandable list section
FrostedMenu Vertical dropdown menu
FrostedPopupMenuButton Popup menu trigger
FrostedTooltip Frosted-styled tooltip

Progress

Widget Description
FrostedLinearProgress Horizontal progress bar
FrostedCircularProgress Circular progress indicator

Overlays

Widget / Function Description
FrostedDialog Glass dialog widget
showFrostedDialog Show a frosted dialog
showFrostedAlertDialog Alert dialog with localized buttons
showFrostedBottomSheet Frosted bottom sheet
FrostedModal Full-screen modal overlay
FrostedMessengerScope Top floating message host (wrap your app)
showFrostedMessage Show a frosted floating message
FrostedMessageType info, success, warning, error
FrostedMessengerController Queue multiple messages with animations

Pickers

Widget / Function Description
showFrostedDatePicker Date picker dialog
showFrostedTimePicker Time picker with scroll wheels
FrostedDatePickerField Tappable date field
FrostedTimePickerField Tappable time field
FrostedStrings Optional string overrides (alias: FrostedPickerLabels)
FrostedLocalizations Resolved strings from app delegates + overrides

🌍 Localization & RTL

How string resolution works

Frosted follows your app's existing localization delegates automatically. Resolution priority (highest first):

  1. Per-widget labels / FrostedStrings parameter
  2. FrostedStringsScope or FrostedThemeData.strings
  3. FrostedLocalizations.delegate built-in catalog (ar, fr, de, …)
  4. App MaterialLocalizations from your localizationsDelegates

Setup with existing app i18n

If your app already has Material localizations, just add the frost delegate:

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    FrostedLocalizations.delegate, // optional frost catalog
    AppLocalizations.delegate,     // your app delegate
  ],
  supportedLocales: AppLocalizations.supportedLocales,
)

Or append only missing delegates:

localizationsDelegates: [
  ...frostedLocalizationDelegatesFor(yourExistingDelegates),
  ...yourExistingDelegates,
],

Global overrides via theme

FrostedTheme(
  data: FrostedThemeData(
    strings: FrostedStrings(
      selectDate: 'اختر التاريخ',
      switchOnLabel: 'تشغيل',
      switchOffLabel: 'إيقاف',
    ),
  ),
  child: app,
)

Per-screen or per-widget overrides

FrostedStringsScope(
  strings: const FrostedStrings(confirm: 'حفظ'),
  child: MyForm(),
)

// Or per picker:
showFrostedDatePicker(
  context: context,
  labels: const FrostedStrings(selectDate: 'تاريخ الميلاد'),
  // ...
);

Access resolved strings in code

final l10n = context.frostedL10n;
Text(l10n.selectDate);

RTL Support

All components use directional APIs (EdgeInsetsDirectional, AlignmentDirectional, PositionedDirectional). Wrap your app with Directionality or set locale to an RTL language:

Directionality(
  textDirection: TextDirection.rtl,
  child: FrostedAppBar(title: Text('مكتبة Frosted')),
)

The app bar back button, list tile chevrons, and pagination automatically respect text direction.

📱 Example App

A comprehensive showcase lives in the example/ folder:

cd example
flutter run

The demo includes:

  • All component categories in tabbed navigation
  • Live glossiness toggle via FAB
  • English ↔ Arabic locale switch with RTL
  • Glossiness comparison panels (0.6 – 0.9)
  • Forms, pickers, dialogs, and navigation patterns

🏗️ Architecture

lib/
├── frosted.dart                  # Public API exports
└── src/
    ├── theme/                    # FrostedTheme, FrostedThemeData
    ├── foundation/               # FrostedSurface, decorations
    ├── components/               # All UI widgets
    ├── overlays/                 # Dialogs, sheets, snackbars
    └── pickers/                  # Date/time pickers

Core concept: Every component builds on FrostedSurface, which applies:

  1. ClipRRect — bounds the blur
  2. BackdropFilter — blurs content behind
  3. LinearGradient — surface tint and sheen
  4. CustomPainter — specular edge highlights and corner glints
  5. BoxShadow — depth separation

📋 FrostedThemeData Reference

Property Default Description
glossiness 0.75 Glass clarity (0 = heavy frost, 1 = clear)
minBlurSigma 4.0 Blur at max glossiness
maxBlurSigma 28.0 Blur at min glossiness
surfaceOpacity 0.12 Surface tint opacity
borderWidth 0.75 Edge border width
borderRadius 12 Default corner radius
activeColor #2DD4BF Accent / selected state color
enableSpecularHighlight true Edge glints and diagonal sheen
animationDuration 200ms Default animation duration

🤝 Contributing

Contributions are welcome! Please open an issue or PR on GitHub.

📄 License

MIT License — see LICENSE for details.

Built with ❄️ for Flutter developers who love glassmorphism.

Libraries

frosted