Selectable text Flutter : Firebase, Provider Web App

In flutter text widget always plays an important role. For example, we can use different types of text widgets to get diverse results. Selectable Text is another text widget that allows us to style text. In addition, we can allow the users to select a portion of text.

With a normal text widget we cannot accomplish that task.

We have been building a flutter web app with Firebase login, Firestore database and Provider package. 

However, in this section we will concentrate on the selectable text in flutter.

We’ll learn how to use this special text widget which displays a string of text.

Firstly, let us see the image.

Because an image speaks a thousand words, it will give us an idea.

As a result the image will show how we’ve selected a portion of text. For instance without a selectable text widget we couldn’t have done that.

As we see the selectable text in flutter not only gives us an option to select the text. But also it allows us to add color, styling inside the text.

For example in normal Text widget we cannot do such things.

Therefore, besides selection, decoration also plays an important role. 

Certainly that is an added advantage we get when we use a selectable text widget in flutter.

Selectable text in flutter, how it works

In our code, we have used the SelectableText.rich constructor.

Certainly it gives us more options to add color and styling. 

Let’s see the code. It will explain further.

const SelectableText.rich(
          TextSpan(
            text: 'Hello', // default text style
            children: <TextSpan>[
              TextSpan(
                text: ' beautiful ',
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                  color: Colors.red,
                ),
              ),
              TextSpan(
                text: 'world. ',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              TextSpan(
                text: 'My name is Angel. I love peace. What about you?',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.black38,
                ),
              ),
            ],
          ),
        ),

As we see, the selectable text allows us to display paragraphs. 

For that it uses the TextSpan class.

In the next section we’ll discuss the TextSpan class.

Before that, we see the result.

If you want to clone this branch of GitHub repository, please clone and test in your machine.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter