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