패키지, 저장소 및 앱 카테고리 검색

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

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

텍스트에 부드럽고 애니메이션 효과가 있는 '더 보기/접기' 기능을 제공하는 플러터 패키지입니다. 우아한 애니메이션을 통해 텍스트를 동적으로 확장하고 축소하여 사용자 경험을 향상시킵니다. 긴 내용을 깔끔하고 인터랙티브한 방식으로 표시하기에 적합합니다. 여러 플랫폼을 지원하며 기존 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.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.