Text Selection in widget span inside SelectionArea

Help General
,
1

Requirement: Text selection using SelectionArea widget when there are multiple textspans and widgetspans.

I know that text selection works well with textspans. But in my case I have widgetspan along with text spans due to which selection is not working properly.

I have a builder method that returns an InlineSpan so I can only use textspan and widgetspan.

SelectionArea(
child: Text.rich(
TextSpan(
children:[
WidgetSpan(
child: Container(
padding EdgeInsets.all(8.0),
child: SizedBox(),
)),
TextSpan(text: 'Hello world'),
WidgetSpan(
child: Container(
padding EdgeInsets.all(8.0),
child: SizedBox(),
)),
]
)));
2

Show use some code. I have never did this, I need to look at the code and search to be able to advise.

3

@mihalycsaba I have put some sample code.

4

why don’t you put the padding around the textspan and remove the widgetspan?

5

Actually this is just an example, in my case the outer textspan has 3 children, widgetspan, textspan and a widgetspan.
In actual code the widgetspans are used for some box decoration.

6

This somewhat works, mouse selection doesn’t select all if you don’t start above the height of the Card(not sure if this warrants a bug report), but selection with double click and ctrl+a works.

import 'package:flutter/material.dart';

void main() => runApp(const SelectionAreaExampleApp());

class SelectionAreaExampleApp extends StatelessWidget {
  const SelectionAreaExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('SelectionArea Sample')),
        body: SelectionArea(
          child: const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text.rich(
                  TextSpan(
                    children: <InlineSpan>[
                      TextSpan(text: 'Flutter is'),
                      WidgetSpan(
                        child: SizedBox(
                          width: 120,
                          height: 50,
                          child: Card(
                            child: Center(child: Text('Hello World!')),
                          ),
                        ),
                      ),
                      TextSpan(text: 'the best!'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
8

Hi @mihalycsaba, I am trying to achieve this design and all text selectable inside Selectio Area.

1000058064
10000580641920×1171 368 KB

9

https://stackoverflow.com/questions/69307788/set-rounded-color-background-to-text-in-textfield-flutter

There’s answer here, that describes how to paint custom rounded backgrounds. Not sure if the linked package is able to do the shape you want.

1 Like
10

Thanks for your suggestion.
I already checked this post earlier. It is not exactly the design I want.

11

well you have to change the parameters of Paint()