搜索插件、代码仓与 APP 分类

animated_read_more_text 封面
插件详情v0.0.6

animated_read_more_text

用于“展开/收起”功能的动画 Flutter 包,增强文本处理和用户交互。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
667
喜欢数
69
Pub 分数
155

安装插件

flutter pub add animated_read_more_text

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,为文本提供流畅、动画化的“展开/收起”功能。它通过优雅的动画动态扩展和折叠文本,提升用户体验。非常适合以简洁、互动的方式展示长篇内容。该包支持多个平台,并可无缝集成到现有 UI 中。它能妥善处理文本溢出,并允许自定义动画持续时间、颜色和标签。

适合场景

  • 显示长文章摘要
  • 提升博客的用户参与度
  • 改进应用描述的可读性
  • 管理有限的屏幕空间
  • 创建交互式内容卡片
  • 简化移动和网页上的内容扩展

主要特点

  • 平滑的展开/折叠动画
  • 可自定义的“展开/收起”标签
  • 支持多行文本
  • 可配置的动画持续时间
  • 跨平台兼容性
  • 与 Text 小部件的轻松集成

适合对象

  • 内容密集型应用
  • 博客和新闻阅读器
  • 电子商务产品描述
  • 用户资料部分
  • 交互式 UI 组件

使用建议

  • 处理非常长的文本时可能影响性能
  • 需要仔细的样式设置以匹配设计
  • 动画行为在不同平台之间可能存在细微差异
  • 仅限纯文本内容
  • 不适合高度动态或频繁更新的内容
  • 依赖于正确的文本换行和布局约束

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。