Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore: Code Simplification, Issue #9 #18

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Chore: Code Simplification, Issue #9 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3bbefe0
Added Colour extension for adjusting colour with given value
NonymousMorlock Jan 12, 2024
6d3851c
Implementing Colour extension in clay_utils.dart
NonymousMorlock Jan 12, 2024
7a163f8
Implementing Colour extension in clay_animated_container.dart
NonymousMorlock Jan 12, 2024
17a6a7e
Implementing Colour extension in clay_container.dart
NonymousMorlock Jan 12, 2024
576a0ca
Implementing Colour extension in clay_text.dart
NonymousMorlock Jan 12, 2024
d4b706d
Merge branch 'MichaelCharles:master' into master
NonymousMorlock Jan 12, 2024
9fb7e99
Feature: Added Text Align Option
NonymousMorlock Feb 2, 2024
36b389a
Feature: Exposed box shadows and gradients
NonymousMorlock Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions lib/extensions/colour_extensions.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
);
}
24 changes: 6 additions & 18 deletions lib/utils/clay_utils.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = <String, int>{
'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<Color> getFlatGradients(Color baseColor, int depth) {
return [
baseColor,
Expand All @@ -26,15 +14,15 @@ abstract class ClayUtils {

static List<Color> getConcaveGradients(Color baseColor, int depth) {
return [
getAdjustColor(baseColor, 0 - depth),
getAdjustColor(baseColor, depth),
baseColor.withIncrement(0 - depth),
baseColor.withIncrement(depth),
];
}

static List<Color> getConvexGradients(Color baseColor, int depth) {
return [
getAdjustColor(baseColor, depth),
getAdjustColor(baseColor, 0 - depth),
baseColor.withIncrement(depth),
baseColor.withIncrement(0 - depth),
];
}
}
9 changes: 4 additions & 5 deletions lib/widgets/clay_animated_container.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -105,16 +106,14 @@ class _ClayAnimatedContainerState extends State<ClayAnimatedContainer> {

var shadowList = <BoxShadow>[
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),
Expand All @@ -124,7 +123,7 @@ class _ClayAnimatedContainerState extends State<ClayAnimatedContainer> {

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;

Expand Down
17 changes: 10 additions & 7 deletions lib/widgets/clay_container.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -18,6 +19,8 @@ class ClayContainer extends StatefulWidget {
this.curveType,
this.depth,
this.emboss = false,
this.gradient,
this.boxShadow,
});

final double? height;
Expand All @@ -32,6 +35,8 @@ class ClayContainer extends StatefulWidget {
final CurveType? curveType;
final int? depth;
final bool emboss;
final Gradient? gradient;
final List<BoxShadow>? boxShadow;

@override
State<ClayContainer> createState() => _ClayContainerState();
Expand Down Expand Up @@ -96,16 +101,14 @@ class _ClayContainerState extends State<ClayContainer> {

var shadowList = <BoxShadow>[
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),
Expand All @@ -115,7 +118,7 @@ class _ClayContainerState extends State<ClayContainer> {

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;

Expand Down Expand Up @@ -144,12 +147,12 @@ class _ClayContainerState extends State<ClayContainer> {
decoration: BoxDecoration(
borderRadius: borderRadiusValue,
color: colorValue,
gradient: LinearGradient(
gradient: widget.gradient ?? LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: gradientColors as List<Color>,
),
boxShadow: shadowList,
boxShadow: widget.boxShadow ?? shadowList,
),
child: widget.child,
);
Expand Down
13 changes: 7 additions & 6 deletions lib/widgets/clay_text.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -14,6 +14,7 @@ class ClayText extends StatefulWidget {
this.size,
this.style,
this.emboss,
this.textAlign,
});

final String text;
Expand All @@ -25,6 +26,7 @@ class ClayText extends StatefulWidget {
final int? depth;
final double? size;
final bool? emboss;
final TextAlign? textAlign;

@override
State<ClayText> createState() => _ClayTextState();
Expand Down Expand Up @@ -83,16 +85,14 @@ class _ClayTextState extends State<ClayText> {

var shadowList = <Shadow>[
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),
Expand All @@ -102,12 +102,13 @@ class _ClayTextState extends State<ClayText> {

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,
Expand Down