diff --git a/lib/extensions/colour_extensions.dart b/lib/extensions/colour_extensions.dart new file mode 100644 index 0000000..b5c4377 --- /dev/null +++ b/lib/extensions/colour_extensions.dart @@ -0,0 +1,10 @@ +import 'dart:ui'; + +extension ColorExt on Color { + Color withIncrement(int amount) => Color.fromRGBO( + (red + amount).clamp(0, 255), + (green + amount).clamp(0, 255), + (blue + amount).clamp(0, 255), + 1, + ); +} diff --git a/lib/utils/clay_utils.dart b/lib/utils/clay_utils.dart index 2f1c96d..91d4f51 100644 --- a/lib/utils/clay_utils.dart +++ b/lib/utils/clay_utils.dart @@ -1,22 +1,10 @@ import 'dart:ui'; +import 'package:clay_containers/extensions/colour_extensions.dart'; + abstract class ClayUtils { const ClayUtils(); - static Color getAdjustColor(Color baseColor, int amount) { - var colors = { - 'red': baseColor.red, - 'green': baseColor.green, - 'blue': baseColor.blue, - }; - colors = colors.map((key, value) { - if (value + amount < 0) return MapEntry(key, 0); - if (value + amount > 255) return MapEntry(key, 255); - return MapEntry(key, value + amount); - }); - return Color.fromRGBO(colors['red']!, colors['green']!, colors['blue']!, 1); - } - static List getFlatGradients(Color baseColor, int depth) { return [ baseColor, @@ -26,15 +14,15 @@ abstract class ClayUtils { static List getConcaveGradients(Color baseColor, int depth) { return [ - getAdjustColor(baseColor, 0 - depth), - getAdjustColor(baseColor, depth), + baseColor.withIncrement(0 - depth), + baseColor.withIncrement(depth), ]; } static List getConvexGradients(Color baseColor, int depth) { return [ - getAdjustColor(baseColor, depth), - getAdjustColor(baseColor, 0 - depth), + baseColor.withIncrement(depth), + baseColor.withIncrement(0 - depth), ]; } } diff --git a/lib/widgets/clay_animated_container.dart b/lib/widgets/clay_animated_container.dart index 0fbb3ea..c3cef8f 100644 --- a/lib/widgets/clay_animated_container.dart +++ b/lib/widgets/clay_animated_container.dart @@ -1,4 +1,5 @@ import 'package:clay_containers/constants.dart'; +import 'package:clay_containers/extensions/colour_extensions.dart'; import 'package:clay_containers/extensions/context_extensions.dart'; import 'package:clay_containers/utils/clay_utils.dart'; import 'package:flutter/material.dart'; @@ -105,16 +106,14 @@ class _ClayAnimatedContainerState extends State { var shadowList = [ BoxShadow( - color: ClayUtils.getAdjustColor( - parentColorValue, + color: parentColorValue.withIncrement( emboss ? 0 - depth : depth, ), offset: Offset(0 - spread, 0 - spread), blurRadius: spread, ), BoxShadow( - color: ClayUtils.getAdjustColor( - parentColorValue, + color: parentColorValue.withIncrement( emboss ? depth : 0 - depth, ), offset: Offset(spread, spread), @@ -124,7 +123,7 @@ class _ClayAnimatedContainerState extends State { if (emboss) shadowList = shadowList.reversed.toList(); if (emboss) { - colorValue = ClayUtils.getAdjustColor(colorValue, 0 - depth ~/ 2); + colorValue = colorValue.withIncrement(0 - depth ~/ 2); } if (surfaceColor != null) colorValue = surfaceColorValue; diff --git a/lib/widgets/clay_container.dart b/lib/widgets/clay_container.dart index c161cd1..51bee06 100644 --- a/lib/widgets/clay_container.dart +++ b/lib/widgets/clay_container.dart @@ -1,4 +1,5 @@ import 'package:clay_containers/constants.dart'; +import 'package:clay_containers/extensions/colour_extensions.dart'; import 'package:clay_containers/extensions/context_extensions.dart'; import 'package:clay_containers/utils/clay_utils.dart'; import 'package:flutter/material.dart'; @@ -18,6 +19,8 @@ class ClayContainer extends StatefulWidget { this.curveType, this.depth, this.emboss = false, + this.gradient, + this.boxShadow, }); final double? height; @@ -32,6 +35,8 @@ class ClayContainer extends StatefulWidget { final CurveType? curveType; final int? depth; final bool emboss; + final Gradient? gradient; + final List? boxShadow; @override State createState() => _ClayContainerState(); @@ -96,16 +101,14 @@ class _ClayContainerState extends State { var shadowList = [ BoxShadow( - color: ClayUtils.getAdjustColor( - parentColorValue, + color: parentColorValue.withIncrement( widget.emboss ? 0 - depth : depth, ), offset: Offset(0 - spread, 0 - spread), blurRadius: spread, ), BoxShadow( - color: ClayUtils.getAdjustColor( - parentColorValue, + color: parentColorValue.withIncrement( widget.emboss ? depth : 0 - depth, ), offset: Offset(spread, spread), @@ -115,7 +118,7 @@ class _ClayContainerState extends State { if (widget.emboss) shadowList = shadowList.reversed.toList(); if (widget.emboss) { - colorValue = ClayUtils.getAdjustColor(colorValue, 0 - depth ~/ 2); + colorValue = colorValue.withIncrement(0 - depth ~/ 2); } if (surfaceColor != null) colorValue = surfaceColorValue; @@ -144,12 +147,12 @@ class _ClayContainerState extends State { decoration: BoxDecoration( borderRadius: borderRadiusValue, color: colorValue, - gradient: LinearGradient( + gradient: widget.gradient ?? LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: gradientColors as List, ), - boxShadow: shadowList, + boxShadow: widget.boxShadow ?? shadowList, ), child: widget.child, ); diff --git a/lib/widgets/clay_text.dart b/lib/widgets/clay_text.dart index 46f0bdb..6a75c61 100644 --- a/lib/widgets/clay_text.dart +++ b/lib/widgets/clay_text.dart @@ -1,5 +1,5 @@ +import 'package:clay_containers/extensions/colour_extensions.dart'; import 'package:clay_containers/extensions/context_extensions.dart'; -import 'package:clay_containers/utils/clay_utils.dart'; import 'package:flutter/material.dart'; class ClayText extends StatefulWidget { @@ -14,6 +14,7 @@ class ClayText extends StatefulWidget { this.size, this.style, this.emboss, + this.textAlign, }); final String text; @@ -25,6 +26,7 @@ class ClayText extends StatefulWidget { final int? depth; final double? size; final bool? emboss; + final TextAlign? textAlign; @override State createState() => _ClayTextState(); @@ -83,16 +85,14 @@ class _ClayTextState extends State { var shadowList = [ Shadow( - color: ClayUtils.getAdjustColor( - outerColorValue, + color: outerColorValue.withIncrement( emboss ? 0 - depth : depth, ), offset: Offset(0 - spreadValue / 2, 0 - spreadValue / 2), blurRadius: spreadValue, ), Shadow( - color: ClayUtils.getAdjustColor( - outerColorValue, + color: outerColorValue.withIncrement( emboss ? depth : 0 - depth, ), offset: Offset(spreadValue / 2, spreadValue / 2), @@ -102,12 +102,13 @@ class _ClayTextState extends State { if (emboss) shadowList = shadowList.reversed.toList(); if (emboss) { - colorValue = ClayUtils.getAdjustColor(colorValue, 0 - depth); + colorValue = colorValue.withIncrement(0 - depth); } if (textColor != null) colorValue = textColor!; return Text( widget.text, + textAlign: widget.textAlign, style: style.copyWith( color: colorValue, shadows: shadowList,