Search code examples
flutterflutter-web

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!


Solution

  • 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'),
              ),
            ],
          ),
        )