### Run Example Project

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Provides instructions on how to run the example application for glovex_liquid_ui. This involves navigating to the example directory and using the Flutter CLI to execute the app.

```bash
cd example
flutter run
```

--------------------------------

### Install glovex_liquid_ui Package

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Add the glovex_liquid_ui package to your project's dependencies in the pubspec.yaml file.

```yaml
dependencies:
  glovex_liquid_ui: ^1.2.2
```

--------------------------------

### LiquidGlassInput Widget Examples

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Shows how to implement the LiquidGlassInput widget, a Cupertino-style text input with glassmorphism effects. Examples include email input with prefix icons, password input with visibility toggle, and inputs with custom suffix widgets.

```dart
// Email input with prefix icon
final emailController = TextEditingController();

LiquidGlassInput(
  controller: emailController,
  placeholder: 'Enter email address',
  prefix: const Icon(Icons.mail_outline, color: Colors.white70),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
  onChanged: (value) => print('Email: $value'),
  onSubmitted: (value) => FocusScope.of(context).nextFocus(),
)

// Password input with built-in visibility toggle
final passwordController = TextEditingController();

LiquidGlassInput(
  controller: passwordController,
  placeholder: 'Enter password',
  obscureText: true,
  showPasswordToggle: true,
  prefix: const Icon(Icons.lock_outline, color: Colors.white70),
  textInputAction: TextInputAction.done,
  onSubmitted: (value) => _handleLogin(),
)

// Input with custom suffix widget
LiquidGlassInput(
  controller: searchController,
  placeholder: 'Search...',
  prefix: const Icon(Icons.search, color: Colors.white70),
  suffix: IconButton(
    icon: const Icon(Icons.clear, color: Colors.white70, size: 18),
    onPressed: () => searchController.clear(),
  ),
  onChanged: (value) => _performSearch(value),
)
```

--------------------------------

### LiquidGlassButton Widget Examples

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Illustrates the use of the LiquidGlassButton widget, including primary and ghost variants. Examples cover buttons with leading icons, full-width expansion, custom alignment, and usage for navigation.

```dart
// Primary button with leading icon
LiquidGlassButton(
  label: 'Continue',
  leading: const Icon(Icons.arrow_forward, color: Colors.white, size: 18),
  onPressed: () {
    print('Button pressed');
  },
)

// Full-width expanded button
LiquidGlassButton(
  label: 'Sign In',
  expanded: true,
  alignment: Alignment.center,
  onPressed: () => Navigator.pushNamed(context, '/login'),
)

// Ghost variant for secondary actions
LiquidGlassButton(
  label: 'Cancel',
  variant: LiquidGlassButtonVariant.ghost,
  onPressed: () => Navigator.pop(context),
)

// Start-aligned content in expanded button
LiquidGlassButton(
  label: 'Select Option',
  expanded: true,
  alignment: Alignment.centerLeft,
  leading: const Icon(Icons.chevron_right, color: Colors.white),
  onPressed: () {},
)
```

--------------------------------

### LiquidGlassCard Widget Examples

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Demonstrates the usage of the LiquidGlassCard widget for creating glassmorphism-styled cards. It shows basic usage, performance-optimized cards for lists using fake blur, and cards with custom dimensions and real blur settings.

```dart
// Basic glass card with default styling
LiquidGlassCard(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Welcome Back',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 8),
      Text(
        'Your dashboard is ready',
        style: TextStyle(color: Colors.white70),
      ),
    ],
  ),
)

// Performance-optimized card for lists (no real blur)
LiquidGlassCard(
  blurMode: LiquidBlurMode.fake,
  borderRadius: BorderRadius.circular(12),
  height: 80,
  margin: const EdgeInsets.symmetric(vertical: 4),
  child: const Text('List item card', style: TextStyle(color: Colors.white)),
)

// Card with custom dimensions and blur settings
LiquidGlassCard(
  width: 300,
  height: 200,
  enableBlur: true,
  blurMode: LiquidBlurMode.real,
  blur: 18.0,
  shrinkWrap: false,
  child: Center(
    child: Text('Hero Card', style: TextStyle(color: Colors.white, fontSize: 24)),
  ),
)
```

--------------------------------

### Install Glovex Liquid UI Package

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Instructions for adding the glovex_liquid_ui package to your Flutter project's pubspec.yaml file and importing it for use.

```yaml
dependencies:
  glovex_liquid_ui: ^1.2.2
```

```dart
import 'package:glovex_liquid_ui/glovex_liquid_ui.dart';
```

--------------------------------

### Basic LiquidGlassCard Usage

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

A simple example demonstrating how to use the LiquidGlassCard widget to create a glass-like UI element with text content.

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

--------------------------------

### GET /widgets/LiquidGlassCard

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

The LiquidGlassCard is a fundamental container component that applies a glassmorphism effect to its child content. It is recommended to use this with light-colored text or icons for optimal visual contrast.

```APIDOC
## GET /widgets/LiquidGlassCard

### Description
Displays a glass-effect container for UI content.

### Method
GET

### Parameters
#### Request Body
- **child** (Widget) - Required - The content to be displayed inside the glass card.

### Request Example
```dart
LiquidGlassCard(
  child: const Text('Hello Glass UI', style: TextStyle(color: Colors.white)),
)
```
```

--------------------------------

### Implement LiquidGlass Layout Components

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Demonstrates usage of layout components like sections, profile headers, stats cards, loaders, and empty states.

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

const LiquidGlassProfileHeader(name: 'Alex Johnson', email: 'alex@example.com');

const LiquidGlassStatsCard(label: 'Revenue', value: '$12.4K', trend: '+8.1%');

const LiquidGlassLoader(label: 'Loading...');

LiquidGlassEmptyState(
  title: 'No Data',
  message: 'Start by adding your first item.',
  action: LiquidGlassButton(label: 'Add Item', onPressed: () {}),
);
```

--------------------------------

### Import glovex_liquid_ui Package

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Import the necessary library to use the widgets and functionalities provided by glovex_liquid_ui.

```dart
import 'package:glovex_liquid_ui/glovex_liquid_ui.dart';
```

--------------------------------

### Implement LiquidBottomNavScaffold for Stateful Navigation

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Demonstrates how to use the LiquidBottomNavScaffold widget to manage stateful bottom navigation without external routers. It requires defining a list of LiquidGlassBottomNavItem objects and managing the current index via setState.

```dart
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return LiquidBottomNavScaffold(
      currentIndex: _currentIndex,
      onTap: (index) => setState(() => _currentIndex = index),
      items: const [
        LiquidGlassBottomNavItem(icon: CupertinoIcons.house, activeIcon: CupertinoIcons.house_fill, label: 'Home'),
        LiquidGlassBottomNavItem(icon: CupertinoIcons.person, activeIcon: CupertinoIcons.person_fill, label: 'Profile'),
        LiquidGlassBottomNavItem(icon: CupertinoIcons.settings, activeIcon: CupertinoIcons.settings_solid, label: 'Settings'),
      ],
      background: const GradientBackground(),
      padding: const EdgeInsets.symmetric(horizontal: 16),
      preserveState: true,
      navActiveColor: Colors.white,
      navAnimationDuration: const Duration(milliseconds: 280),
      children: const [HomePage(), ProfilePage(), SettingsPage()],
    );
  }
}
```

--------------------------------

### Implement LiquidGlass Foundation Containers

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Demonstrates the use of LiquidGlassSurface and LiquidGlassCard for creating frosted-glass containers with customizable blur, padding, and border radius.

```dart
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)),
);
```

--------------------------------

### Create LiquidGlass Buttons

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Shows how to implement standard and full-width LiquidGlassButtons with support for icons and press callbacks.

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

LiquidGlassButton(
  label: 'Continue',
  expanded: true,
  onPressed: () {},
);
```

--------------------------------

### Responsive Layout with Liquid APIs

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Illustrates the use of built-in responsive APIs like `liquidValue` for adaptive spacing and `liquidScale` for text scaling. These features help create UIs that adapt to different screen sizes.

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

--------------------------------

### Integrate Liquid UI with GoRouter

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Shows how to use LiquidBottomNavScaffold.router to integrate with GoRouter's ShellRoute. It utilizes helper functions like liquidTabIndexFromLocation and liquidGoToTab to synchronize navigation state with URL paths.

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

final router = GoRouter(
  initialLocation: '/home',
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        final currentIndex = liquidTabIndexFromLocation(state.matchedLocation, tabPaths);
        return LiquidBottomNavScaffold.router(
          currentIndex: currentIndex,
          onTap: (index) => liquidGoToTab(context: context, index: index, tabPaths: tabPaths),
          items: const [
            LiquidGlassBottomNavItem(icon: CupertinoIcons.house, activeIcon: CupertinoIcons.house_fill, label: 'Home'),
            LiquidGlassBottomNavItem(icon: CupertinoIcons.person, activeIcon: CupertinoIcons.person_fill, label: 'Profile'),
            LiquidGlassBottomNavItem(icon: CupertinoIcons.settings, activeIcon: CupertinoIcons.settings_solid, label: 'Settings'),
          ],
          background: const GradientBackground(),
          routerChild: child,
        );
      },
      routes: [
        GoRoute(path: '/home', pageBuilder: (context, state) => buildLiquidTabTransitionPage(state: state, child: const HomePage())),
        GoRoute(path: '/profile', pageBuilder: (context, state) => buildLiquidTabTransitionPage(state: state, child: const ProfilePage())),
        GoRoute(path: '/settings', pageBuilder: (context, state) => buildLiquidTabTransitionPage(state: state, child: const SettingsPage())),
      ],
    ),
  ],
);
```

--------------------------------

### POST /navigation/LiquidBottomNavScaffold

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

The LiquidBottomNavScaffold provides a structured layout for tab-based navigation, supporting both standard state management and go_router integration.

```APIDOC
## POST /navigation/LiquidBottomNavScaffold

### Description
Creates a scaffold with a liquid-glass bottom navigation bar.

### Method
POST

### Parameters
#### Request Body
- **currentIndex** (int) - Required - The index of the currently active tab.
- **onTap** (Function) - Required - Callback triggered when a tab is selected.
- **items** (List<LiquidGlassBottomNavItem>) - Required - List of navigation items.
- **children** (List<Widget>) - Required - The pages corresponding to each tab.

### Request Example
```dart
LiquidBottomNavScaffold(
  currentIndex: currentIndex,
  onTap: (i) => setState(() => currentIndex = i),
  items: const [
    LiquidGlassBottomNavItem(icon: CupertinoIcons.home, label: 'Home'),
    LiquidGlassBottomNavItem(icon: CupertinoIcons.person, label: 'Profile'),
  ],
  children: const [
    HomePage(),
    ProfilePage(),
  ],
)
```
```

--------------------------------

### Configure and Access LiquidGlassTheme

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Explains how to register LiquidGlassTheme in MaterialApp extensions and access it within widgets using context. It also demonstrates how to customize theme properties like blur settings and tint opacity.

```dart
MaterialApp(
  theme: ThemeData(extensions: [LiquidGlassTheme.light(brandTint: const Color(0xFF5AC8FA))]),
  darkTheme: ThemeData(brightness: Brightness.dark, extensions: [LiquidGlassTheme.dark(brandTint: const Color(0xFF7DF9FF))]),
  themeMode: ThemeMode.system,
  home: const MyApp(),
);

Widget build(BuildContext context) {
  final glassTheme = context.liquidGlassTheme;
  return Container(
    decoration: BoxDecoration(
      color: glassTheme.tintColor.withOpacity(glassTheme.tintOpacity),
      borderRadius: glassTheme.cardRadius,
    ),
    child: child,
  );
}
```

--------------------------------

### Implement Liquid Glass Content Widgets

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Demonstrates the usage of content-focused widgets such as profile headers, stats cards, loading indicators, empty states, and navigation bars.

```dart
// Profile header with avatar
const LiquidGlassProfileHeader(
  name: 'Alex Johnson',
  email: 'alex@example.com',
  avatar: NetworkImage('https://example.com/avatar.jpg'),
)

// Stats card for dashboards
Row(
  children: const [
    Expanded(
      child: LiquidGlassStatsCard(
        label: 'Revenue',
        value: '$12.4K',
        trend: '+8.1%',
      ),
    ),
    SizedBox(width: 12),
    Expanded(
      child: LiquidGlassStatsCard(
        label: 'Users',
        value: '3,219',
        trend: '+3.4%',
      ),
    ),
  ],
)

// Loading indicator
const LiquidGlassLoader(label: 'Loading data...')

// Empty state with action
LiquidGlassEmptyState(
  title: 'No Results',
  message: 'Try adjusting your search filters.',
  icon: const Icon(Icons.search_off, size: 48, color: Colors.white54),
  action: LiquidGlassButton(
    label: 'Clear Filters',
    onPressed: () => _clearFilters(),
  ),
)

// Top bar navigation
const LiquidGlassTopBar(
  title: 'Dashboard',
  leading: Icon(CupertinoIcons.back, color: Colors.white),
  trailing: Icon(CupertinoIcons.bell, color: Colors.white),
)
```

--------------------------------

### Responsive Layouts and Text Scaling with Liquid UI

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Implement responsive UIs by selecting values based on screen breakpoints (mobile, tablet, desktop) and applying responsive text scaling. This utility helps adapt layouts and text size automatically. It uses context extensions like `liquidScreenType`, `liquidValue`, and `isLiquidMobile` for dynamic adjustments.

```dart
Widget build(BuildContext context) {
  // Get current screen type
  final screenType = context.liquidScreenType; // mobile, tablet, or desktop

  // Select values based on breakpoint
  final padding = context.liquidValue<double>(
    mobile: 16,
    tablet: 24,
    desktop: 32,
  );

  final columns = context.liquidValue<int>(
    mobile: 1,
    tablet: 2,
    desktop: 3,
  );

  // Check specific screen types
  if (context.isLiquidMobile) {
    return MobileLayout();
  }

  return GridView.count(
    crossAxisCount: columns,
    padding: EdgeInsets.all(padding),
    children: items,
  );
}

// Responsive text scaling
final titleStyle = const TextStyle(
  fontSize: 24,
  fontWeight: FontWeight.bold,
).liquidScale(context);

final bodyStyle = TextStyle(
  fontSize: LiquidSizes.bodySize,  // Auto-scaled by screen width
  color: Colors.white,
);

// Using LiquidResponsiveBuilder for conditional layouts
LiquidResponsiveBuilder(
  builder: (context, screenType) {
    switch (screenType) {
      case LiquidScreenType.mobile:
        return MobileView();
      case LiquidScreenType.tablet:
        return TabletView();
      case LiquidScreenType.desktop:
        return DesktopView();
    }
  },
)

// Access centralized sizing tokens
final gap = LiquidSizes.sectionContentGap;
final iconSize = LiquidSizes.iconMd;
final navHeight = LiquidSizes.bottomNavHeight;
```

--------------------------------

### Implement LiquidGlass Selection Controls

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Shows how to use LiquidGlassDropdown, Switch, Checkbox, and Radio buttons for user selection interactions.

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

Row(
  children: [
    LiquidGlassSwitch(value: enabled, onChanged: (v) {}),
    const SizedBox(width: 8),
    LiquidGlassCheckbox(value: checked, onChanged: (v) {}),
    const SizedBox(width: 8),
    LiquidGlassRadio<String>(
      value: 'basic',
      groupValue: selectedPlan,
      onChanged: (v) {},
    ),
  ],
);
```

--------------------------------

### GoRouter Integration for Tab Navigation

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Demonstrates how to integrate LiquidBottomNavScaffold with GoRouter for tab-based navigation. It uses helper functions to manage the current tab index and navigation between routes. This is recommended for starter apps.

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

ShellRoute(
  builder: (context, state, child) {
    final currentIndex = liquidTabIndexFromLocation(
      state.matchedLocation,
      tabPaths,
    );

    return LiquidBottomNavScaffold.router(
      currentIndex: currentIndex,
      onTap: (i) => liquidGoToTab(
        context: context,
        index: i,
        tabPaths: tabPaths,
      ),
      items: const [
        LiquidGlassBottomNavItem(icon: CupertinoIcons.home, label: 'Home'),
        LiquidGlassBottomNavItem(icon: CupertinoIcons.person, label: 'Profile'),
        LiquidGlassBottomNavItem(icon: CupertinoIcons.settings, label: 'Settings'),
      ],
      routerChild: child,
    );
  },
  routes: [
    GoRoute(
      path: '/home',
      pageBuilder: (_, state) => buildLiquidTabTransitionPage(
        state: state,
        child: const HomePage(),
      ),
    ),
  ],
)
```

--------------------------------

### Theming with LiquidGlassTheme

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Shows how to apply custom themes using ThemeData extensions, including setting brand tints for light and dark modes. This allows for consistent styling across the application.

```dart
MaterialApp(
  theme: ThemeData(
    extensions: [
      LiquidGlassTheme.light(brandTint: const Color(0xFF5AC8FA)),
    ],
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    extensions: [
      LiquidGlassTheme.dark(brandTint: const Color(0xFF7DF9FF)),
    ],
  ),
  home: const MyPage(),
)
```

--------------------------------

### Implement LiquidGlass Input Fields

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Demonstrates standard text input and password input with built-in visibility toggles using the LiquidGlassInput widget.

```dart
LiquidGlassInput(
  controller: controller,
  placeholder: 'Enter email',
  prefix: const Icon(Icons.mail_outline, color: Colors.white),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.done,
  onChanged: (value) {},
  onSubmitted: (value) {},
);

LiquidGlassInput(
  controller: passwordController,
  placeholder: 'Password',
  obscureText: true,
  showPasswordToggle: true,
);
```

--------------------------------

### Implement Liquid Glass Input Controls

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Demonstrates the usage of various input widgets including switches, checkboxes, radio buttons, dropdowns, and search bars with liquid-glass styling.

```dart
// Switch control
LiquidGlassSwitch(
  value: isDarkMode,
  onChanged: (value) => setState(() => isDarkMode = value),
)

// Checkbox control
LiquidGlassCheckbox(
  value: acceptTerms,
  onChanged: (value) => setState(() => acceptTerms = value ?? false),
)

// Radio button group
Column(
  children: [
    LiquidGlassRadio<String>(
      value: 'basic',
      groupValue: selectedPlan,
      onChanged: (v) => setState(() => selectedPlan = v),
    ),
    LiquidGlassRadio<String>(
      value: 'premium',
      groupValue: selectedPlan,
      onChanged: (v) => setState(() => selectedPlan = v),
    ),
  ],
)

// Dropdown selector
LiquidGlassDropdown<String>(
  value: selectedCountry,
  items: const [
    DropdownMenuItem(value: 'us', child: Text('United States')),
    DropdownMenuItem(value: 'uk', child: Text('United Kingdom')),
    DropdownMenuItem(value: 'ca', child: Text('Canada')),
  ],
  onChanged: (value) => setState(() => selectedCountry = value),
)

// Search bar
LiquidGlassSearchBar(
  controller: searchController,
  placeholder: 'Search products...',
  onChanged: (query) => _filterResults(query),
)
```

--------------------------------

### Configuring Glass Blur Performance

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Explains how to manage the performance impact of glass blur effects by choosing between `LiquidBlurMode.real` and `LiquidBlurMode.fake`. It also shows how to configure blur properties globally via theme or per-widget.

```dart
ThemeData(
  extensions: [
    LiquidGlassTheme.dark(
      brandTint: const Color(0xFF7DF9FF),
    ).copyWith(
      enableBlur: true,
      blurMode: LiquidBlurMode.real,
      blurSigma: 12,
    ),
  ],
)
```

```dart
LiquidGlassCard(
  blurMode: LiquidBlurMode.fake,
  child: const Text('Fast card'),
)
```

--------------------------------

### Bottom Navigation Scaffold (Without Router)

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Implement a bottom navigation bar using LiquidBottomNavScaffold for apps where routing is managed manually or not dependent on go_router.

```dart
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(),
  ],
)
```

--------------------------------

### LiquidGlassSection and LiquidGlassListTile for Content Organization

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Organize content into visually appealing sections with titled headers and list items using `LiquidGlassSection` and `LiquidGlassListTile`. These widgets are optimized for performance and offer customizable leading and trailing elements, ideal for settings or item lists.

```dart
// Section with list tiles
LiquidGlassSection(
  title: 'Account Settings',
  subtitle: 'Manage your preferences',
  blurMode: LiquidBlurMode.fake,  // Performance-optimized default
  children: [
    LiquidGlassListTile(
      title: 'Notifications',
      subtitle: 'Push and email alerts',
      leading: const Icon(Icons.notifications_outlined, color: Colors.white70),
      trailing: LiquidGlassSwitch(
        value: notificationsEnabled,
        onChanged: (v) => setState(() => notificationsEnabled = v),
      ),
    ),
    const SizedBox(height: 8),
    LiquidGlassListTile(
      title: 'Privacy',
      subtitle: 'Control your data',
      leading: const Icon(Icons.lock_outline, color: Colors.white70),
      trailing: const Icon(Icons.chevron_right, color: Colors.white54),
      onTap: () => Navigator.pushNamed(context, '/privacy'),
    ),
    const SizedBox(height: 8),
    LiquidGlassListTile(
      title: 'Sign Out',
      leading: const Icon(Icons.logout, color: Colors.redAccent),
      onTap: () => _handleSignOut(),
    ),
  ],
)
```

--------------------------------

### LiquidGlassToast and LiquidGlassModalSheet for Overlays

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

Display temporary messages and modal content with a liquid-glass aesthetic using `LiquidGlassToast` and `LiquidGlassModalSheet`. `LiquidGlassToast` is for brief notifications, while `LiquidGlassModalSheet` presents more complex, interactive content in a dismissible overlay.

```dart
// Show a toast notification
LiquidGlassToast.show(
  context,
  'Settings saved successfully',
  duration: const Duration(seconds: 3),
);

// Show a modal bottom sheet
await LiquidGlassModalSheet.show(
  context,
  Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Text(
        'Confirm Action',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 16),
      const Text(
        'Are you sure you want to proceed?',
        style: TextStyle(color: Colors.white70),
      ),
      const SizedBox(height: 24),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          LiquidGlassButton(
            label: 'Cancel',
            variant: LiquidGlassButtonVariant.ghost,
            onPressed: () => Navigator.pop(context),
          ),
          LiquidGlassButton(
            label: 'Confirm',
            onPressed: () {
              Navigator.pop(context);
              _performAction();
            },
          ),
        ],
      ),
    ],
  ),
);
```

--------------------------------

### LiquidGlassInput Component

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

A Cupertino-style text input wrapped in a liquid-glass card with support for password toggles and prefix/suffix widgets.

```APIDOC
## LiquidGlassInput

### Description
A text input field styled with glassmorphism, featuring built-in support for password visibility toggling and custom prefix/suffix widgets.

### Parameters
- **controller** (TextEditingController) - Required - Controller for the text input.
- **placeholder** (String) - Optional - Hint text shown when input is empty.
- **obscureText** (bool) - Optional - Hides text for password fields.
- **showPasswordToggle** (bool) - Optional - Adds an eye icon to toggle password visibility.

### Usage Example
```dart
LiquidGlassInput(
  controller: myController,
  placeholder: 'Enter password',
  obscureText: true,
  showPasswordToggle: true
)
```
```

--------------------------------

### Show LiquidGlassModalSheet

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Illustrates how to present a modal bottom sheet with custom content using LiquidGlassModalSheet. This is suitable for displaying detailed information or interactive elements that require user attention. It takes a BuildContext and a child widget for the sheet's content.

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

--------------------------------

### Create LiquidGlassTopBar

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Shows how to create a custom top navigation bar using LiquidGlassTopBar. This widget allows for a title, a leading icon (e.g., back button), and a trailing icon (e.g., notification bell). It's a common UI element for app headers.

```dart
const LiquidGlassTopBar(
  title: 'Dashboard',
  leading: Icon(CupertinoIcons.back),
  trailing: Icon(CupertinoIcons.bell),
)
```

--------------------------------

### LiquidGlassCard Component

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

The primary container widget for creating liquid-glass styled cards with layered blur, highlights, and asymmetric border effects.

```APIDOC
## LiquidGlassCard

### Description
A container widget that provides a frosted glass visual effect. It supports both real backdrop blur (for premium effects) and a performant 'fake' blur mode for lists.

### Parameters
- **padding** (EdgeInsets) - Optional - Internal padding for the card content.
- **blurMode** (LiquidBlurMode) - Optional - Choose between 'real' or 'fake' blur.
- **blur** (double) - Optional - Intensity of the blur effect.
- **borderRadius** (BorderRadius) - Optional - Corner radius for the card.
- **child** (Widget) - Required - The content to be displayed inside the card.

### Usage Example
```dart
LiquidGlassCard(
  blurMode: LiquidBlurMode.real,
  blur: 18.0,
  child: Text('Hello World')
)
```
```

--------------------------------

### Show LiquidGlassToast Message

Source: https://github.com/shafi21064/glovex_liquid_ui/blob/main/README.md

Demonstrates how to display a temporary toast message using LiquidGlassToast. This component is useful for providing user feedback for actions like saving or confirmation. It requires a BuildContext and a message string.

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

--------------------------------

### LiquidGlassButton Component

Source: https://context7.com/shafi21064/glovex_liquid_ui/llms.txt

A styled button widget with primary and ghost variants, supporting full-width expansion and custom content alignment.

```APIDOC
## LiquidGlassButton

### Description
A button component designed to match the glassmorphism aesthetic, supporting icons, full-width expansion, and different variants.

### Parameters
- **label** (String) - Required - The text displayed on the button.
- **variant** (LiquidGlassButtonVariant) - Optional - 'primary' or 'ghost'.
- **expanded** (bool) - Optional - If true, the button fills the available width.
- **onPressed** (VoidCallback) - Required - Callback function when the button is clicked.

### Usage Example
```dart
LiquidGlassButton(
  label: 'Sign In',
  expanded: true,
  onPressed: () => print('Pressed')
)
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.