readmore 3.0.0

A Flutter package that allows for dynamic expansion and collapse of text, as well as interactions with text patterns such as hashtags, URLs, and mentions.

readmore

A Flutter plugin that allows for expanding and collapsing text with the added capability to style and interact with specific patterns in the text like hashtags, URLs, and mentions using the new Annotation feature.

Usage:

Add the package to your pubspec.yaml:

readmore: ^3.0.0

copied to clipboard

Then, import it in your Dart code:

import 'package:readmore/readmore.dart';

copied to clipboard

Basic Example

ReadMoreText(
  'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
  trimMode: TrimMode.Line,
  trimLines: 2,
  colorClickableText: Colors.pink,
  trimCollapsedText: 'Show more',
  trimExpandedText: 'Show less',
  moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
);

copied to clipboard

Using Annotations

The Annotation feature enhances the interactivity and functionality of the text content. You can define custom styles and interactions for patterns like hashtags, URLs, and mentions.

ReadMoreText(
  'This is a sample text with a #hashtag, a mention <@123>, and a URL: https://example.com.',
  trimMode: TrimMode.Line,
  trimLines: 2,
  colorClickableText: Colors.pink,
  annotations: [
    Annotation(
      regExp: RegExp(r'#([a-zA-Z0-9_]+)'),
      spanBuilder: ({required String text, TextStyle? textStyle}) => TextSpan(
        text: text,
        style: textStyle?.copyWith(color: Colors.blue),
      ),
    ),
    Annotation(
      regExp: RegExp(r'<@(\d+)>'),
      spanBuilder: ({required String text, TextStyle? textStyle}) => TextSpan(
        text: 'User123',
        style: textStyle?.copyWith(color: Colors.green),
        recognizer: TapGestureRecognizer()..onTap = () {
          // Handle tap, e.g., navigate to a user profile
        },
      ),
    ),
    // Additional annotations for URLs...
  ],
  moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
);

copied to clipboard