frosted 1.0.0

A comprehensive, highly customizable Flutter UI kit with a frosted glass aesthetic. Supports RTL/LTR and localization.

❄️ 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

Navigation

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.