Flutter unselect text on click

Question

I am using SelectableText widget in my website. When I select a text with my mouse, the only way to unselect it is to click on the SelectableText.

How can I unselect text when I click anywhere on the screen ? Which is a classic behavior for a website.

class MainPageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SelectableText("This is a selectable text"),
    );
  }
}

But if I remove the Scaffold to keep the SelectableText only, it works. But then the text is displayed in a weird way if there is no Scaffold.

I am using Google Chrome on Ubuntu 20.04.

Landonlandor

I'm not facing such any issue, it is working perfectly fine. Can you include the code-snippet to reproduce the same issue? – Passementerie

I have edited my question to add a very simple example @YeasinSheikh – Landonlandor

I've tested on win10 chrome, and it is working fine with scaffold and using nested widget. You can try testing on different device to check if it is a device specific issue. – Passementerie

anyone facing this? – Confucianism

I am facing this problem. – Soot

@JamesLloyd Yeah me too. My answer was working when I posted it but it is no longer the case. I think it is not something we can solve. We have to wait for Flutter maintainers to fix it – Landonlandor

@Landonlandor if we look at the function called within SelectableText when it is tapped there is a way that could be called when a tap is registered anywhere on the screen using the GestureDetector widget (wrapped around the Scaffold)? – Soot

facing the same issue on Flutter: 2.10 – Telamon

Answer 1

The solution came with Flutter 3.3 and SelectionArea widget. There is no longer need for SelectableText. Just wrap your Scaffold with a SelectableArea and use Text instead of SelectableText.

See https://api.flutter.dev/flutter/material/SelectionArea-class.html for more details.

Landonlandor

Answer 2

Fixed by changing my flutter channel to go to stable release:

flutter channel stable
flutter upgrade

Edit: this answer was working when I posted it, but it is no longer the case. I guess the problem comes from something internal to flutter.

Landonlandor