Skip to main content

Flutter Create Select and Copy Text - SelectableText

By default in flutter the Text widget does not support long press and select and copy text functionality. If we want to make text selectable then we have to use SelectableText widget at the place of normal text widget. SelectableText widget supports select and copy text functionality in flutter. All the text pass in this widget can be selectable and copy into clipboard.

Flutter Create Select and Copy Text - SelectableText:

1. Open your flutter project's main.dart file and import material.dart package.
`import 'package:flutter/material.dart';
2. Defining our main function and calling our main App class.
void main() => runApp(const App());
3. Creating App class.
class App extends StatelessWidget {   


}
4. Creating MaterialApp widget and define ThemeData inside it. Here we are defining three properties which is applicable on SelectableText widget to control various functionality.
  • cursorColor : Blinking cursor color after selecting text.
  • selectionColor : Selected text background color.
  • selectionHandleColor : When text is selected on the text left and right side shows text selecting hands.
MaterialApp(
      theme: ThemeData(
          textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.blue,
        selectionColor: Colors.yellow,
        selectionHandleColor: Colors.brown,
      )),
      home: const Scaffold(
          body: Center(
              child: SelectableText(
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        style: TextStyle(fontSize: 28),
      ))),
    );
5. Complete source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.blue,
        selectionColor: Colors.yellow,
        selectionHandleColor: Colors.brown,
      )),
      home: const Scaffold(
          body: Center(
              child: SelectableText(
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        style: TextStyle(fontSize: 28),
      ))),
    );
  }
}
Screenshot:
Flutter Create Select and Copy Text

Comments