Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
animated_read_more_text cover
Package detailsv0.0.6

animated_read_more_text

Animated Flutter package for 'Read more/Read less' functionality, enhancing text handling and user interactions.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
667
Likes
69
Pub points
155

Install package

flutter pub add animated_read_more_text

Package Overview

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

A Flutter package that provides smooth, animated 'Read more/Read less' functionality for text. It enhances user experience by dynamically expanding and collapsing text with elegant animations. Ideal for displaying lengthy content in a clean, interactive way. The package supports multiple platforms and integrates seamlessly into existing UIs. It handles text overflow gracefully and allows customization of animation duration, colors, and labels.

Use cases

  • Displaying long article snippets
  • Enhancing user engagement in blogs
  • Improving readability in app descriptions
  • Managing limited screen space
  • Creating interactive content cards
  • Simplifying content expansion on mobile and web

Key features

  • Smooth expand/collapse animations
  • Customizable read more/less labels
  • Support for multiline text
  • Configurable animation duration
  • Cross-platform compatibility
  • Easy integration with Text widgets

Suitable for

  • Content-heavy apps
  • Blogs and news readers
  • E-commerce product descriptions
  • User profile sections
  • Interactive UI components

Considerations

  • May impact performance with very long texts
  • Requires careful styling to match design
  • Animation behavior may vary slightly across platforms
  • Limited to text-only content
  • Not ideal for highly dynamic or frequently updated content
  • Depends on correct text wrapping and layout constraints

Original README

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

AnimatedReadMoreText

A Flutter package that provides a customizable widget for displaying text with an optional "Read more/Read less" button, enhancing the user experience for text-heavy content.

Overview

The AnimatedReadMoreText widget is a Flutter package that provides a user-friendly and visually appealing way to present lengthy text content. It dynamically adapts text length based on a predefined maximum line count, ensuring optimal readability on various screen sizes. The widget's key feature is its ability to seamlessly expand or collapse text based on user interaction. This functionality enhances readability by allowing users to focus on specific sections of text without being overwhelmed by lengthy passages. Additionally, the widget's subtle yet impactful animations add a touch of elegance to the user interface, further enhancing the overall reading experience.

AnimatedReadMoreText

Features

  • Lightweight and easy to use
  • Displays text with a specified maximum number of lines.
  • Set custom labels for the "Read more" and "Read less" buttons to match your app's branding and enhance the user experience.
  • Customizable appearance and behavior.
  • Supports optional styling for the text and button.
  • Smooth and customizable animations for text expansion and collapse.

Usage

To use this package, include it in your pubspec.yaml file:

dependencies:
  animated_read_more_text: ^0.0.6

Import the package in your Dart file:

import 'package:animated_read_more_text/animated_read_more_text.dart';

Use the AnimatedReadMoreText widget in your Flutter application:

AnimatedReadMoreText(
  yourLongText,
  maxLines: 3,
  // Set a custom text for the expand button. Defaults to Read more
  readMoreText: 'Expand',
  // Set a custom text for the collapse button. Defaults to Read less
  readLessText: 'Collapse',
  // Set a custom text style for the main block of text
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.red,
  ),
  // Set a custom text style for the expand/collapse button
  buttonTextStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
)

Set custom animation curve and duration

AnimatedReadMoreText(
  yourLongText,
  // Set the curve of the animation
  animationCurve: Curves.easeInOut,
  // Set the duration of the animation
  animationDuration: Duration(milliseconds: 500),
)

Contributions

Contributions and bug reports are welcome! Please feel free to create an issue or submit a pull request.

License

This package is licensed under the MIT License - see the LICENSE file for details.

Categories

Text Decoration, Effect & Animation

Source repository

Projects using this package

No data available yet.