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

パッケージ詳細v0.1.0

span_builder

プレーンテキストからスパンを作成するのを容易にし、GestureRecognizersの自動破棄を提供します

30日間ダウンロード
11
いいね数
18
Pub ポイント
40

パッケージをインストール

flutter pub add span_builder

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

SpanBuilder は、プレーンテキストからリッチテキストスパンを作成することを簡素化するための Flutter/Dart パッケージです。スタイル付きテキスト、リンク、インタラクティブな要素の統合が容易になります。GestureRecognizers の破棄を自動で管理し、メモリリークを防ぎ、パフォーマンスを向上させます。クリック可能なハッシュタグやメンションなど、埋め込みインタラクションを持つ動的なテキストレンダリングに最適です。複雑なテキストレイアウトを手動でのライフサイクル管理なしに、クリーンで宣言的な構文で構築できます。

用途

  • クリック可能な要素を使用してインタラクティブなリッチテキストを構築する
  • 混合スタイルでフォーマットされたテキストをレンダリングする
  • メンションまたはハッシュタグパーサーの作成
  • ジェスチャー認識のクリーンアップを自動化する
  • 埋め込みアクション付きの動的コンテンツの表示

主な機能

  • GestureRecognizer の自動破棄
  • プレーンテキストからのシンプルなスパン作成
  • リッチテキストのスタイルをサポート
  • ボイラープレートコードを削減する
  • メモリリークを防ぎます

適している対象

  • チャットインターフェースを構築している開発者
  • 動的なテキストコンテンツを持つアプリ
  • インタラクティブなテキスト要素を必要とするプロジェクト
  • 綺麗なコードと保守性を重視するチーム

注意事項

  • テキストベースのUIコンポーネントに限定
  • 複雑なレイアウトに対する組み込みサポートなし
  • TextSpan 構造の理解が必要です
  • テキスト以外のレンダリング要件には適していません
  • Flutter の Text ウィジェットエコシステムに依存しています

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

span_builder

Facilitates creation of spans from plain text and provides an automated disposal of GestureRecognizers.

Description

Given some plain text, e.g.: "The quick brown fox" allows you to apply multiple spans at multiple positions. Positions can be specified by a matching word (whereText), e.g. "brown" and/or range from=10, to=15. Spans are subclasses of InlineSpan. If the span you are trying to apply is TextSpan you don't need to pass whereText as it will be inferred from text within the provided span.

Once you are done using SpanBuilder, use build() to return calculated list of spans. Spans can't overlap.

Usage:
final spans = SpanBuilder("The quick brown fox")
  .apply(TextSpan(text: "brown", style: TextStyle(fontWeight: FontWeight.bold)))
  .apply(TextSpan(text: "🦊"), whereText: "fox")
  .build()

From there you can use these spans in your RichText, e.g.:

RichText(
  text: TextSpan(children: spans)
)

If you plan to make your text "tappable" read on.

Handling GestrueRecognizer (text taps)

If you try passing GestrueRecognizer as a field in TextSpan it will get stripped away - HERE IS WHY.

TL;DR: We don't want to leak GestureRecognizer but TextSpan has no idea about the lifecycle of Widget so you need a stateful widget to keep a reference to the recognizer untill you're done with it. Sounds like a mess, right?

The workaround is to provide a builder for the recognizer like this:

apply(TextSpan(text: "jumps"),
  recognizerBuilder: () => TapGestureRecognizer()..onTap = () {
    // your code here
  })

Then you can use this SpanBuilder together with SpanBuilderWidget which will manage creating and disposing of TapGestrueRecognizer at the right time:

SpanBuilderWidget(
  text: SpanBuilder("fox jumps")
    ..apply(TextSpan(text: "jumps"),
      recognizerBuilder: () => TapGestureRecognizer()..onTap = () {
        // your code here
      })
)

If you care only about onTap interaction you can use this API shortcut:

apply(TextSpan(text: "jumps"),
  onTap: () {
    // your code here
  }
)
Testing:

There are little resources on how to test RichText in general. For this reason there is helper testing library span_builder_test that can help you verify state of your spans in your UI tests.

void main() {
  testWidgets('MyApp test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    final spanFinder = find.byKey(span_key);

    expect(spanFinder, findsOneWidget);
    final allSpans = tester.findSpans(spanFinder).length;
    expect(allSpans, 8);

    final foxSpans = tester.findSpans(spanFinder, predicate: (span) {
      return span is TextSpan && span.text == "🦊"; 
    });
    expect(foxSpans.length, 1);
  });
}

span_builder_test

WidgetTest helpers and extensions for testing span_builder

Getting Started

This is a companion library to the span_builder library intended to help you write test wherever that library is used.

Usage
Related Content

カテゴリー

ソースリポジトリ

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

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