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.

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),
)