Flutter Span Text, how it works in web app

Firstly, a span of text in flutter is immutable. What does that mean? We can use them as a constant property.

Secondly, the span of text represents a TextSpan object which we can style with the help of a TextStyle widget.

Basically the TextSpan widget has the style property that expects the TextStyle widget.This style applies not only to the text that we pass, but also to the children where we can use more TextSpan objects.

As a result, when we use the TextSpan object, it can have a plain text. Or we can add some styling to it.

In addition, we can also add the children TextSpan objects where we can again add some more styling separately.

In that case, the initial style is effective for only the first text property that we have passed.

Although we should remember one key fact about the nature of children widgets. The type of the children widgets should be InlineSpan. As an outcome, it will be an InlineSpan tree with a list of children widgets that belong to that type.

We have discussed what “Type” means in Flutter and Dart. If you’re an absolute beginner, please have a look at that discussion.

Flutter span text and InlineSpan class

Certainly the InlineSpan class represents a certain type.

Let us see how it works. 

First of all the subclass span of text or TextSpan specifies text and style. We have just discussed it above.

However, the real question is different. Can we use any widgets other than text?

Yes, indeed we can.

We can use the PlaceholderSpan which represents a placeholder that we can fill with non-text content.

For example, we can use the WidgetSpan class. 

Let’s see the code and the output screenshot which will explain it further.

import 'package:flutter/material.dart';

class SecondApp extends StatelessWidget {
  const SecondApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Text.rich(
              TextSpan(
                text: 'Your name is ',
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                ),
                children: <InlineSpan>[
                  WidgetSpan(
                    alignment: PlaceholderAlignment.baseline,
                    baseline: TextBaseline.alphabetic,
                    child: ConstrainedBox(
                      constraints: const BoxConstraints(maxWidth: 100),
                      child: const TextField(),
                    ),
                  ),
                  const TextSpan(
                    text: '.',
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 30.0,
            ),
            TextButton(
              onPressed: () {},
              child: const Text(
                'Submit',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                  backgroundColor: Colors.yellow,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Let’s run the code and see the output first.

Then we will discuss how the code works.

The WidgetSpan class has many properties like alignment, baseline and child which expect other widgets like Text and RichText widgets.

It depends on us. As in the above code, we have used a TextField widget.

You could have used something else.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter