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.

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.