blur 4.0.2

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.

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.

Add dependency

dependencies:
  blur: ^4.0.0

copied to clipboard

Import

import 'package:blur/blur.dart'

copied to clipboard

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,
    ),
  ),
),

copied to clipboard

Output

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),
     ),
   ),

copied to clipboard

Output

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),
     ),
  ],
),

copied to clipboard