diff --git a/CHANGELOG.md b/CHANGELOG.md index 6840114..6ab9ef0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ -## [0.0.1] - 2020-10-8 +## [1.0.1] - 02-11-2020 -* Blur is a wrapper widget that blur it's child. There are ImageBlur.asset and ImageBlur.network that blur the image. +* Add: `padding` property to `Frost` widget. +* Add: `Frost.text` which takes string as input. +* Add: `Frost.icon` which takes iconData as input. ## [1.0.0] - 02-11-2020 @@ -8,4 +10,8 @@ * Add: `height` and `width` properties to `ImageBlur.asset` and `ImageBlur.network`. * Add: `Frost` class which blurs the background of the child. * Breaking: The `overlayChild` is renamed to `overlay` -* Add: `alignment` property for the overlay child. \ No newline at end of file +* Add: `alignment` property for the overlay child. + +## [0.0.1] - 2020-10-8 + +* Blur is a wrapper widget that blur it's child. There are ImageBlur.asset and ImageBlur.network that blur the image. \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index d668cc8..f91d471 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -34,6 +34,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { + var theme = Theme.of(context); return Scaffold( appBar: AppBar( title: Text(widget.title), @@ -43,26 +44,33 @@ class _MyHomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - ImageBlur.asset( - 'assets/cat.webp', - scale: 2.5, - blur: blurValue, - blurColor: Theme.of(context).primaryColor, - borderRadius: BorderRadius.vertical(top: Radius.circular(20)), - ), - ImageBlur.asset( - 'assets/cat.webp', - colorOpacity: 0.2, - scale: 2.5, - borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)), - blur: blurValue, - overlay: Text( - 'Cat', - style: Theme.of(context) - .textTheme - .headline2 - .copyWith(color: Theme.of(context).scaffoldBackgroundColor), - ), + Row( + children: [ + Expanded( + child: ImageBlur.asset( + 'assets/cat.webp', + blur: blurValue, + blurColor: theme.primaryColor, + borderRadius: + BorderRadius.horizontal(left: Radius.circular(20)), + ), + ), + SizedBox(width: 20.0), + Expanded( + child: ImageBlur.asset( + 'assets/cat.webp', + colorOpacity: 0.2, + borderRadius: + BorderRadius.horizontal(right: Radius.circular(20)), + blur: blurValue, + overlay: Text( + 'Cat', + style: theme.textTheme.headline2 + .copyWith(color: theme.scaffoldBackgroundColor), + ), + ), + ), + ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, @@ -79,9 +87,14 @@ class _MyHomePageState extends State { borderRadius: BorderRadius.circular(20), child: Padding( padding: const EdgeInsets.all(8.0), - child: Text( - 'Frost', - style: Theme.of(context).textTheme.headline4, + child: Column( + children: [ + Icon(Icons.image), + Text( + 'Frost', + style: theme.textTheme.headline4, + ), + ], ), ), ), @@ -89,17 +102,45 @@ class _MyHomePageState extends State { ), Blur( blur: blurValue, - blurColor: Theme.of(context).primaryColor, + blurColor: theme.primaryColor, child: Padding( padding: EdgeInsets.all(8.0), child: Text( 'Blur', - style: Theme.of(context).textTheme.headline3, + style: theme.textTheme.headline3, ), ), ), ], ), + Stack( + alignment: Alignment.center, + children: [ + Image.asset( + 'assets/cat.webp', + width: MediaQuery.of(context).size.width - 40, + height: 200, + fit: BoxFit.fill, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Frost.text( + 'Frost text', + blur: blurValue, + textStyle: theme.textTheme.headline3, + padding: EdgeInsets.all(8), + ), + SizedBox(width: 20), + Frost.icon( + Icons.image, + padding: EdgeInsets.all(8), + blur: blurValue, + ), + ], + ), + ], + ), Slider( value: blurValue, max: 20, diff --git a/example/pubspec.lock b/example/pubspec.lock index 4049e4f..d60427c 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -14,7 +14,7 @@ packages: path: ".." relative: true source: path - version: "1.0.0" + version: "1.0.1" boolean_selector: dependency: transitive description: diff --git a/lib/blur.dart b/lib/blur.dart index 9ccf583..6fbe0fa 100644 --- a/lib/blur.dart +++ b/lib/blur.dart @@ -1,14 +1,16 @@ library blur; import 'dart:ui'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///blur it's child -///blur is the value of blur effect, higher the blur more the blur effect (default value = 2) +///blur is the value of blur effect, higher the blur more the blur effect (default value = 5) ///blurColor is the color of blur effect -///borderRadius is the radius of the child to be blurred (default value = 0) +///borderRadius is the radius of the child to be blurred ///colorOpacity is the opacity of the blurColor (default value = 0.5) ///overlayChild is the widget that can be stacked over blurred widget +///alignment is the alignment geometry of the overlay class Blur extends StatelessWidget { Blur({ Key key, @@ -55,6 +57,9 @@ class Blur extends StatelessWidget { } ///blurs the image provided to it +///height is the height of the image +///width is the width of the image +///scale scales the image class ImageBlur extends StatelessWidget { ///acts as Image.asset ImageBlur.asset( @@ -120,17 +125,16 @@ class ImageBlur extends StatelessWidget { } } +///created frosted glass effect: blurs the background of the child given to it +///frostColor is the color of the frost effect +///frostOpacity is the opacity of the frostColor +///height is the height of the frost effect +///width is the width of the frost effect +///borderRadius is the radius of the frost effect +///alignment is the alignment geometry of the child +///padding is the child padding class Frost extends StatelessWidget { - final Widget child; - final double blur; - final Color frostColor; - final double frostOpacity; - final double height; - final double width; - final AlignmentGeometry alignment; - final BorderRadius borderRadius; - - const Frost({ + Frost({ Key key, this.child, this.blur = 5, @@ -140,8 +144,57 @@ class Frost extends StatelessWidget { this.width, this.frostOpacity = 0.0, this.borderRadius, + this.padding = EdgeInsets.zero, }) : super(key: key); + ///give the frosted glass effect to the string text + ///textAlign is the alignment of the string text + ///textStyle is the styling of the string text + Frost.text( + String text, { + Key key, + TextAlign textAlign, + TextStyle textStyle, + this.blur = 5, + this.frostColor = Colors.white, + this.alignment = Alignment.center, + this.height, + this.width, + this.frostOpacity = 0.0, + this.borderRadius, + this.padding = EdgeInsets.zero, + }) : child = Text(text, textAlign: textAlign, style: textStyle), + super(key: key); + + ///give the frosted glass effect to the icon + ///iconColor is the color of the icon + ///iconSize is the size of the icon + Frost.icon( + IconData iconData, { + Color iconColor, + double iconSize, + Key key, + this.blur = 5, + this.frostColor = Colors.white, + this.alignment = Alignment.center, + this.height, + this.width, + this.frostOpacity = 0.0, + this.borderRadius, + this.padding = EdgeInsets.zero, + }) : child = Icon(iconData, color: iconColor, size: iconSize), + super(key: key); + + final Widget child; + final double blur; + final Color frostColor; + final double frostOpacity; + final double height; + final double width; + final AlignmentGeometry alignment; + final BorderRadius borderRadius; + final EdgeInsets padding; + @override Widget build(BuildContext context) { return Blur( @@ -151,11 +204,15 @@ class Frost extends StatelessWidget { child: Container( height: height, width: width, + padding: padding ?? EdgeInsets.zero, child: height == null || width == null ? child : SizedBox.shrink(), color: frostColor.withOpacity(frostOpacity), ), alignment: alignment, - overlay: child, + overlay: Padding( + padding: padding, + child: child, + ), ); } } diff --git a/pubspec.yaml b/pubspec.yaml index 1b9cfbd..a673d8b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,7 @@ name: blur description: 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. -version: 1.0.0 +version: 1.0.1 author: Jagrit Kharbanda homepage: https://github.com/jagritjkh/blur