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

refactor(ui): rework text gradient and text wrapper

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-02-17 14:47:56 +01:00
parent c5f8b69184
commit ef52015372
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
27 changed files with 367 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart
View File

@ -15,10 +15,11 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/text_wrapper.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
extension StringExtension on String? {
TextWrapper? wrap({TextStyle? style, List<Color>? gradient}) => this != null
? TextWrapper(this!, style: style, gradient: gradient)
: null;
TextWrapper? wrap({TextStyle? style, MultiColor? gradientColors}) =>
this != null
? TextWrapper(this!, style: style, gradientColors: gradientColors)
: null;
}

11
packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart
View File

@ -15,17 +15,22 @@
// 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';
/// Wraps [String] and [TextStyle] into one object that can be
/// a [Text] or a [RichText].
class TextWrapper {
const TextWrapper(
this.text, {
this.style,
this.gradient,
this.gradientColors,
});
factory TextWrapper.text(String text) => TextWrapper(text);
const TextWrapper.text(this.text)
: style = null,
gradientColors = null;
final String text;
final TextStyle? style;
final List<Color>? gradient;
final MultiColor? gradientColors;
}

8
packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart
View File

@ -31,8 +31,14 @@ class FlatButtons extends StatelessWidget {
),
const Gap(20),
Center(
/// You can overwrite global textstyle of the label with [label],
/// but if you only want to override the color/gradient of the text
/// in a particular case you can override the style that will
/// be merge during the build.
child: FlatButton(
label: const TextWrapper('Voir notre savoir faire'),
label: const TextWrapper(
'Voir notre savoir faire',
),
),
),
const Gap(20),

22
packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart
View File

@ -18,13 +18,13 @@ class InformationCards extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
InformationCard(
icons: const [
const InformationCard(
icons: [
FlutterLogo(size: 60),
FlutterLogo(size: 60),
FlutterLogo(size: 60),
],
title: const TextWrapper('Flutter'),
title: TextWrapper('Flutter'),
subtitle: TextWrapper.text('One single code base.'),
body: TextWrapper.text(
'Cupidatat reprehenderit aliqua eiusmod Lorem. '
@ -58,9 +58,9 @@ class InformationCards extends StatelessWidget {
FlutterLogo(size: 60),
],
title: 'Flutter'.wrap(
gradient: [Colors.blue, Colors.green],
gradientColors: const MultiColor([Colors.blue, Colors.green]),
),
subtitle: TextWrapper.text('One single code base.'),
subtitle: const TextWrapper.text('One single code base.'),
body: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
'Qui ipsum id ea ea nulla labore aute ullamco aute '
'quis elit ut amet velit. Incididunt fugiat proident '
@ -86,8 +86,8 @@ class InformationCards extends StatelessWidget {
FlutterLogo(size: 60),
],
axis: Axis.horizontal,
title: TextWrapper.text('Flutter'),
subtitle: TextWrapper.text('One single code base.'),
title: const TextWrapper.text('Flutter'),
subtitle: const TextWrapper.text('One single code base.'),
body: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
'Qui ipsum id ea ea nulla labore aute ullamco aute '
'quis elit ut amet velit. Incididunt fugiat proident '
@ -100,10 +100,10 @@ class InformationCards extends StatelessWidget {
'magna cupidatat Lorem nulla cupidatat voluptate '
'irure ex reprehenderit.'
.wrap(
gradient: [
gradientColors: const MultiColor([
Colors.red,
Colors.orange,
],
]),
),
),
const Gap(20),
@ -123,14 +123,14 @@ class InformationCards extends StatelessWidget {
FlutterLogo(size: 60),
],
axis: Axis.horizontal,
title: TextWrapper.text('Flutter'),
title: const TextWrapper.text('Flutter'),
subtitle: 'One single code base.'.wrap(
// gradient: [Colors.blue, Colors.green],
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
body: TextWrapper.text(
body: const TextWrapper.text(
'Cupidatat reprehenderit aliqua eiusmod Lorem. '
'Qui ipsum id ea ea nulla labore aute ullamco aute '
'quis elit ut amet velit. Incididunt fugiat proident '

4
packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart
View File

@ -128,10 +128,10 @@ class PortfolioCards extends StatelessWidget {
),
projectName: const TextWrapper(
'Flutter',
gradient: [
gradientColors: MultiColor([
Colors.blue,
Colors.green,
],
]),
),
subtitle: const TextWrapper('Mobile / Web / Macos.'),
description: const TextWrapper(

7
packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart
View File

@ -49,7 +49,12 @@ class QuoteCards extends StatelessWidget {
'quis elit ut amet velit. Incididunt fugiat proident '
'proident deserunt tempor Lorem cillum qui do '
'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
.wrap(gradient: [Colors.red, Colors.orange]),
.wrap(
gradientColors: const MultiColor([
Colors.red,
Colors.orange,
]),
),
avatar: const FlutterLogo(
size: 40,
),

11
packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart
View File

@ -44,7 +44,7 @@ class SkillCards extends StatelessWidget {
'proident deserunt tempor Lorem cillum qui do '
'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
.wrap(),
skills: [
skills: const [
TextWrapper.text('Firebase'),
TextWrapper.text(
'Qui ipsum id ea ea nulla labore aute ullamco aute ',
@ -62,11 +62,14 @@ class SkillCards extends StatelessWidget {
'proident deserunt tempor Lorem cillum qui do '
'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
.wrap(),
skills: [
skills: const [
TextWrapper.text('Firebase'),
const TextWrapper(
TextWrapper(
'Qui ipsum id ea ea nulla labore aute ullamco aute ',
gradient: [Colors.red, Colors.orange],
gradientColors: MultiColor([
Colors.red,
Colors.orange,
]),
),
TextWrapper.text('Firebase'),
TextWrapper.text('Firebase'),

127
packages/wyatt_ui_kit/example/lib/theme/card_theme.dart Normal file
View File

@ -0,0 +1,127 @@
// 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/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
class CardTheme extends CardThemeExtension {
const CardTheme({
super.backgroundColors,
super.body,
super.borderColors,
super.secondaryBackgroundColor,
super.shadowColor,
super.subtitle,
super.title,
});
factory CardTheme.light() => CardTheme(
backgroundColors: const MultiColor.single(Color(0xFFF6F6F6)),
secondaryBackgroundColor: Colors.white,
borderColors: const MultiColor([
Color(0xFFDDE0E3),
Color(0xFFCACCD4),
]),
title: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.w500,
color: const Color(0xFF24262A),
),
subtitle: GoogleFonts.montserrat(
fontSize: 15,
fontWeight: FontWeight.w300,
color: const Color(0xFF24262A),
),
body: GoogleFonts.montserrat(
fontSize: 12,
fontWeight: FontWeight.w300,
height: 1.7,
color: const Color(0xFF24262A),
),
);
factory CardTheme.dark() => CardTheme(
backgroundColors:
MultiColor.single(const Color(0xFFFFFFFF).withOpacity(0.04)),
secondaryBackgroundColor: const Color(0xFFFFFFFF).withOpacity(0.04),
borderColors: const MultiColor([
Color(0xFF60656A),
Color(0xFF383C40),
]),
title: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.w500,
color: const Color(0xFFFFFFFF),
),
subtitle: GoogleFonts.montserrat(
fontSize: 15,
fontWeight: FontWeight.w300,
color: const Color(0xFFFFFFFF),
),
body: GoogleFonts.montserrat(
fontSize: 12,
fontWeight: FontWeight.w300,
height: 1.7,
color: const Color(0xFFFFFFFF),
),
);
@override
ThemeExtension<CardThemeExtension> copyWith({
MultiColor? backgroundColors,
Color? secondaryBackgroundColor,
MultiColor? borderColors,
BoxShadow? shadowColor,
TextStyle? body,
TextStyle? title,
TextStyle? subtitle,
}) =>
CardTheme(
backgroundColors: backgroundColors ?? this.backgroundColors,
secondaryBackgroundColor:
secondaryBackgroundColor ?? this.secondaryBackgroundColor,
borderColors: borderColors ?? this.borderColors,
shadowColor: shadowColor ?? this.shadowColor,
body: body ?? this.body,
title: title ?? this.title,
subtitle: subtitle ?? this.subtitle,
);
@override
ThemeExtension<CardThemeExtension> lerp(
covariant ThemeExtension<CardThemeExtension>? other,
double t,
) {
if (other is! CardTheme) {
return this;
}
return CardTheme(
backgroundColors: other.backgroundColors,
secondaryBackgroundColor: Color.lerp(
secondaryBackgroundColor,
other.secondaryBackgroundColor,
t,
),
borderColors: other.borderColors,
shadowColor: BoxShadow.lerp(shadowColor, other.shadowColor, t),
body: TextStyle.lerp(body, other.body, t),
title: TextStyle.lerp(title, other.title, t),
subtitle: TextStyle.lerp(subtitle, other.subtitle, t),
);
}
}

61
packages/wyatt_ui_kit/example/lib/theme/themes.dart
View File

@ -15,14 +15,14 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart' hide CardTheme;
import 'package:google_fonts/google_fonts.dart';
import 'package:wyatt_ui_kit_example/theme/card_theme.dart';
import 'package:wyatt_ui_kit_example/theme/file_selection_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme/loader_theme.dart';
import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme_extension.dart';
/// Easely switch between Material and Studio themes.
abstract class Themes {
@ -78,32 +78,8 @@ abstract class Themes {
),
scaffoldBackgroundColor: Colors.white,
extensions: <ThemeExtension<dynamic>>[
CustomCardColorExtension(
backgroundColors: const [
Color(0xFFF6F6F6),
],
secondaryBackgroundColors: Colors.white,
borderColor: const [
Color(0xFFDDE0E3),
Color(0xFFCACCD4),
],
title: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.w500,
color: const Color(0xFF24262A),
),
subtitle: GoogleFonts.montserrat(
fontSize: 15,
fontWeight: FontWeight.w300,
color: const Color(0xFF24262A),
),
body: GoogleFonts.montserrat(
fontSize: 12,
fontWeight: FontWeight.w300,
height: 1.7,
color: const Color(0xFF24262A),
),
),
// Cards
CardTheme.light(),
// Buttons
FlatButtonTheme.light(),
SymbolButtonTheme.light(),
@ -128,33 +104,8 @@ abstract class Themes {
),
scaffoldBackgroundColor: const Color(0xFF383C40),
extensions: <ThemeExtension<dynamic>>[
CustomCardColorExtension(
secondaryBackgroundColors:
const Color(0xFFFFFFFF).withOpacity(0.04),
backgroundColors: [
const Color(0xFFFFFFFF).withOpacity(0.04),
],
borderColor: const [
Color(0xFF60656A),
Color(0xFF383C40),
],
title: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.w500,
color: const Color(0xFFFFFFFF),
),
subtitle: GoogleFonts.montserrat(
fontSize: 15,
fontWeight: FontWeight.w300,
color: const Color(0xFFFFFFFF),
),
body: GoogleFonts.montserrat(
fontSize: 12,
fontWeight: FontWeight.w300,
height: 1.7,
color: const Color(0xFFFFFFFF),
),
),
// Cards
CardTheme.dark(),
// Buttons
FlatButtonTheme.dark(),
SymbolButtonTheme.dark(),

54
packages/wyatt_ui_kit/example/lib/theme_extension.dart
View File

@ -1,54 +0,0 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart' as ui_kit;
class CustomCardColorExtension extends ui_kit.CardThemeExtension {
const CustomCardColorExtension({
super.backgroundColors,
super.secondaryBackgroundColors,
super.borderColor,
super.shadowColor,
super.body,
super.title,
super.subtitle,
});
@override
CustomCardColorExtension copyWith({
List<Color>? backgroundColors,
Color? secondaryBackgroundColors,
List<Color>? borderColor,
BoxShadow? shadowColor,
TextStyle? body,
TextStyle? title,
TextStyle? subtitle,
}) =>
CustomCardColorExtension(
backgroundColors: backgroundColors ?? this.backgroundColors,
secondaryBackgroundColors:
secondaryBackgroundColors ?? this.secondaryBackgroundColors,
borderColor: borderColor ?? this.borderColor,
body: body ?? this.body,
title: title ?? this.title,
subtitle: subtitle ?? this.subtitle,
);
@override
ThemeExtension<ui_kit.CardThemeExtension> lerp(
covariant ThemeExtension<ui_kit.CardThemeExtension>? other,
double t,
) {
if (other is! CustomCardColorExtension) {
return this;
}
return CustomCardColorExtension(
secondaryBackgroundColors: Color.lerp(
secondaryBackgroundColors,
other.secondaryBackgroundColors,
t,
),
body: TextStyle.lerp(body, other.body, t),
title: TextStyle.lerp(title, other.title, t),
subtitle: TextStyle.lerp(subtitle, other.subtitle, t),
);
}
}

17
packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart
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,
),
],
],

8
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
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),

8
packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
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,
),
],
],

2
packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart
View File

@ -80,7 +80,7 @@ class InformationCard extends InformationCardComponent
body!.text,
textType: TextType.body,
style: body!.style,
gradient: body!.gradient,
gradientColors: body!.gradientColors,
),
],
],

4
packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart
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,
),
],
],

4
packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart
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!],

2
packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart
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(

25
packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart
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,
),
],
],

2
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart
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),
],

4
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart
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,
),
],
],

2
packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart
View File

@ -50,7 +50,7 @@ class SkillCardSkills extends StatelessWidget {
e.text,
textType: TextType.body,
style: e.style,
gradient: e.gradient,
gradientColors: e.gradientColors,
),
),
],

12
packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart
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);
}

20
packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart
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,
);
}
}

53
packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart
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);
}
}

85
packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text_style.dart Normal file
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;
}

20
packages/wyatt_ui_kit/lib/src/components/gradients/gradients.dart Normal file
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';

11
packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart
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