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

rich_readmore 표지
패키지 상세v1.1.1

rich_readmore

제공된 설정에 따라 더 보기 또는 덜 보기 옵션을 제공하는 텍스트를 표시하는 위젯입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
1.1천
좋아요
45
Pub 점수
160

패키지 설치

flutter pub add rich_readmore

패키지 개요

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

RichReadMore는 스마트한 '더 보기' 또는 '덜 보기' 전환 기능을 갖춘 Flutter 위젯입니다. 풍부한 텍스트 형식을 지원하며 콘텐츠 길이와 사용자 선호도에 따라 동적으로 조정됩니다. 깔끔하고 상호작용 가능한 방식으로 긴 텍스트 조각을 표시하는 데 이상적입니다. UI를 과도하게 부담시키지 않으면서 가독성을 향상시킵니다. 사용자 정의가 가능하며 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼에서 작동합니다.

사용 사례

  • 앱에서 긴 형식의 콘텐츠 표시
  • 접을 수 있는 텍스트로 사용자 경험 개선
  • 확장 가능한 세부 정보를 포함한 설명 표시
  • 인터랙티브 컨트롤과 풍부한 텍스트 통합
  • 목록 항목에서 화면 혼잡도 줄이기

주요 기능

  • 풍부한 텍스트 형식을 지원합니다
  • 동적 표시 더보기/접기 전환
  • 사용자 정의 가능한 생략 기호 및 버튼 레이블
  • 크로스 플랫폼 호환성
  • pub를 통한 간편한 통합
  • 사용자 정의 줄 수 제한

적합한 대상

  • 콘텐츠 중심 애플리케이션
  • 변동하는 텍스트 길이를 가진 사용자 인터페이스
  • 반응형 텍스트 표시가 필요한 앱
  • 경량 텍스트 확장을 원하는 개발자
  • 다양한 플랫폼 간에 일관된 UX가 필요한 프로젝트

고려 사항

  • 복잡한 레이아웃을 위해 신중한 스타일링이 필요할 수 있습니다
  • 매우 큰 텍스트와 함께하는 성능 영향
  • 텍스트만 포함된 콘텐츠(이미지 없음)로 제한
  • 부모 위젯의 제약 조건에 따라 다릅니다
  • 비텍스트 콘텐츠에 적합하지 않습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

rich_readmore workflow codecov MIT License

rich_readmore

A widget that displays text with an option to show more or show less based on the provided settings.
The RichReadMoreText widget allows you to trim text either based on the character length or the number of lines.
When the text is longer than the specified trim length or exceeds the maximum number of lines, it provides a toggle option to show more or show less of the text.
It has two options for settings, the LineModeSettings or LengthModeSettings for trimming using the behavior that you want.
If you want to pass a string directly instead of a TextSpan, you can just be using the the RichReadMoreText.fromString(...). There are some examples for that below.

Demonstration

How to use

import:

import 'package:rich_readmore/rich_readmore.dart';

For TextSpan data:

 RichReadMoreText(
   textSpan,
   settings: LineModeSettings(
     trimLines: 3,
     trimCollapsedText: 'Expand',
     trimExpandedText: ' Collapse ',
     onPressReadMore: () {
       /// specific method to be called on press to show more
     },
     onPressReadLess: () {
       /// specific method to be called on press to show less
     },
   ),
 ),

Or for String data:

 RichReadMoreText.fromString(
   text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
   textStyle: TextStyle(color: Colors.purpleAccent),
   settings: LengthModeSettings(
     trimLength: 20,
     trimCollapsedText: 'Expand',
     trimExpandedText: ' Collapse ',
     onPressReadMore: () {
       /// specific method to be called on press to show more
     },
     onPressReadLess: () {
       /// specific method to be called on press to show less
     },
     lessStyle: TextStyle(color: Colors.blue),
     moreStyle: TextStyle(color: Colors.blue),
   ),
 ),

카테고리

소스 저장소

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

아직 데이터가 없습니다.