From 757a9382dc63adc16982718871fb453ac91ffee3 Mon Sep 17 00:00:00 2001 From: Hugo Pointcheval Date: Tue, 21 Feb 2023 18:05:56 +0100 Subject: [PATCH] feat(ui): add some useful text customization in TextWrapper (closes #149) --- .../lib/components/custom_app_bar.dart | 2 +- .../lib/components/custom_error_widget.dart | 2 +- .../lib/src/core/utils/text_wrapper.dart | 79 ++++++++++++++++++- .../file_selection_button_screen.dart | 16 +++- .../flat_button/flat_button_screen.dart | 8 +- .../symbol_button/symbol_button_screen.dart | 8 +- .../information_card/information_card.dart | 2 +- .../widgets/information_card_titles.dart | 4 +- .../cards/portfolio_card/portfolio_card.dart | 4 +- .../widgets/portfolio_card_header.dart | 12 ++- .../cards/quote_card/quote_card.dart | 6 +- .../cards/skill_card/skill_card.dart | 2 +- .../skill_card/widgets/skill_card_header.dart | 2 +- .../skill_card/widgets/skill_card_skills.dart | 8 +- .../components/cards/widgets/card_text.dart | 13 ++- .../text_inputs/text_input_screen.dart | 6 +- .../text_inputs/widgets/label_widget.dart | 8 +- 17 files changed, 148 insertions(+), 34 deletions(-) diff --git a/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart b/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart index 95110dd8..7a0088fe 100644 --- a/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart +++ b/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart @@ -11,7 +11,7 @@ class CustomAppBar extends AppBarComponent with $CustomAppBarCWMixin { @override Widget build(BuildContext context) => AppBar( title: Text( - super.title?.text ?? '', + super.title?.data ?? '', ), ); } diff --git a/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart b/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart index b0336e29..39a9fea0 100644 --- a/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart +++ b/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart @@ -12,6 +12,6 @@ class CustomErrorWidget extends ErrorWidgetComponent @override Widget build(BuildContext context) => ColoredBox( color: Colors.red, - child: Center(child: Text(error?.text ?? 'Error')), + child: Center(child: Text(error?.data ?? 'Error')), ); } 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 f690aa89..7e288b7d 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 @@ -21,16 +21,87 @@ import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; /// a [Text] or a [RichText]. class TextWrapper { const TextWrapper( - this.text, { + this.data, { this.style, this.gradientColors, + this.textAlign, + this.textDirection, + this.softWrap, + this.overflow, + this.maxLines, + this.selectionColor, }); - const TextWrapper.text(this.text) + const TextWrapper.text(this.data) : style = null, - gradientColors = null; + gradientColors = null, + textAlign = null, + textDirection = null, + softWrap = null, + overflow = null, + maxLines = null, + selectionColor = null; - final String text; + /// Text to be displayed + final String data; + + /// Style of the text final TextStyle? style; + + /// Colors of the gradient, if any final MultiColor? gradientColors; + + /// How the text should be aligned horizontally. + final TextAlign? textAlign; + + /// The directionality of the text. + /// + /// This decides how [textAlign] values like [TextAlign.start] and + /// [TextAlign.end] are interpreted. + /// + /// This is also used to disambiguate how to render bidirectional text. For + /// example, if the [data] is an English phrase followed by a Hebrew phrase, + /// in a [TextDirection.ltr] context the English phrase will be on the left + /// and the Hebrew phrase to its right, while in a [TextDirection.rtl] + /// context, the English phrase will be on the right and the Hebrew phrase on + /// its left. + /// + /// Defaults to the ambient [Directionality], if any. + final TextDirection? textDirection; + + /// Whether the text should break at soft line breaks. + /// + /// If false, the glyphs in the text will be positioned as if there was + /// unlimited horizontal space. + final bool? softWrap; + + /// How visual overflow should be handled. + /// + /// If this is null [TextStyle.overflow] will be used, otherwise the value + /// from the nearest [DefaultTextStyle] ancestor will be used. + final TextOverflow? overflow; + + /// An optional maximum number of lines for the text to span, wrapping if + /// necessary. + /// If the text exceeds the given number of lines, it will be truncated + /// according to [overflow]. + /// + /// If this is 1, text will not wrap. Otherwise, text will be wrapped at the + /// edge of the box. + /// + /// If this is null, but there is an ambient [DefaultTextStyle] that specifies + /// an explicit number for its [DefaultTextStyle.maxLines], then the + /// [DefaultTextStyle] value will take precedence. You can use a [RichText] + /// widget directly to entirely override the [DefaultTextStyle]. + final int? maxLines; + + /// The color to use when painting the selection. + /// + /// This is ignored if [SelectionContainer.maybeOf] returns null + /// in the [BuildContext] of the [Text] widget. + /// + /// If null, the ambient [DefaultSelectionStyle] is used (if any); failing + /// that, the selection color defaults to [DefaultSelectionStyle.defaultColor] + /// (semi-transparent grey). + final Color? selectionColor; } 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 d707014c..36495ec9 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 @@ -182,8 +182,14 @@ class FileSelectionButtonScreen /// More infos in `ThemeResolver` class if (title != null) ...[ Text( - title!.text, + title!.data, style: title!.style ?? style.title, + textAlign: title!.textAlign, + textDirection: title!.textDirection, + softWrap: title!.softWrap, + overflow: title!.overflow, + maxLines: title!.maxLines, + selectionColor: title!.selectionColor, ).toGradient( gradientColors: style.foregroundColors, ), @@ -203,8 +209,14 @@ class FileSelectionButtonScreen if (subTitle != null) ...[ const Gap(5), Text( - subTitle!.text, + subTitle!.data, style: subTitle!.style ?? style.subTitle, + textAlign: title!.textAlign, + textDirection: title!.textDirection, + softWrap: title!.softWrap, + overflow: title!.overflow, + maxLines: title!.maxLines, + selectionColor: title!.selectionColor, ).toGradient( 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 6be53168..07df2a77 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 @@ -180,8 +180,14 @@ class FlatButtonScreen extends CubitScreen { /// More infos in ThemeResolver class if (label != null) ...[ Text( - label!.text, + label!.data, style: label!.style ?? style.label, + textAlign: label!.textAlign, + textDirection: label!.textDirection, + softWrap: label!.softWrap, + overflow: label!.overflow, + maxLines: label!.maxLines, + selectionColor: label!.selectionColor, ).toGradient( gradientColors: style.foregroundColors, ) 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 be5009db..e51505ec 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 @@ -193,8 +193,14 @@ class SymbolButtonScreen if (label != null) ...[ Gap(style.padding?.horizontal ?? 10), Text( - label!.text, + label!.data, style: label!.style ?? style.label, + textAlign: label!.textAlign, + textDirection: label!.textDirection, + softWrap: label!.softWrap, + overflow: label!.overflow, + maxLines: label!.maxLines, + selectionColor: label!.selectionColor, ).toGradient( 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 bcde0f56..baae74dc 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 @@ -77,7 +77,7 @@ class InformationCard extends InformationCardComponent if (body != null) ...[ const Gap(_bodyTopSpacing), CardText( - body!.text, + body!, textType: TextType.body, style: body!.style, 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 969e1505..2ccd8283 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 @@ -41,7 +41,7 @@ class InformationCardTitles extends StatelessWidget { children: [ if (title != null) ...[ CardText( - title!.text, + title!, textType: TextType.title, style: title!.style, gradientColors: title!.gradientColors, @@ -50,7 +50,7 @@ class InformationCardTitles extends StatelessWidget { if (subtitle != null) ...[ const Gap(_titlesLineSpacing), CardText( - subtitle!.text, + subtitle!, textType: TextType.subtitle, style: subtitle!.style, 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 1226b2e6..6ef86441 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 @@ -70,7 +70,7 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin { const Gap(20), ], CardText( - description!.text, + description!, textType: TextType.body, style: description!.style, gradientColors: description!.gradientColors, @@ -105,7 +105,7 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin { const Gap(20), ], CardText( - description!.text, + description!, textType: TextType.body, style: description!.style, gradientColors: description!.gradientColors, 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 2a9620fe..79c41443 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 @@ -64,7 +64,7 @@ class PortfolioCardHeader extends StatelessWidget { children: [ if (keyword != null) ...keyword!.map( - (e) => Container( + (word) => Container( margin: const EdgeInsets.all(3), padding: const EdgeInsets.all(6), decoration: BoxDecoration( @@ -75,8 +75,14 @@ class PortfolioCardHeader extends StatelessWidget { borderRadius: BorderRadius.circular(8), ), child: Text( - e.text, - style: e.style ?? context.textTheme.bodySmall, + word.data, + style: word.style ?? context.textTheme.bodySmall, + textAlign: word.textAlign, + textDirection: word.textDirection, + softWrap: word.softWrap, + overflow: word.overflow, + maxLines: word.maxLines, + selectionColor: word.selectionColor, ), ), ), 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 2363a5df..0e47517e 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 @@ -71,7 +71,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin { ), if (quote != null) ...[ CardText( - quote!.text, + quote!, textType: TextType.body, style: quote!.style, gradientColors: quote!.gradientColors, @@ -102,7 +102,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin { children: [ if (name != null) ...[ CardText( - name!.text, + name!, textType: TextType.body, style: name!.style, gradientColors: name!.gradientColors, @@ -110,7 +110,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin { ], if (subtitle != null) ...[ CardText( - subtitle!.text, + subtitle!, textType: TextType.subtitle, style: subtitle!.style, 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 6285f0fa..5fc962b0 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 @@ -67,7 +67,7 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin { const Gap(25), if (description != null) ...[ CardText( - description!.text, + description!, textType: TextType.body, style: description!.style, gradientColors: description!.gradientColors, 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 bfd8af2d..2f492218 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 @@ -64,7 +64,7 @@ class SkillCardHeader extends StatelessWidget { children: [ if (title != null) ...[ CardText( - title!.text, + title!, textType: TextType.title, style: title!.style, 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 76059fa9..3b1e24ff 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 @@ -37,7 +37,7 @@ class SkillCardSkills extends StatelessWidget { Widget build(BuildContext context) => Column( children: skills! .map( - (e) => Row( + (skill) => Row( children: [ Icon( leadingIcon ?? Icons.check, @@ -47,10 +47,10 @@ class SkillCardSkills extends StatelessWidget { const Gap(10), Expanded( child: CardText( - e.text, + skill, textType: TextType.body, - style: e.style, - gradientColors: e.gradientColors, + style: skill.style, + gradientColors: skill.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 87ae1880..1665fcd7 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 @@ -26,16 +26,17 @@ enum TextType { class CardText extends StatelessWidget { const CardText( - this.data, { + this.text, { required this.textType, this.style, this.gradientColors, super.key, }); + + final TextWrapper text; final TextType textType; final TextStyle? style; final MultiColor? gradientColors; - final String data; TextStyle? _getStyle(BuildContext context) { if (style != null) { @@ -56,7 +57,13 @@ class CardText extends StatelessWidget { @override Widget build(BuildContext context) => Text( - data, + text.data, style: _getStyle(context), + textAlign: text.textAlign, + textDirection: text.textDirection, + softWrap: text.softWrap, + overflow: text.overflow, + maxLines: text.maxLines, + selectionColor: text.selectionColor, ).toGradient(gradientColors: gradientColors); } diff --git a/packages/wyatt_ui_kit/lib/src/components/text_inputs/text_input_screen.dart b/packages/wyatt_ui_kit/lib/src/components/text_inputs/text_input_screen.dart index bc109d98..34836c2d 100644 --- a/packages/wyatt_ui_kit/lib/src/components/text_inputs/text_input_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/text_inputs/text_input_screen.dart @@ -315,14 +315,14 @@ class TextInputScreen extends CubitScreen { labelStyle: style.labelStyle, ) : null, - hintText: hint?.text, + hintText: hint?.data, hintStyle: hint?.style, prefixIcon: prefixIcon, - prefixText: prefixText?.text, + prefixText: prefixText?.data, prefixStyle: prefixText?.style, prefixIconColor: style.prefixIconColor, suffixIcon: suffixIcon, - suffixText: suffixText?.text, + suffixText: suffixText?.data, suffixStyle: suffixText?.style, suffixIconColor: style.suffixIconColor, enabled: state.controlState != ControlState.disabled, diff --git a/packages/wyatt_ui_kit/lib/src/components/text_inputs/widgets/label_widget.dart b/packages/wyatt_ui_kit/lib/src/components/text_inputs/widgets/label_widget.dart index 0312c62e..f53faf25 100644 --- a/packages/wyatt_ui_kit/lib/src/components/text_inputs/widgets/label_widget.dart +++ b/packages/wyatt_ui_kit/lib/src/components/text_inputs/widgets/label_widget.dart @@ -31,7 +31,13 @@ class LabelWidget extends StatelessWidget { @override Widget build(BuildContext context) => Text( - label?.text ?? '', + label?.data ?? '', style: labelStyle, + textAlign: label!.textAlign, + textDirection: label!.textDirection, + softWrap: label!.softWrap, + overflow: label!.overflow, + maxLines: label!.maxLines, + selectionColor: label!.selectionColor, ); }