CODEWITHSUNDEEP
flutterflutter-web
Jesswin
Jesswin

Reputation: 281

Text not Selectable on Flutter Web [Stable]

After the Flutter Web was Stable, i tried to convert my Flutter Mobile application to Flutter Web by following the instructions given in Docs. Everything is good, but the problem here is the Text on the Web is not Selectable! i have just converted a Flutter Mobile App to web by executing a couple of commands and don't have any idea about Flutter Web or how it's Working Behind the Scenes!

Upvotes: 4

Views: 5764

Answers (2)

Tayo.dev
Tayo.dev

Reputation: 1656

The web works with the same behaviour as your app, to make texts selectable, you wrap it in SelectableText widget.

For example:

SelectableText("Lorem ipsum...")

Update for Flutter version >= 3.3

A new widget SelectionArea has been introduced. The widget automatically makes its descendant Text widgets to be selectable.

For example:

SelectionArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            'Flutter',
            style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 40),
          const Text(
            'Flutter version >= 3.3 Selectable texts',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),
          const Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Button'),
          ),
        ],
      ),
    )

Upvotes: 20

kashlo
kashlo

Reputation: 2618

There is a new widget SelectionArea in Flutter version 3.3. It allows selection of multiple text widgets inside of it.

https://api.flutter.dev/flutter/material/SelectionArea-class.html

Upvotes: 9

Related Questions