GestureDetector on text span without line break

Question

I'm trying to put GestureDetectors on single phrases in a text block. While it does work, I don't want the GestureDetector to create a new line. What I want is more like a text-link in html. Somehing like the following code gives me 3 seperate lines, how do I get a single line?

    Text(
        'This ',
      ),
      GestureDetector(
        onTap: () {
          doSomething();
        },
        child: Text(
          'text ',
        ),
      ),
      Text(
        "should be in one line.",
      ),

EDIT:

Row(
        children: <Widget>[
          Expanded(
            child: Column(
              children: <Widget>[
                Text("Short text"),
                GestureDetector(
                  child: Text(
                      "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. "),
                ),
                Text("Short text"),
                Text(
                    "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
              ],
            ),
          ),
        ],
      ),

While the solution suggested in the comments yields something like this:

That's what I'm looking for:

Please let me know if you still have issues with the solution provided below. Thank you :) — CopsOnRoad, Apr 08 '19 at 11:13
Thanks, but for longer texts I get something like the last screenshot above. — dan, Apr 09 '19 at 05:26
Can you share the screenshot of how you want it to look like (final screen)? — CopsOnRoad, Apr 09 '19 at 07:41
First you can't do it using `Row` or `Column` you need to use `RichText`. — CopsOnRoad, Apr 10 '19 at 07:03
thanks for pointing me in the right direction, will look into that — dan, Apr 10 '19 at 07:21

CopsOnRoad · Accepted Answer · 2019-04-10T07:19:32.520

2

var underlineStyle = TextStyle(decoration: TextDecoration.underline, color: Colors.black);

// ...

RichText(
  text: TextSpan(
    text: 'Basically what I want is a block of text with certain ',
    style: underlineStyle.copyWith(decoration: TextDecoration.none),
    children: <TextSpan>[
      TextSpan(text: 'elements ', style: underlineStyle),
      TextSpan(text: 'allowing for '),
      TextSpan(text: 'clicks ', style: underlineStyle),
      TextSpan(text: 'or '),
      TextSpan(text: 'drag gestures', style: underlineStyle ),
    ],
  ),
),

edited Apr 10 '19 at 07:19

answered Apr 08 '19 at 07:47

CopsOnRoad

237,138
77
654
440

That's it. Combined with TapGestureRecognizer() [link](https://stackoverflow.com/questions/48914775/gesture-detection-in-flutter-textspan) I can build what I want – dan Apr 10 '19 at 07:33
Ye, there is `recognizer` property in `TextSpan` and it is what you need. – CopsOnRoad Apr 10 '19 at 07:36

diegoveloper · Answer 2 · 2019-04-08T08:48:23.473

0

If you use Row instead Column as a parent, it should work.

  Row(
            children: [
              Text(
                'This ',
              ),
              GestureDetector(
                onTap: () {
                  doSomething();
                },
                child: Text(
                  'text ',
                ),
              ),
     Expanded( child: 
              Text(
                "should be in one line.",
                 ),),
            ],
          ),

edited Apr 08 '19 at 08:48

answered Apr 08 '19 at 05:35

diegoveloper

93,875
20
236
194

Thanks, this does provide me with one line but it overflows to the right if it's too long. I'm looking for a solution that is constrained to the view size/width, just not wrap at each GestureDetector. – dan Apr 08 '19 at 06:00
Just wrap the last child using Expanded – diegoveloper Apr 08 '19 at 08:48
it's still overflowing, only the yellow/black overflow thingy is getting taller (is lineheight without the Expanded and gets taller with the Expanded) – dan Apr 08 '19 at 11:18
Could you add a screenshot? – diegoveloper Apr 08 '19 at 13:12
So after cleaning up my code the overflow disappeared (not sure what it was), but anyway, I couldn't solve my initial problem. Will add a screenshot to my post. – dan Apr 09 '19 at 05:16

score 0 · Answer 3 · answered Apr 08 '19 at 07:13

0

I think you want to have clickable text in some portion of your paragraph.

I hope this helps.

answered Apr 08 '19 at 07:13

Kalpesh Kundanani

5,413
4
22
32

Thanks but I need GestureDetector for gestures other than clicks too. – dan Apr 09 '19 at 05:12

GestureDetector on text span without line break

3 Answers3