ぼかし

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

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

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

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