fix(ui_kit): fix text align, add selection and update example for rich text builder
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Hugo Pointcheval 2023-02-17 15:57:54 +01:00
parent 66719732f7
commit 2769d45e20
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
6 changed files with 155 additions and 27 deletions

View File

@ -16,11 +16,8 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.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';
import 'package:wyatt_ui_kit_example/demo_page.dart';
import 'package:wyatt_ui_kit_example/theme/constants.dart';
class RichTextBuilders extends DemoPage {
const RichTextBuilders({super.key});
@ -40,29 +37,25 @@ class RichTextBuilders extends DemoPage {
),
),
const Gap(20),
RichTextBuilder(
defaultStyle: GoogleFonts.montserrat(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.8,
),
styles: {
'gradient-blue': GradientTextStyle.from(
GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.blue1,
height: 1.8,
),
const MultiColor(Constants.blueGradient),
)
},
text: '''
const Padding(
padding: EdgeInsets.all(8),
child: RichTextBuilder(
text: '''
Innovation, Expertise et Accompagnement...
Notre agence de développement Wyatt Studio met tout en oeuvre pour vous aider à <gradient-blue>concrétiser vos idées</gradient-blue> de solutions informatiques et mobiles.
Vous aussi, comme beaucoup dautres <gradient-blue>agences ou startups</gradient-blue>, faites nous confiance pour la réalisation de votre projet dès maintenant !
''',
''',
),
),
const Gap(20),
const Padding(
padding: EdgeInsets.all(8),
child: RichTextBuilder(
text: '''
Je peux être <blue>bleu</blue>, ou même <gradient-red>rouge en dégradé</gradient-red>. À vrai dire <green>je peux</green> être <gradient-blue>un peu</gradient-blue> n'importe quelle couleur.
''',
),
),
const Gap(20),
],

View File

@ -0,0 +1,120 @@
// 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';
import 'package:wyatt_ui_kit_example/theme/constants.dart';
final Map<String, TextStyle> _styles = {
'gradient-blue': GradientTextStyle.from(
GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.blue1,
height: 1.8,
),
const MultiColor(Constants.blueGradient),
),
'gradient-red': GradientTextStyle.from(
GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.red1,
height: 1.8,
),
const MultiColor(Constants.redGradient),
),
'gradient-green': GradientTextStyle.from(
GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.green1,
height: 1.8,
),
const MultiColor(Constants.greenGradient),
),
'blue': GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.blue1,
height: 1.8,
),
'red': GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.red1,
height: 1.8,
),
'green': GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Constants.green1,
height: 1.8,
),
};
class RichTextBuilderTheme extends RichTextBuilderThemeExtension {
const RichTextBuilderTheme({
super.defaultStyle,
super.styles,
});
factory RichTextBuilderTheme.light() => RichTextBuilderTheme(
defaultStyle: GoogleFonts.montserrat(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Constants.grey3,
height: 1.8,
),
styles: _styles,
);
factory RichTextBuilderTheme.dark() => RichTextBuilderTheme(
defaultStyle: GoogleFonts.montserrat(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Constants.white,
height: 1.8,
),
styles: _styles,
);
@override
ThemeExtension<RichTextBuilderThemeExtension> copyWith({
TextStyle? defaultStyle,
Map<String, TextStyle>? styles,
}) =>
RichTextBuilderTheme(
defaultStyle: defaultStyle ?? this.defaultStyle,
styles: styles ?? this.styles,
);
@override
ThemeExtension<RichTextBuilderThemeExtension> lerp(
covariant ThemeExtension<RichTextBuilderThemeExtension>? other,
double t,
) {
if (other is! RichTextBuilderTheme) {
return this;
}
return RichTextBuilderTheme(
defaultStyle: TextStyle.lerp(defaultStyle, other.defaultStyle, t),
styles: styles,
);
}
}

View File

@ -21,6 +21,7 @@ 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/rich_text_builder_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';
@ -87,6 +88,8 @@ abstract class Themes {
FileSelectionButtonTheme.light(),
// Loader
LoaderTheme.light(),
// Rich Text
RichTextBuilderTheme.light(),
],
);
@ -102,6 +105,9 @@ abstract class Themes {
color: const Color(0xFFFFFFFF),
),
),
drawerTheme: const DrawerThemeData(
backgroundColor: Color(0xFF383C40),
),
scaffoldBackgroundColor: const Color(0xFF383C40),
extensions: <ThemeExtension<dynamic>>[
// Cards
@ -113,6 +119,8 @@ abstract class Themes {
FileSelectionButtonTheme.dark(),
// Loader
LoaderTheme.dark(),
// Rich Text
RichTextBuilderTheme.dark(),
],
);
}

View File

@ -50,6 +50,7 @@ class RichTextBuilder extends RichTextBuilderComponent
}) =>
RichTextBuilderStyle(
defaultStyle: themeExtension.defaultStyle,
styles: themeExtension.styles,
),
customStyleFn: (context, {extra}) => RichTextBuilderStyle(
defaultStyle: defaultStyle,
@ -73,7 +74,6 @@ class RichTextBuilder extends RichTextBuilderComponent
null,
),
);
final customParser = parser ??
RichTextParser(
nodeBuilder: (content, style) {
@ -83,6 +83,9 @@ class RichTextBuilder extends RichTextBuilderComponent
content,
style: style,
softWrap: true,
textHeightBehavior: const TextHeightBehavior(
applyHeightToLastDescent: false,
),
),
style: style,
);
@ -94,8 +97,12 @@ class RichTextBuilder extends RichTextBuilderComponent
},
);
return RichText(
text: root.toInlineSpan(customParser),
return SelectionArea(
child: Text.rich(
TextSpan(children: [root.toInlineSpan(customParser)]),
textHeightBehavior:
const TextHeightBehavior(applyHeightToLastDescent: false),
),
);
}
}

View File

@ -16,7 +16,6 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/domain/rich_text_builder_theme_extension.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
class RichTextBuilderThemeResolver extends ThemeResolver<RichTextBuilderStyle,

View File

@ -15,5 +15,6 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
export './button_theme_extension/button_theme_extension.dart';
export './card_theme_extension.dart';
export './loader_theme_extension.dart';
export 'card_theme_extension.dart';
export './rich_text_builder_theme_extension.dart';