Recognizer issue in multi-line TextSpan

Question

As you can see, A yellow container with a red Text and a green Text.

Here is my code:

class DraftPage extends StatelessWidget {
  DraftPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Container(
        color: Colors.yellow,
        child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AAAAAAAAAAAAAA',
                style: TextStyle(fontSize: 20, color: Colors.red),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print('A');
                  },
              ),
              TextSpan(
                text: 'BBBBBBBBBBBBBBBBBBB',
                style: TextStyle(fontSize: 20, color: Colors.blue),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print('B');
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When I tap red Text console print 'A' and print 'B' when tap green Text.

What's more, when I tap the second line out of the green Text, console print 'B', too.

Obviously it's a bug. So how can I solve it?

You can test with my code above.

Answer 1

Appending a spacing TextSpan can fix this issue:

TextSpan(
    text: 'your text',
),
TextSpan(
    // just append an spacing text
    text: ' ',
),