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

패키지 상세v2.3.0

marquee

무한히 텍스트를 스크롤하는 Flutter 위젯입니다. 사용자 지정 스크롤 방향, 지속 시간, 곡선 및 각 라운드 후 일시 정지와 같은 다양한 맞춤 설정을 제공합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
10.3만
좋아요
1.1천
Pub 점수
150

패키지 설치

flutter pub add marquee

패키지 개요

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

marquee 패키지는 광범위한 사용자 정의 옵션을 제공하는 무한 스크롤 텍스트를 가능하게 하는 Flutter 위젯을 제공합니다. 다양한 스크롤 방향, 조절 가능한 지속 시간, 애니메이션 곡선 및 각 사이클 후 구성 가능한 일시 중단을 지원합니다. 제한된 공간에 긴 텍스트를 표시할 때 이상적입니다. 예를 들어 제목이나 알림과 같은 경우, 모든 주요 플랫폼에서 부드럽고 지속적인 애니메이션을 통해 사용자 경험을 향상시킵니다. 이 위젯은 가볍고 통합이 쉬워 단순한 사례부터 복잡한 사례까지 동적 텍스트 표시가 필요한 모든 상황에 적합합니다.

사용 사례

  • 제한된 공간에 긴 제목 표시
  • 애니메이션 알림 만들기
  • 티커 스타일 뉴스 피드 표시
  • 동적 텍스트 효과를 통한 UI 개선
  • 스크롤 배너 구현

주요 기능

  • 무한 텍스트 스크롤
  • 사용자 정의 가능한 스크롤 방향
  • 조정 가능한 애니메이션 지속 시간 및 곡선
  • 각 스크롤 주기 후 일시 정지
  • 다중 플랫폼 지원
  • 기존 위젯과의 간편한 통합

적합한 대상

  • 애니메이션 텍스트 표시가 필요한 개발자
  • 매력적인 UI 요소를 만드는 디자이너
  • 실시간 데이터 피드를 갖춘 앱
  • 인터랙티브 키오스크 또는 대시보드
  • 반응형 텍스트 애니메이션을 필요로 하는 프로젝트

고려 사항

  • 매우 긴 텍스트를 처리할 경우 성능에 영향을 미칠 수 있습니다
  • 스크롤 속도와 일시 정지 시간을 신중하게 조정해야 합니다
  • 정적 콘텐츠에 적합하지 않음
  • 스크린 리더를 위한 접근성 고려 사항
  • 개별 문자 이동에 대한 제어가 제한됨

원본 README

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

⏩ A Flutter widget that scrolls text infinitely. Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.

Appreciate the widget? Show some ❤️ and star the repo to support the project.

Usage

This is a minimalistic example:

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

And here's a piece of code that makes full use of the marquee's customizability:

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

For more information about the properties, have a look at the API reference.

카테고리

의존성

의존성 목록 1 개

소스 저장소

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