搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。