liquid_glass_effect 1.0.1

A flutter package to create a liquid glass effect ui.

Liquid Glass Effect - Flutter Package Documentation

Table of Contents

1. Overview
2. Installation
3. Theme Setup
4. Components
   • LiquidGlassBackground
   • LiquidGlassCard
   • LiquidGlassButtons
5. Customization
6. Examples
7. Contributing
8. License

---

Overview

Liquid Glass Effect is a Flutter package that implements iOS-inspired frosted glass effects with customizable themes and widgets. It provides a complete set of UI components with built-in liquid glass visual effects that work across all platforms.

---

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  liquid_glass_effect: ^1.0.1

Then run:

flutter pub get

---

Theme Setup

Basic Setup

import 'package:liquid_glass_ui/liquid_glass_ui.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Liquid Glass Demo',
      theme: createLiquidGlassTheme(),
      home: const MyHomePage(),
    );
  }
}

Custom Theme Configuration

theme: createLiquidGlassTheme(
  config: const LiquidGlassConfig(
    blurAmount: 25.0,
    highlightIntensity: 0.3,
    noiseOpacity: 0.05,
    primaryColor: Color(0xFF007AFF),
    secondaryColor: Color(0xFF34C759),
  ),
),

---

Components

LiquidGlassBackground

The foundation component that creates the frosted glass effect.

Properties:

• child (Widget): Content to display
• backgroundImage (ImageProvider): Optional background image
• blurAmount (double): Intensity of blur effect
• noiseOpacity (double): Opacity of noise texture
• highlightIntensity (double): Strength of liquid highlights
• highlightColor (Color): Color of highlights
• noiseColor (Color): Color of noise texture

Example:

LiquidGlassBackground(
  backgroundImage: AssetImage('assets/background.jpg'),
  child: Center(child: Text('Hello World')),
)

---

LiquidGlassCard

A card with frosted glass effect.

Properties:

• child (Widget): Card content
• borderRadius (double): Corner radius
• baseColor (Color): Base tint color
• blurAmount (double): Blur intensity
• padding (EdgeInsets): Inner padding
• onTap (VoidCallback): Tap handler
• borderColor (Color): Border color
• borderWidth (double): Border thickness
• animationDuration (Duration): Hover/press animation duration
• scaleFactor (double): Hover scale amount

Example:

LiquidGlassCard(
  borderRadius: 16,
  onTap: () => print('Card tapped'),
  child: ListTile(title: Text('Example Card')),
)

---

Liquid Glass Buttons

Custom Flutter buttons with a frosted glass-style overlay and theme-based styling.

LiquidGlassElevatedButton

A themed wrapper around ElevatedButton with glass-effect overlays on hover and press.

Constructor Parameters

Parameter	Type	Description
onPressed	VoidCallback?	Callback invoked when the button is pressed
child	Widget	Content of the button, usually a Text widget
style	ButtonStyle?	Optional button style override
autofocus	bool	Whether to auto-focus the button (default: false)
clipBehavior	Clip	Clipping behavior (default: Clip.none)

Example

LiquidGlassElevatedButton(
onPressed: () => print('Submit pressed'),
child: Text('Submit'),
)

LiquidGlassOutlinedButton

A themed wrapper around OutlinedButton with glass-effect overlays on hover and press.

Constructor Parameters

Parameter	Type	Description
onPressed	VoidCallback?	Callback invoked when the button is pressed
child	Widget	Content of the button, usually a Text widget
style	ButtonStyle?	Optional button style override
autofocus	bool	Whether to auto-focus the button (default: false)
clipBehavior	Clip	Clipping behavior (default: Clip.none)

Example

LiquidGlassOutlinedButton(
onPressed: () => print('Submit pressed'),
child: Text('Submit'),
)

---

Customization

Theme Extension

final theme = Theme.of(context).extension<LiquidGlassThemeExtension>();
final blurAmount = theme?.blurAmount;

Custom Config

const customConfig = LiquidGlassConfig(
  blurAmount: 30.0,
  highlightIntensity: 0.4,
  primaryColor: Colors.purple,
);

---

Examples

Weather App UI

LiquidGlassScaffold(
  backgroundImage: NetworkImage('https://example.com/sky.jpg'),
  appBar: AppBar(title: Text('Weather')),
  body: Column(
    children: [
      LiquidGlassCard(
        child: WeatherInfo(),
      ),
      LiquidGlassElevatedButton(
        onPressed: fetchWeather,
        child: Text('Refresh'),
      ),
    ],
  ),
)

Settings Page

LiquidGlassScaffold(
  appBar: AppBar(title: Text('Settings')),
  body: ListView(
    children: [
      LiquidGlassCard(
        child: SwitchListTile(
          title: Text('Dark Mode'),
          value: darkMode,
          onChanged: (v) => setState(() => darkMode = v),
        ),
      ),
      LiquidGlassOutlinedButton(
        onPressed: logout,
        child: Text('Sign Out'),
      ),
    ],
  ),
)

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

---

License

This package is released under the MIT License. See LICENSE for details.