andyduke / styled_text_package

Text widget with formatted text using tags. Makes it easier to use formatted text in multilingual applications.
https://pub.dev/packages/styled_text
BSD 3-Clause "New" or "Revised" License
74 stars 48 forks source link

Simplified widget with default tags #75

Closed Chematronix closed 2 months ago

Chematronix commented 4 months ago

This is great to skip lots of boilerplate. To further simplify things, I created this helper class to centralize styles and add some padding:

var appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: const Color(0x006AAE3F)),
);
[...]
class Txt extends StatelessWidget {
  const Txt(
    this.text, {
    super.key,
    this.padding = 2,
    this.extraTags = const {},
  });

  final String text;
  final double padding;
  final Map extraTags;

  static var appStyleTags = {
    'h1': StyledTextTag(
        style: TextStyle(
            height: 2, fontSize: 50, color: appTheme.colorScheme.primary)),
    'h2': StyledTextTag(
        // textTheme sizes not working for some reason...
        style: appTheme.textTheme.headlineMedium!.copyWith(
      color: appTheme.colorScheme.primary,
    )),
    'b': StyledTextTag(style: const TextStyle(fontWeight: FontWeight.bold)),
    'i': StyledTextTag(style: const TextStyle(fontStyle: FontStyle.italic)),
  };

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(padding),
        child: StyledText(text: text, tags: {...appStyleTags, ...extraTags}));
  }
}

so now I can do Txt('<i>Be <b>Bold</b> and Italic') or Txt('<spacey>This<br>is<br><i>spacey!', padding: 10, extraTags: {'spacey': StyledTextTag(style: TextStyle(height: 10))}). Perhaps someone would find it useful too. Would be nice to have something akin in the library itself!

andyduke commented 2 months ago

In my opinion, such a widget should be created in every project, and not in a package, because tags and their styles are specific to each project.