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.

user_11244991 · Answer

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.

user_11244991 · Answer

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.

Flutter unselect text on click

2 Answers