The easiest way to style custom text snippets in flutter

Overview

Super Rich Text

Check it out at Pub.Dev

The easiest way to style custom text snippets

ezgif com-video-to-gif-3

Help Maintenance

I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

Defaults

In standard markers the "*" is set to bold and "/" to italics as in the example:

SuperRichText(
  text: 'Text in *bold* and /italic/'
)

Others Markers

But you can change and set your own by passing a list of other labels:

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
      marker: 'll',
      style: TextStyle(
        color: Colors.orangeAccent
      )
    ),
    MarkerText(
      marker: 'rr',
      style: TextStyle(
          color: Colors.redAccent
      )
    ),
  ],
)

Override Global Markers

Or even override "*" and "/" by setting global styles not to be used:

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  useGlobalMarkers: false, // set false
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
        marker: '*',
        style: TextStyle(
            color: Colors.orangeAccent
        )
    )...
  ],
)

Global Markers

The markers in the "othersMarkers" parameter are only for the widget in question, but you can also distinguish global markers:

SuperRichText.globalMarkerTexts.add(MarkerText(
    marker: '|',
    style: TextStyle(
      color: Colors.deepPurple
    )
  )
);

Links

It is also possible to insert functions or links directly into the text:

MarkerText.withUrl(
  marker: 'll',
  urls: [
    'https://www.google.com',
    'https://www.facebook.com'
  ],
  style: TextStyle(
    fontSize: 36,
    color: Colors.orangeAccent
  )
)

In this case, the link list should be in exactly the same sequence as the links within the text, having as base text: "this text has llLink1ll and llLink2ll", the example above would set Link1 as 'https://www.google.com' and Link2 as 'https://www.facebook.com'. Another point is that it already has a bold style and blue text by default.

Functions

With functions, the sequence is also the same, but the call should look like this:

MarkerText.withFunction(
  marker: '<ff>',
  functions: [
    () => print('function 1'),
    () => print('function 2')
  ],
  style: TextStyle(
    color: Colors.greenAccent
  )
)

Same Functions

When your text has multiple words that perform the same function and has the same style, you can use this:

MarkerText.withSameFunction(
  marker: '<sf>',
  function: print('same function'),
  style: TextStyle(
    color: Colors.greenAccent
  )
)
Comments
  • One function for marker

    One function for marker

    Good day, first of all want to say that this extension is beautiful. I'd like it alot. I faced a problem in my project. I have Marker with function

      MarkerText.withFunction(
            marker: '/19/',
            functions: [() => print("test")],
            style: styleMarker),
    

    and my text String looks like this var textString = "The main part of /19/this/19/ is identical with /19/Rule/19/ of the ";

    So print is only work on first word in string. But it doesnt work on second word. Its works fine if i write second function in list of functions

        MarkerText.withFunction(
            marker: '/19/',
            functions: [() => print("test"), () => print("test")],
            style: styleMarker),
    

    but it is not very convenient way to solve the problem because in my text could be a lot of specific part with same marker tag, and for each of them i should past the same function. Thanks in advance

    opened by everancii 3
  • String with no attributes causes exception

    String with no attributes causes exception

    If I have a text with no attributes at all, I get an exception:

    ════════ Exception caught by widgets library ════════ The following FormatException was thrown building SuperRichText(dirty): Nothing to repeat*.?

    The relevant error-causing widget was: SuperRichText file:///Users/.../lib/helper/RichTextWidget.dart:66:12 When the exception was thrown, this was the stack: #0 new _RegExp (dart:core-patch/regexp_patch.dart:219:51) #1 new RegExp (dart:core-patch/regexp_patch.dart:29:15) #2 SuperRichText.build. (package:super_rich_text/super_rich_text.dart:172:17) #3 List.forEach (dart:core-patch/growable_array.dart:285:8) #4 SuperRichText.build (package:super_rich_text/super_rich_text.dart:163:16) ... ══════════════

    The use case is that the Widget first displays a loading text without attributes and then later some text with attributes like * or / is displayed.

    opened by MartinSchultz 3
  • Text styling gets lost on scrolling

    Text styling gets lost on scrolling

    When scrolling up and down the Styling gets lost and the input Text is displayed:

    big

    Here you can see the used Code:

    return Center(
                  child: ListView.builder(
                    itemCount: 10,
                    scrollDirection: Axis.vertical,
                    cacheExtent: 100.0,
                    padding: EdgeInsets.symmetric(vertical: 10.0),
                    itemBuilder: (BuildContext context, int index) {
    
                      String material = '*—*';
    
                      return GestureDetector(
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border.all(),
                                borderRadius: BorderRadius.circular(12)),
                            margin: EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 10.0),
                            padding: EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 10.0),
                            child: Column(
                              children: <Widget>[
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Flexible(
                                      child: Column(
                                        children: <Widget>[
                                          SuperRichText(
                                            text:
                                                'Item',
                                            style: Theme.of(context)
                                                .textTheme
                                                .headline5,
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                                Divider(),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    Tooltip(
                                      message: 'Spieldauer',
                                      height: 24,
                                      child: Icon(Icons.timer),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(right: 7.0),
                                    ),
                                    Text('5 -20 Min.',
                                      style: Theme.of(context).textTheme.bodyText1,
                                    ),
                                    Spacer(
                                      flex: 1,
                                    ),
                                    Divider(),
                                    Spacer(
                                      flex: 1,
                                    ),
                                    Tooltip(
                                      message: 'Gruppengröße',
                                      height: 24,
                                      child: Icon(Icons.group),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(right: 7.0),
                                    ),
                                    Text('1 - 3',
                                      style: Theme.of(context).textTheme.bodyText1,
                                    ),
                                  ],
                                ),
                                Divider(),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Tooltip(
                                      message: 'Material',
                                      height: 24,
                                      child: Icon(Icons.build),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(right: 7.0),
                                    ),
                                    new Flexible(
                                      child: Column(
                                        children: <Widget>[
                                          SuperRichText(
                                            text: '$material',
                                            style: Theme.of(context)
                                                .textTheme
                                                .bodyText1,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          onTap: () {
                          });
                    },
                  ),
                );
              ```
    opened by kgass 2
  • Added SelectableText and dependencies updated.

    Added SelectableText and dependencies updated.

    SelectableText added to existing SuperRichText widget. Now you can toggle this by "isSelectable" parameter. url_launcher package migrated to the new version.

    opened by webdastur 1
  • Custom markers being shifted

    Custom markers being shifted

    return SuperRichText(
          text: text,
          style: style,
          useGlobalMarkers: false,
          othersMarkers: [
            MarkerText(
              marker: '//',
              style: const TextStyle(
                fontStyle: FontStyle.italic,
              ),
            ),
            MarkerText(
              marker: '>',
              style: TextStyle(
                fontSize: style.fontSize! * 0.8,
              ),
            ),
            MarkerText(
              marker: '^',
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        );
    

    Using the text regular text //italic text 1// regular text //italic text 2// regular text outputs the following regular text regular text italic text 1 regular text_italic text 2_ the strings to be replaced are being shifted to the next position of the next one, but using regular text ^bold text 1^ regular text ^bold text 2^ regular text works as expected

    opened by andresatierf 0
Owner
Woton Sampaio
Mobile native/Flutter Developer
Woton Sampaio
The easiest way to create your animated splash screen in a fully customizable way.

Animated Splash Screen Check it out at Pub.Dev Do it your way Assets image Custom Widget Url image IconData Or just change PageTransition and/or Splas

Clean Code 104 Nov 10, 2022
Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dimas Ibnu Malik 122 Dec 1, 2022
Easiest way to add support for light and dark theme in your flutter app.

Adaptive Theme Easiest way to add support for light and dark theme in your Flutter app. It allows to manually set light or dark theme and also lets yo

Birju Vachhani 287 Dec 27, 2022
This library provides the easiest way to integrate Twitter Cards in Flutter web apps 🐦

The Easiest Way to Integrate Twitter Cards into Your Flutter Web App ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2

Twitter.dart 3 Aug 7, 2022
This library provides the optimized and easiest way to authenticate with Mastodon's OAuth 2.0 in your Flutter app 🎯

The Optimized and Easiest Way to Integrate OAuth 2.0 with Mastodon API in Flutter ?? 1. Guide ?? 1.1. Getting Started ⚡ 1.1.1. Install Library 1.1.2.

Mastodon.dart 11 Jul 7, 2023
Use the easiest way to create a dotted line view 👀!

fdottedline Use the easiest way to create a dotted line view ?? ! [FDottedLine] provides developers with the ability to create dashed lines. It also s

Fliggy Mobile 122 Jul 17, 2022
The easiest way to use navigation, context less and useful methods.

Starlight Utils The easiest way to use navigation, context less and useful methods. Features Name Status Context Less Navigation Service ✅ Context Les

Ye Myo Aung 5 Jul 10, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Alok Dubey 7 Sep 4, 2022
Text analyzer that extracts tokens from text for use in full-text search queries and indexes.

Tokenize text, compute document readbility and compare terms in Natural Language Processing. THIS PACKAGE IS PRE-RELEASE, and SUBJECT TO DAILY BREAKIN

GM Consult Pty Ltd 5 Dec 12, 2022
Code Snippets of highly interactive Flutter Templates that can be implemented in a Native Flutter App.

Native Frontend Flutter About the Repository We are on a mission to make things easy and convenient for all the users who just want to save their time

Dezenix 19 Sep 5, 2022
Flutter quick code snippets - Feel free to contribute.

Flutter quick code snippets Points to be noted Here you can add your own quick flutter code snippets which can be referred while coding Please make a

Deepa Pandey 13 Sep 21, 2022
Creating DartPad Snippets Made Easy

Dartpad Generator Built with ❤️ at DotSlash Hackathon Creating Dartpad Snippets Made Easy ?? Team Teen Tigada Kaam Bigada Theme Developer Tool Problem

Tirth 60 Nov 15, 2021
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Piyush Nagpal 2 Mar 24, 2022
Flutter The lightest, easiest and most convenient route management!

Language: English | 中文简体 nav_router nav_router is the simplest / lightweight / convenient routing management solution for flutter. It supports various

FlutterCandies 104 Jan 3, 2023
EasiestSqlFlutter - The Easiest and the Laziest approach to Flutter SQL Database.

The Easiest and the Laziest approach to Flutter SQL Database for Flutter. • How to use • Contribution • License • Support • Share Sharing with your fr

Fayaz Bin Salam 15 Jul 27, 2022
This library provides the easiest and powerful Dart/Flutter library for Mastodon API 🎯

The Easiest and Powerful Dart/Flutter Library for Mastodon API ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2.2. Im

Mastodon.dart 55 Jul 27, 2023
Custom style-dictionary transforms and formats to generate Flutter resources from a Figma Design Token plugin export..

style-dictionary-figma-flutter An extension to style-dictionary to support more custom types with Flutter as target platform. It supports the custom t

Aloïs Deniel 24 Dec 30, 2022
Create bulk instagram quotes posts with custom background, style, font, size. built using flutter

Mini Canva minicanva.com Bulk Image Generator from given list of quotes, lines ?? Purpose Etsy is an E-commerce platform where we can sell digital goo

Ashish Pipaliya 7 Oct 29, 2022