How to add `overflow` to SelectableText in Flutter?

Question

There is SelectableText widget that allows you to make text selectable. But it misses the overflow parameter, which is required...

Is there any workaround, which can make it work? Or a similar solution? Thanks!

Corrigible

I think that all text should be shown to select text. – Radley

If you use 'maxLines' parameter, you can limit vertical spread. – Radley

@kuku not exactly. it will limit the number of lines, but they will become scrollable, which is terrible... – Corrigible

Answer 1

Just experienced this. The problem is overflow hasn't been made the top level parameter in case of SelectableText as with Text in Flutter which suggests that it must be there, just not as the top level parameter which is true as it is in TextStyle.

Hence, to use overflow in SelectableText, change

SelectableText(
  text,
  overflow: TextOverflow.ellipsis
)

to

SelectableText(
  text,
  style: TextStyle(
    overflow: TextOverflow.ellipsis,
  ),
)

Shakiashaking

Answer 2

Also, remember that when you want the space to expand, you can also use Expanded or Flexible. Hope it helps.

Row(children: [
                  Text('Código de inscrição: '),
                  Expanded(
                    child: SelectableText(club.SignUpCode),
                  )
                ]),

Hawaiian

Answer 3

In my case above solutions didn't work. I found another solution using ListTile:

ListTile(
    title: SelectableText(
           text,
           toolbarOptions: const ToolbarOptions(
                  copy: true,
                  selectAll: true,
                  cut: true,
           ),
    ),
)

and it worked as overflow: TextOverflow.ellipsis for me

Admix

Answer 4

If the TextOverflow.clip effect is enough for you this did the trick for me:

SelectableText("My text"
              maxLines: 1,
              scrollPhysics: NeverScrollableScrollPhysics())
            

Miramontes