span_builder 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 64


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")

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

  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:

  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);

[0.0.1] - 22/02/2020 #

  • Initial release


import 'package:flutter/material.dart';
import 'package:span_builder/span_builder.dart';

void main() => runApp(MyApp());

// non breaking space
const nbsp = '\u00A0';
const span_key = ValueKey("span_key");

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
        home: Scaffold(
            appBar: AppBar(title: const Text("span_builder")),
            body: Builder(
                builder: (context) => Center(
                    child: SpanBuilderWidget(
                        key: span_key,
                        text: SpanBuilder(
                            "The quick brown fox jumps${nbsp}over the lazy dog")
                          ..apply(const TextSpan(
                              text: "brown",
                              style: TextStyle(fontWeight: FontWeight.bold)))
                          ..apply(const TextSpan(text: "🦊"), whereText: "fox")
                              const TextSpan(
                                  text: "jumps",
                                  style: TextStyle(
                                      decoration: TextDecoration.underline)),
                              onTap: () {
                                const SnackBar(content: Text("weeeee")));
                          ..apply(const TextSpan(text: "🐶"), whereText: "dog"),
                            TextStyle(color:, fontSize: 32.0),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  span_builder: ^0.0.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:span_builder/span_builder.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies