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
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
66719732f7
commit
2769d45e20
@ -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 d’autres <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),
|
||||
],
|
||||
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
@ -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(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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';
|
||||
|
Loading…
x
Reference in New Issue
Block a user