パッケージ、リポジトリ、アプリカテゴリを検索

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 ウィジェットとの簡単な統合

適している対象

  • コンテンツが豊富なアプリ
  • ブログとニュースリーダー
  • EC商品の説明
  • ユーザープロフィールセクション
  • インタラクティブ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.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。