blur

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: ^2.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

Input

 ImageBlur.asset(
  'assets/cat.webp',
  scale: 2.5,
  borderRadius: BorderRadius.circular(20),
  overlay: Text(
    'Cat',
    style: Theme.of(context)
        .textTheme
        .headline2
        .copyWith(color: Theme.of(context).scaffoldBackgroundColor),
  ),
),

Output

blur_image

##Frost

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset(
      'assets/cat.webp',
      scale: 3.5,
    ),
    Frost(
      borderRadius: BorderRadius.circular(20),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          'Frost',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    ),
  ],
),

frost_image

Libraries

blur