glovex_liquid_ui #

glovex_liquid_ui is a reusable Flutter UI kit for liquid-glass style apps.

Table of Contents #

• Compatibility
• Installation
• Quick Start
• Bottom Navigation
• Responsive System
• Widget Catalog
• Run Example
• License

Compatibility #

• Dart: >=3.3.0 <4.0.0
• Flutter: >=3.24.0

Installation #

dependencies:
  glovex_liquid_ui: ^1.0.0

import 'package:glovex_liquid_ui/glovex_liquid_ui.dart';

Quick Start #

LiquidGlassCard(
  child: const Text(
    'Hello Glass UI',
    style: TextStyle(color: Colors.white),
  ),
)

Recommended for best visuals:

• Use a gradient or image background behind glass widgets.
• Prefer light text/icons (Colors.white) on glass surfaces.
• Build complex layouts with LiquidGlassCard and LiquidGlassSection.

Bottom Navigation #

Use this when tabs are your primary app structure.

LiquidBottomNavScaffold(
  currentIndex: currentIndex,
  onTap: (i) => setState(() => currentIndex = i),
  items: const [
    LiquidGlassBottomNavItem(icon: CupertinoIcons.home, label: 'Home'),
    LiquidGlassBottomNavItem(icon: CupertinoIcons.person, label: 'Profile'),
    LiquidGlassBottomNavItem(icon: CupertinoIcons.settings, label: 'Settings'),
  ],
  children: const [
    HomePage(),
    ProfilePage(),
    SettingsPage(),
  ],
)

GoRouter helper functions for tab navigation:

• liquidTabIndexFromLocation(...)
• liquidGoToTab(...)
• buildLiquidTabTransitionPage(...)

final tabPaths = ['/home', '/profile', '/settings'];

ShellRoute(
  builder: (context, state, child) => AppMainTabShell(
    currentIndex: liquidTabIndexFromLocation(state.matchedLocation, tabPaths),
    onTabTap: (i) => liquidGoToTab(context: context, index: i, tabPaths: tabPaths),
    child: child,
  ),
  routes: [
    GoRoute(
      path: '/home',
      pageBuilder: (_, state) => buildLiquidTabTransitionPage(
        state: state,
        child: const HomePage(),
      ),
    ),
  ],
)

Responsive System #

Built-in responsive APIs:

• context.liquidScreenType -> mobile, tablet, desktop
• context.liquidValue(...) -> breakpoint value selection
• context.liquidDouble(...) -> resolve LiquidAdaptiveDouble tokens
• context.liquidTextScale(...) -> adaptive text scaling
• TextStyle.liquidScale(context) -> text style scaling
• LiquidResponsiveBuilder -> screen-type based UI branching

Centralized token files:

• lib/src/foundation/liquid_responsive_tokens.dart
• lib/src/foundation/glass_tokens.dart

Example:

final gap = context.liquidValue<double>(mobile: 8, tablet: 12, desktop: 16);
final sectionGap = context.liquidDouble(LiquidResponsiveTokens.sectionContentGap);
final titleStyle = const TextStyle(fontSize: 18, fontWeight: FontWeight.w700)
    .liquidScale(context);

Widget Catalog #

Foundation #

• LiquidGlassSurface: Low-level frosted surface with blur/tint/border.
• LiquidGlassCard: Main reusable glass container.

LiquidGlassSurface(
  borderRadius: BorderRadius.circular(20),
  padding: const EdgeInsets.all(16),
  child: const Text('Surface', style: TextStyle(color: Colors.white)),
)

LiquidGlassCard(
  padding: const EdgeInsets.all(16),
  child: const Text('Card', style: TextStyle(color: Colors.white)),
)

API Quick Reference (Foundation)

Inputs and Controls #

• LiquidGlassButton
• LiquidGlassIconButton
• LiquidGlassInput
• LiquidGlassSearchBar
• LiquidGlassDropdown<T>
• LiquidGlassSwitch
• LiquidGlassCheckbox
• LiquidGlassRadio<T>

LiquidGlassButton(
  label: 'Continue',
  leading: const Icon(Icons.arrow_forward, color: Colors.white, size: 18),
  onPressed: () {},
)

LiquidGlassInput(
  controller: controller,
  placeholder: 'Enter email',
  prefix: const Icon(Icons.mail_outline, color: Colors.white),
)

LiquidGlassDropdown<String>(
  value: selected,
  items: const [
    DropdownMenuItem(value: 'One', child: Text('One')),
    DropdownMenuItem(value: 'Two', child: Text('Two')),
  ],
  onChanged: (v) {},
)

API Quick Reference (Inputs and Controls)

Content and Layout #

• LiquidGlassListTile
• LiquidGlassSection
• LiquidGlassEmptyState
• LiquidGlassProfileHeader
• LiquidGlassStatsCard
• LiquidGlassLoader

LiquidGlassSection(
  title: 'Profile',
  subtitle: 'Welcome back',
  children: [
    LiquidGlassListTile(
      title: 'Account',
      subtitle: 'user@example.com',
      leading: const Icon(Icons.person_outline),
      onTap: () {},
    ),
  ],
)

API Quick Reference (Content and Layout)

Overlays and Navigation #

• LiquidGlassToast
• LiquidGlassModalSheet
• LiquidGlassTopBar

LiquidGlassToast.show(context, 'Saved successfully');

await LiquidGlassModalSheet.show(
  context,
  const Text('Sheet content', style: TextStyle(color: Colors.white)),
);

API Quick Reference (Overlays and Navigation)

Run Example #

cd example
flutter run

License #

MIT