blur

Package Overview

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

Blur is a Flutter package that provides wrapper widgets to apply blur effects to child widgets or images. It includes ImageBlur.asset and ImageBlur.network for blurring images from local assets or remote URLs. The Frost widget offers background blur, ideal for creating frosted glass effects. Designed for cross-platform use, it supports Android, iOS, Web, macOS, Windows, and Linux. The package simplifies implementing visual depth and modern UI elements with minimal code.

Use cases

Creating frosted glass UIs
Adding background blur effects
Blurring images from assets
Blurring network images
Enhancing visual depth in UIs
Implementing overlay blur layers

Key features

ImageBlur.asset for local images
ImageBlur.network for remote images
Frost widget for background blur
Cross-platform compatibility
Simple API with wrapper widgets
Lightweight and easy integration

Suitable for

UI designers seeking modern aesthetics
Developers building immersive interfaces
Apps requiring visual layering
Projects using image overlays
Teams targeting multiple platforms
Flutter apps with glassmorphism designs

Considerations

Performance impact on complex layouts
Limited customization options for blur intensity
May require optimization on lower-end devices
Not suitable for high-performance animations
Best used with static or infrequently updated content
Depends on platform-specific rendering capabilities

Original README

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

Blur is a wrapper widget that blur it's child. There are ImageBlur.asset and ImageBlur.network that blur the image. Frost is another wrapper which blurs the background.

Getting Started

To use this package, add blur as a dependency in your pubspec.yaml file.

blur

Add dependency

dependencies:
  blur: ^4.0.0

Import

import 'package:blur/blur.dart'

Usage

Blur(
  blur: 2.5,
  blurColor: Theme.of(context).primaryColor,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Text(
      'Blur',
      style: Theme.of(context).textTheme.headline3,
    ),
  ),
),

Output

blur_text

Normal Image

normal_image

Using extensions

Input

 Image.asset('assets/cat.png').blurred(
     colorOpacity: 0.2,
     borderRadius: BorderRadius.horizontal(right: Radius.circular(20)),
     blur: blurValue,
     overlay: Text(
       'Cat',
       style: theme.textTheme.headline2!.copyWith(color: theme.scaffoldBackgroundColor),
     ),
   ),

Output

blur_image

Frost

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset(
      'assets/cat.png',
      scale: 3.5,
    ),
    Text(
      'Frost',
      style: theme.textTheme.headline4,
    ).frosted(
       blur: blurValue,
       borderRadius: BorderRadius.circular(20),
       padding: EdgeInsets.all(8),
     ),
  ],
),