Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.1.0

blurred

blurred - The easiest way to blur your flutter widgets and images.

pub.dev API documentation Source code
30-day downloads
46
Likes
10
Pub points
40

Install package

flutter pub add blurred

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The blurred package provides a simple and efficient way to apply blur effects to widgets and images in Flutter. It abstracts the complexity of using ShaderMask and CustomPaint, offering a clean API for achieving smooth, real-time blurring. Ideal for creating backdrop effects, overlays, or enhancing visual depth in UI components. The package is lightweight and easy to integrate, requiring only a single import and minimal code. It supports both image and widget blurring with customizable blur intensity.

Use cases

  • Creating blurred backgrounds
  • Enhancing UI depth with blur effects
  • Implementing modal overlays
  • Designing card or container highlights
  • Adding subtle visual effects to images
  • Improving user interface aesthetics

Key features

  • Simple API for blur application
  • Supports both widgets and images
  • Customizable blur intensity
  • Lightweight and performant
  • Easy integration with Flutter projects
  • Real-time blur rendering

Suitable for

  • UI designers seeking visual enhancements
  • Developers building modern app interfaces
  • Projects requiring backdrop blur effects
  • Apps with dynamic or interactive backgrounds
  • Prototyping visually rich screens

Considerations

  • May impact performance on low-end devices
  • Blur quality depends on source image resolution
  • Limited customization beyond blur radius
  • Not optimized for very large widgets
  • Best suited for moderate blur intensities

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

blurred

An easy way to blur your widgets and images.

blurred example

Usage

Blurred(
  Text(
    "Hello World!",
    style: TextStyle(
      fontSize: 72,
    ),
  ),
  blurValue: 3,
)

Output:

Hello World

Check the example for BlurredImage example

Acrylic

Acrylic

To easily create a container with an acrylic effect.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Acrylic Header',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(12, 10, 30, 1),
      body: Stack(
        children: [
          ListView.builder(
            itemBuilder: (_, __) => ListTile(
              leading: Icon(Icons.ac_unit_rounded, size: 30),
              title: Text('Lorem Ipsum'),
            ),
          ),
          SizedBox(
            height: 80,
            child: Acrylic(
              child: Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FlutterLogo(size: 40),
                    SizedBox(width: 10),
                    Text('Acrylic Header', style: TextStyle(fontSize: 40)),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Output

Acrylic Example

Categories

Image

Source repository

Projects using this package

No data available yet.