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

パッケージ詳細v2.3.0

marquee

テキストを無限にスクロールするFlutterウィジェット。カスタムスクロール方向、期間、カーブ、および各ラウンド後の一時停止など、多数のカスタマイズが可能です。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
10.3万
いいね数
1070
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 件

ソースリポジトリ

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