Wyatt-FOSS/wyatt-packages
6
2
Fork 0
Code Issues 20 Pull Requests 4 Actions Packages Projects Releases Activity

refactor(ui): rework text gradient and text wrapper

Browse Source
This commit is contained in:
hugo
2023-02-17 14:47:56 +01:00
parent c5f8b69184
commit ef52015372
27 changed files with 367 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart
+2 -15
View File
@@ -24,7 +24,6 @@ import 'package:wyatt_ui_kit/src/components/buttons/cubit/invalid_button_cubit.d
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/dotter_border_child.dart';
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
class FileSelectionButtonScreen
extends CubitScreen<InvalidButtonCubit, ButtonState> {
@@ -220,13 +219,7 @@ class FileSelectionButtonScreen
title!.text,
style: title!.style ?? style.title,
).toGradient(
LinearGradientHelper.fromNullableColors(
title?.gradient ??
((style.foregroundColors?.isGradient ??
false)
? style.foregroundColors?.colors
: null),
),
gradientColors: style.foregroundColors,
),
],
@@ -247,13 +240,7 @@ class FileSelectionButtonScreen
subTitle!.text,
style: subTitle!.style ?? style.subTitle,
).toGradient(
LinearGradientHelper.fromNullableColors(
subTitle?.gradient ??
((style.foregroundColors?.isGradient ??
false)
? style.foregroundColors?.colors
: null),
),
gradientColors: style.foregroundColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
+1 -7
View File
@@ -23,7 +23,6 @@ import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
const FlatButtonScreen({
@@ -204,12 +203,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
label!.text,
style: label!.style ?? style.label,
).toGradient(
LinearGradientHelper.fromNullableColors(
label?.gradient ??
((style.foregroundColors?.isGradient ?? false)
? style.foregroundColors?.colors
: null),
),
gradientColors: style.foregroundColors,
)
],
Gap(style.padding?.vertical ?? 10),
packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
+1 -7
View File
@@ -24,7 +24,6 @@ import 'package:wyatt_ui_kit/src/components/buttons/cubit/selectable_button_cubi
import 'package:wyatt_ui_kit/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
class SymbolButtonScreen
extends CubitScreen<SelectableButtonCubit, ButtonState> {
@@ -228,12 +227,7 @@ class SymbolButtonScreen
label!.text,
style: label!.style ?? style.label,
).toGradient(
LinearGradientHelper.fromNullableColors(
label?.gradient ??
((style.foregroundColors?.isGradient ?? false)
? style.foregroundColors?.colors
: null),
),
gradientColors: style.foregroundColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart
+1 -1
View File
@@ -80,7 +80,7 @@ class InformationCard extends InformationCardComponent
body!.text,
textType: TextType.body,
style: body!.style,
gradient: body!.gradient,
gradientColors: body!.gradientColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart
+2 -2
View File
@@ -44,7 +44,7 @@ class InformationCardTitles extends StatelessWidget {
title!.text,
textType: TextType.title,
style: title!.style,
gradient: title!.gradient,
gradientColors: title!.gradientColors,
),
],
if (subtitle != null) ...[
@@ -53,7 +53,7 @@ class InformationCardTitles extends StatelessWidget {
subtitle!.text,
textType: TextType.subtitle,
style: subtitle!.style,
gradient: subtitle!.gradient,
gradientColors: subtitle!.gradientColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart
+2 -2
View File
@@ -73,7 +73,7 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
description!.text,
textType: TextType.body,
style: description!.style,
gradient: description!.gradient,
gradientColors: description!.gradientColors,
),
const Gap(20),
PortfolioCardHeader(
@@ -108,7 +108,7 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
description!.text,
textType: TextType.body,
style: description!.style,
gradient: description!.gradient,
gradientColors: description!.gradientColors,
),
],
if (ctas != null) ...[const Gap(20), ...ctas!],
packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart
+1 -1
View File
@@ -71,7 +71,7 @@ class PortfolioCardHeader extends StatelessWidget {
color: secondaryBackgroundColors ??
Theme.of(context)
.extension<CardThemeExtension>()
?.secondaryBackgroundColors,
?.secondaryBackgroundColor,
borderRadius: BorderRadius.circular(8),
),
child: Text(
packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart
+14 -11
View File
@@ -20,8 +20,7 @@ import 'package:wyatt_component_copy_with_extension/component_copy_with_extensio
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
part 'quote_card.g.dart';
@@ -63,9 +62,11 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
alignment: Alignment.topLeft,
child: GradientText(
'“',
gradient: gradient,
style: context.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold),
style: GradientTextStyle.from(
context.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold),
MultiColor(gradient?.colors),
),
),
),
if (quote != null) ...[
@@ -73,7 +74,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
quote!.text,
textType: TextType.body,
style: quote!.style,
gradient: quote!.gradient,
gradientColors: quote!.gradientColors,
),
],
const Gap(15),
@@ -82,9 +83,11 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
alignment: Alignment.bottomRight,
child: GradientText(
'”',
gradient: gradient,
style: context.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold),
style: GradientTextStyle.from(
context.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold),
MultiColor(gradient?.colors),
),
),
),
Row(
@@ -102,7 +105,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
name!.text,
textType: TextType.body,
style: name!.style,
gradient: name!.gradient,
gradientColors: name!.gradientColors,
),
],
if (subtitle != null) ...[
@@ -110,7 +113,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
subtitle!.text,
textType: TextType.subtitle,
style: subtitle!.style,
gradient: subtitle!.gradient,
gradientColors: subtitle!.gradientColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart
+1 -1
View File
@@ -70,7 +70,7 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
description!.text,
textType: TextType.body,
style: description!.style,
gradient: description!.gradient,
gradientColors: description!.gradientColors,
),
const Gap(25),
],
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart
+2 -2
View File
@@ -46,7 +46,7 @@ class SkillCardHeader extends StatelessWidget {
color: secondaryBackgroundColors ??
Theme.of(context)
.extension<CardThemeExtension>()
?.secondaryBackgroundColors,
?.secondaryBackgroundColor,
),
child: gradient != null
? GradientIcon(
@@ -67,7 +67,7 @@ class SkillCardHeader extends StatelessWidget {
title!.text,
textType: TextType.title,
style: title!.style,
gradient: title!.gradient,
gradientColors: title!.gradientColors,
),
],
],
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart
+1 -1
View File
@@ -50,7 +50,7 @@ class SkillCardSkills extends StatelessWidget {
e.text,
textType: TextType.body,
style: e.style,
gradient: e.gradient,
gradientColors: e.gradientColors,
),
),
],
packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart
+4 -8
View File
@@ -15,7 +15,7 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
enum TextType {
@@ -28,13 +28,13 @@ class CardText extends StatelessWidget {
const CardText(
this.data, {
required this.textType,
this.gradient,
this.style,
this.gradientColors,
super.key,
});
final TextType textType;
final TextStyle? style;
final List<Color>? gradient;
final MultiColor? gradientColors;
final String data;
TextStyle? _getStyle(BuildContext context) {
@@ -58,9 +58,5 @@ class CardText extends StatelessWidget {
Widget build(BuildContext context) => Text(
data,
style: _getStyle(context),
).toGradient(
LinearGradientHelper.fromNullableColors(
gradient,
),
);
).toGradient(gradientColors: gradientColors);
}
packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart
+10 -10
View File
@@ -110,8 +110,9 @@ class _CardWrapperState extends State<CardWrapper> {
if (extensionCardColor != null &&
extensionCardColor.backgroundColors != null &&
extensionCardColor.backgroundColors!.length >= 2) {
return LinearGradient(colors: extensionCardColor.backgroundColors!);
extensionCardColor.backgroundColors!.isGradient) {
return LinearGradient(
colors: extensionCardColor.backgroundColors!.colors,);
}
}
return null;
@@ -126,9 +127,8 @@ class _CardWrapperState extends State<CardWrapper> {
Theme.of(context).extension<CardThemeExtension>();
if (extensionCardColor != null &&
extensionCardColor.backgroundColors != null &&
extensionCardColor.backgroundColors!.length == 1) {
return extensionCardColor.backgroundColors!.first;
extensionCardColor.backgroundColors != null) {
return extensionCardColor.backgroundColors!.color;
}
}
return Theme.of(context).cardColor;
@@ -151,16 +151,16 @@ class _CardWrapperState extends State<CardWrapper> {
final extensionCardColor =
Theme.of(context).extension<CardThemeExtension>();
if (extensionCardColor != null &&
extensionCardColor.borderColor != null) {
if (extensionCardColor.borderColor!.length >= 2) {
extensionCardColor.borderColors != null) {
if (extensionCardColor.borderColors!.isGradient) {
return GradientBoxBorder(
gradient: LinearGradient(
colors: extensionCardColor.borderColor!,
colors: extensionCardColor.borderColors!.colors,
),
);
} else if (extensionCardColor.backgroundColors!.isNotEmpty) {
} else if (extensionCardColor.backgroundColors!.colors.isNotEmpty) {
return Border.all(
color: extensionCardColor.backgroundColors!.first,
color: extensionCardColor.backgroundColors!.color,
);
}
}
packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart
+35 -18
View File
@@ -17,16 +17,29 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
extension GradientTextExtension on Text {
GradientText toGradient(Gradient? gradient) =>
GradientText.from(this, gradient);
/// If this text contains a [GradientTextStyle] it simply transforms it in
/// [GradientText], if not it needs a [MultiColor].
GradientText toGradient({MultiColor? gradientColors}) {
if (style is GradientTextStyle?) {
// Gradient
final gradientStyle = (style as GradientTextStyle?)?.gradientColors;
return GradientText.from(this, gradientStyle ?? gradientColors);
}
return GradientText.from(this, gradientColors);
}
GradientText toFlutterGradient(Gradient? gradient) =>
GradientText.from(this, MultiColor(gradient?.colors));
}
class GradientText extends Text {
const GradientText(
super.data, {
this.gradient,
super.style,
super.strutStyle,
super.textAlign,
@@ -43,10 +56,10 @@ class GradientText extends Text {
super.key,
});
factory GradientText.from(Text text, Gradient? gradient) => GradientText(
factory GradientText.from(Text text, MultiColor? gradientColors) =>
GradientText(
text.data ?? '',
style: text.style,
gradient: gradient,
style: GradientTextStyle.from(text.style, gradientColors),
strutStyle: text.strutStyle,
textAlign: text.textAlign,
textDirection: text.textDirection,
@@ -62,20 +75,24 @@ class GradientText extends Text {
key: text.key,
);
final Gradient? gradient;
@override
Widget build(BuildContext context) {
if (gradient != null) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) => gradient!.createShader(
Rect.fromLTWH(0, 0, bounds.width, bounds.height),
),
child: super.build(context),
);
} else {
return super.build(context);
if (style is GradientTextStyle?) {
// Gradient
final gradientStyle = (style as GradientTextStyle?)?.gradientColors;
final gradient = (gradientStyle?.isGradient ?? false)
? LinearGradientHelper.fromMultiColor(gradientStyle!)
: null;
if (gradient != null) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) => gradient.createShader(
Rect.fromLTWH(0, 0, bounds.width, bounds.height),
),
child: super.build(context),
);
}
}
return super.build(context);
}
}
packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text_style.dart
+85
View File
@@ -0,0 +1,85 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
class GradientTextStyle extends TextStyle {
const GradientTextStyle({
this.gradientColors,
super.inherit,
super.color,
super.backgroundColor,
super.fontSize,
super.fontWeight,
super.fontStyle,
super.letterSpacing,
super.wordSpacing,
super.textBaseline,
super.height,
super.leadingDistribution,
super.locale,
super.foreground,
super.background,
super.shadows,
super.fontFeatures,
super.fontVariations,
super.decoration,
super.decorationColor,
super.decorationStyle,
super.decorationThickness,
super.debugLabel,
super.fontFamily,
super.fontFamilyFallback,
super.package,
super.overflow,
});
factory GradientTextStyle.from(
TextStyle? textStyle,
MultiColor? gradientColors,
) =>
GradientTextStyle(
gradientColors: gradientColors,
inherit: textStyle?.inherit ?? true,
color: textStyle?.color,
backgroundColor: textStyle?.backgroundColor,
fontSize: textStyle?.fontSize,
fontWeight: textStyle?.fontWeight,
fontStyle: textStyle?.fontStyle,
letterSpacing: textStyle?.letterSpacing,
wordSpacing: textStyle?.wordSpacing,
textBaseline: textStyle?.textBaseline,
height: textStyle?.height,
leadingDistribution: textStyle?.leadingDistribution,
locale: textStyle?.locale,
foreground: textStyle?.foreground,
background: textStyle?.background,
shadows: textStyle?.shadows,
fontFeatures: textStyle?.fontFeatures,
fontVariations: textStyle?.fontVariations,
decoration: textStyle?.decoration,
decorationColor: textStyle?.decorationColor,
decorationStyle: textStyle?.decorationStyle,
decorationThickness: textStyle?.decorationThickness,
debugLabel: textStyle?.debugLabel,
fontFamily: textStyle?.fontFamily,
fontFamilyFallback: textStyle?.fontFamilyFallback,
overflow: textStyle?.overflow,
);
final MultiColor? gradientColors;
}
packages/wyatt_ui_kit/lib/src/components/gradients/gradients.dart
+20
View File
@@ -0,0 +1,20 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
export 'gradient_box_border.dart';
export 'gradient_icon.dart';
export 'gradient_text.dart';
export 'gradient_text_style.dart';
packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart
+6 -5
View File
@@ -15,12 +15,13 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
abstract class CardThemeExtension extends ThemeExtension<CardThemeExtension> {
const CardThemeExtension({
this.backgroundColors,
this.secondaryBackgroundColors,
this.borderColor,
this.secondaryBackgroundColor,
this.borderColors,
this.shadowColor,
this.body,
this.title,
@@ -28,9 +29,9 @@ abstract class CardThemeExtension extends ThemeExtension<CardThemeExtension> {
});
// Colors
final List<Color>? backgroundColors;
final Color? secondaryBackgroundColors;
final List<Color>? borderColor;
final MultiColor? backgroundColors;
final Color? secondaryBackgroundColor;
final MultiColor? borderColors;
final BoxShadow? shadowColor;
// TextStyles