diff --git a/packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart b/packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart index 886f51f9..04503d56 100644 --- a/packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart +++ b/packages/wyatt_ui_components/lib/src/core/extensions/string_extension.dart @@ -15,10 +15,11 @@ // along with this program. If not, see . 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? 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; } diff --git a/packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart b/packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart index 176765bc..f690aa89 100644 --- a/packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart +++ b/packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart @@ -15,17 +15,22 @@ // along with this program. If not, see . 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? gradient; + final MultiColor? gradientColors; } diff --git a/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart index 2a4d684f..4c1a6b1d 100644 --- a/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart +++ b/packages/wyatt_ui_kit/example/lib/buttons/flat_button/flat_buttons.dart @@ -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), diff --git a/packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart b/packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart index 17cd4c98..a671cab1 100644 --- a/packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart +++ b/packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart @@ -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 ' diff --git a/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart b/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart index 4d3a440a..509cb240 100644 --- a/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart +++ b/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart @@ -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( diff --git a/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart b/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart index 91e52dd0..d5e76720 100644 --- a/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart +++ b/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart @@ -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, ), diff --git a/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart b/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart index 54dafd90..d8b54077 100644 --- a/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart +++ b/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart @@ -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'), diff --git a/packages/wyatt_ui_kit/example/lib/theme/card_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/card_theme.dart new file mode 100644 index 00000000..f103c368 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/card_theme.dart @@ -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 . + +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 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 lerp( + covariant ThemeExtension? 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), + ); + } +} diff --git a/packages/wyatt_ui_kit/example/lib/theme/themes.dart b/packages/wyatt_ui_kit/example/lib/theme/themes.dart index c298daf8..684270f8 100644 --- a/packages/wyatt_ui_kit/example/lib/theme/themes.dart +++ b/packages/wyatt_ui_kit/example/lib/theme/themes.dart @@ -15,14 +15,14 @@ // along with this program. If not, see . 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: >[ - 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: >[ - 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(), diff --git a/packages/wyatt_ui_kit/example/lib/theme_extension.dart b/packages/wyatt_ui_kit/example/lib/theme_extension.dart deleted file mode 100644 index 92abc0fb..00000000 --- a/packages/wyatt_ui_kit/example/lib/theme_extension.dart +++ /dev/null @@ -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? backgroundColors, - Color? secondaryBackgroundColors, - List? 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 lerp( - covariant ThemeExtension? 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), - ); - } -} diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart index 8f884b51..bc45bec9 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart @@ -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 { @@ -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, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart index 178cdb01..803c68cc 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart @@ -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 { const FlatButtonScreen({ @@ -204,12 +203,7 @@ class FlatButtonScreen extends CubitScreen { 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), diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart index 547ebf64..b8c84633 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart @@ -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 { @@ -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, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart b/packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart index 87cbba04..bcde0f56 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart @@ -80,7 +80,7 @@ class InformationCard extends InformationCardComponent body!.text, textType: TextType.body, style: body!.style, - gradient: body!.gradient, + gradientColors: body!.gradientColors, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart b/packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart index 2b48a39d..969e1505 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart @@ -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, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart index 88529fb9..1226b2e6 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart @@ -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!], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart index 39998629..2a9620fe 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart @@ -71,7 +71,7 @@ class PortfolioCardHeader extends StatelessWidget { color: secondaryBackgroundColors ?? Theme.of(context) .extension() - ?.secondaryBackgroundColors, + ?.secondaryBackgroundColor, borderRadius: BorderRadius.circular(8), ), child: Text( diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart b/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart index 358a3897..2363a5df 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart @@ -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, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart index 357f8fcc..6285f0fa 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart @@ -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), ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart index cd4bbfee..bfd8af2d 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart @@ -46,7 +46,7 @@ class SkillCardHeader extends StatelessWidget { color: secondaryBackgroundColors ?? Theme.of(context) .extension() - ?.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, ), ], ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart index 01e9c778..76059fa9 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart @@ -50,7 +50,7 @@ class SkillCardSkills extends StatelessWidget { e.text, textType: TextType.body, style: e.style, - gradient: e.gradient, + gradientColors: e.gradientColors, ), ), ], diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart b/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart index 7f841274..87ae1880 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart @@ -15,7 +15,7 @@ // along with this program. If not, see . 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? 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); } diff --git a/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart b/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart index fe2f1cb8..4c608380 100644 --- a/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart +++ b/packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart @@ -110,8 +110,9 @@ class _CardWrapperState extends State { 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 { Theme.of(context).extension(); 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 { final extensionCardColor = Theme.of(context).extension(); 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, ); } } diff --git a/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart b/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart index 0bed20a9..cd6ae7fe 100644 --- a/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart +++ b/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text.dart @@ -17,16 +17,29 @@ // along with this program. If not, see . 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); } } diff --git a/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text_style.dart b/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text_style.dart new file mode 100644 index 00000000..e737e9e4 --- /dev/null +++ b/packages/wyatt_ui_kit/lib/src/components/gradients/gradient_text_style.dart @@ -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 . + +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; +} diff --git a/packages/wyatt_ui_kit/lib/src/components/gradients/gradients.dart b/packages/wyatt_ui_kit/lib/src/components/gradients/gradients.dart new file mode 100644 index 00000000..e19e9d36 --- /dev/null +++ b/packages/wyatt_ui_kit/lib/src/components/gradients/gradients.dart @@ -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 . + +export 'gradient_box_border.dart'; +export 'gradient_icon.dart'; +export 'gradient_text.dart'; +export 'gradient_text_style.dart'; diff --git a/packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart b/packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart index 63a0f8a6..1ac3c983 100644 --- a/packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart +++ b/packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart @@ -15,12 +15,13 @@ // along with this program. If not, see . import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; abstract class CardThemeExtension extends ThemeExtension { 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 { }); // Colors - final List? backgroundColors; - final Color? secondaryBackgroundColors; - final List? borderColor; + final MultiColor? backgroundColors; + final Color? secondaryBackgroundColor; + final MultiColor? borderColors; final BoxShadow? shadowColor; // TextStyles