expandable_text_x #

This Flutter package includes the widget ExpandableText which you can use to initially only show a defined number of lines of a probably long text. The widget appends a configurable text link which lets the user expand the full text, or collapse it again.

Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
    expandable_text_x: ^1.1.0

Next, import the package into your dart code:

import 'package:expandable_text_x/expandable_text_x.dart';

Usage #

Show an expandable text if longText exceeds one line:

Widget build(BuildContext context) {
    return ExpandableText(
        longText,
        expandText: 'show more',
        collapseText: 'show less',
        maxLines: 1,
        linkColor: Colors.blue,
    );
}

Control expansion from outside the widget with ExpandableTextController:

final controller = ExpandableTextController();

Widget build(BuildContext context) {
    return Column(
        children: [
            ExpandableText(
                longText,
                controller: controller,
                expandText: 'show more',
                collapseText: 'show less',
            ),
            TextButton(
                onPressed: controller.collapse,
                child: const Text('collapse'),
            ),
        ],
    );
}

When a controller is provided it owns the expanded state. Without a controller, expanded remains the initial/uncontrolled state.

Advanced example

This example shows a message that was posted by a user. The username is always visible right before the text and tapping on it opens the user profile. The text is truncated after two lines and can be expanded by tapping on the link show more at the end or the text itself. After the text was expanded it cannot be collapsed again as no collapseText was provided. URLs, @mentions and #hashtags in the text are styled differently and can be tapped to open the browser or the user profile.

Widget build(BuildContext context) {
    return ExpandableText(
        message,
        expandText: 'show more',
        maxLines: 2,
        linkColor: Colors.blue,
        animation: true,
        collapseOnTextTap: true,
        prefixText: username,
        onPrefixTap: () => showProfile(username),
        prefixStyle: TextStyle(fontWeight: FontWeight.bold),
        onHashtagTap: (name) => showHashtag(name),
        hashtagStyle: TextStyle(
            color: Color(0xFF30B6F9),
        ),
        onMentionTap: (username) => showProfile(username),
        mentionStyle: TextStyle(
            fontWeight: FontWeight.w600,
        ),
        onUrlTap: (url) => launchUrl(url),
        urlStyle: TextStyle(
            decoration: TextDecoration.underline,
        ),
    );
}

Features #

• Link to expand the collapsed text (expandText)
• Expand and collapse animation (animation, animationDuration, animationCurve)
• Optional link to collapse the expanded text (collapseText)
• Configure the style of the link (linkStyle / linkColor)
• Control whether the ellipsis is part of the link (linkEllipsis)
• Optional prefix text with style and tap callback (prefixText, prefixStyle, onPrefixTap)
• Text with tappable and styled links (onUrlTap, urlStyle)
• Text with tappable and styled @mentions (onMentionTap, mentionStyle)
• Text with tappable and styled #hashtags (onHashtagTap, hashtagStyle)
• Configure the number of visible lines of the collapsed text (maxLines)
• Control the default expanded state (expanded, onLinkTap)
• Callback for expanded changed event (onExpandedChanged)
• Programmatic expand/collapse/toggle (ExpandableTextController)
• Tap anywhere in the text bounds to expand or collapse the text (expandOnTextTap, collapseOnTextTap)
• Style the main text (style), with URL, mention and hashtag styles merged on top

Bugs and feature requests #

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Copyright & License #

Code copyright 2020–2022 Florian Weinaug. Code released under the MIT license.