Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.3.0

rich_text_view

A simple yet powerful rich text view that supports mention, hashtag, email, url and see more.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
4.4K
Likes
65
Pub points
140

Install package

flutter pub add rich_text_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

rich_text_view is a Flutter package that provides a flexible and intuitive way to display rich text with interactive elements such as mentions, hashtags, emails, URLs, and 'see more' functionality. It enhances text rendering by enabling clickable and stylized components within a single text block. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it ideal for cross-platform applications requiring dynamic text content. With minimal setup via the pub command, developers can easily integrate rich text features into their apps.

Use cases

  • Social media post rendering
  • Chat message display
  • Blog or article preview
  • User-generated content with links
  • Interactive comment sections

Key features

  • Supports mentions and hashtags
  • Handles URLs and emails
  • Includes 'see more' toggle
  • Customizable styling
  • Cross-platform compatibility
  • Easy integration with Flutter

Suitable for

  • Apps with user-generated content
  • Messaging or social networking apps
  • Content-rich UIs
  • Dynamic text displays
  • Developers seeking lightweight rich text solutions

Considerations

  • Limited to predefined link types
  • No built-in image support
  • Requires manual handling of tap events
  • Not suitable for complex rich text editing
  • Performance may vary with very long texts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

rich_text_view

A simple yet powerful rich text view that supports mention, hashtag, email, url and view more.

Example

RichTextView
 RichTextView(
           text:
                      '''Who else thinks it's thinks it's just cool😎 to mention 
                      @jane when #JaneMustLive is trending without even trying 
                      to send a *bold* email to janedoe@gmail.com and verify the
                       facts talkmore of visiting www.janedoe.com''',
                  maxLines: 3,
                  truncate: true,
                  viewLessText: 'less',
                  linkStyle: TextStyle(color: Colors.blue),
                  supportedTypes: [
                    EmailParser(
                        onTap: (email) => print('${email.value} clicked')),
                    PhoneParser(
                        onTap: (phone) => print('click phone ${phone.value}')),
                    MentionParser(
                        onTap: (mention) => print('${mention.value} clicked')),
                    UrlParser(onTap: (url) => print('visting ${url.value}?')),
                    BoldParser(),
                    HashTagParser(
                        onTap: (hashtag) =>
                            print('is ${hashtag.value} trending?'))
                  ]
                )
RichTextEditor

RichTextEditor is an input field that supports suggestions when mentioning or using hashtags


        RichTextEditor(
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(16)),
                      ),
                      suggestionController: SuggestionController(
                      mentionSymbol: '/',
                      position: SuggestionPosition.bottom,
                      mentionSuggestions: [
                        Mention(
                            imageURL: 'imageURL',
                            subtitle: 'nelly',
                            title: 'Nelly Gane'),
                        Mention(
                            imageURL: 'imageURL',
                            subtitle: 'gaus',
                            title: 'Gaus Shell')
                      ],
                      onSearchMention: (term) async {
                        return List.generate(
                            20,
                            (index) => Mention(
                                id: index.toString(),
                                imageURL: 'imageURL',
                                subtitle: term.toLowerCase(),
                                title: '$term $index'));
                      },
                      onMentionSelected: (suggestion) {
                        print(suggestion.id);
                      },
                      onSearchTags: (term) async {
                        return [
                          HashTag(
                              hashtag: '#Dart',
                              subtitle: '30 posts',
                              trending: true),
                          HashTag(
                            hashtag: '#Flutter',
                            subtitle: '56 posts',
                          )
                        ];
                      },
                    ))
Todo
  • Add styles to mentions/hashtags in RichTextEditor

Categories

Emoji & Rich Text

Source repository

Projects using this package

No data available yet.