Flutter – SelectableText Widget

Many times you need to select or copy some text like when you are on a web browser it allows us to select or copy any of the text without any issue but on mobile applications, it is not possible. So at times, you need to manually copy or enter such texts. But in the Flutter, with the help of the SelectableText Widget, you can copy or select the in-app texts by long pressing on it. In Flutter the normal way of displaying the text is by using the Text Widget. But these texts are not selectable. Instead, we can use SelectableText Widget. As the name suggests this Widget provides us with a feature of selecting the text, which can come in handy to show links or other texts which need to be copied.

Constructor

SelectableText(
String data, 
{Key? key, 
FocusNode? focusNode, 
TextStyle? style, 
StrutStyle? strutStyle, 
TextAlign? textAlign, 
TextDirection? textDirection, 
double? textScaleFactor, 
bool showCursor = false, 
bool autofocus = false, 
ToolbarOptions? toolbarOptions, 
int? minLines, 
int? maxLines,
DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
bool enableInteractiveSelection = true, 
TextSelectionControls? selectionControls, 
GestureTapCallback? onTap, ScrollPhysics? scrollPhysics, 
String? semanticsLabel, 
TextHeightBehavior? textHeightBehavior, 
TextWidthBasis? textWidthBasis, 
SelectionChangedCallback? onSelectionChanged})

Properties

• autofocus: Whether this text field should focus itself if nothing else is already focused.
• data: The text to display.
• key: Controls how one widget replaces another widget in the tree.
• onSelectionChanged: Called when the user changes the selection of text (including the cursor location.
• enableInteractiveSelection: Whether to enable user interface affordances for changing the text selection.
• maxLines: The maximum number of lines to show at one time, wrapping if necessary. If this is 1 (the default), the text will not wrap, but will scroll horizontally instead.
• minLines: The minimum number of lines to occupy when the content spans fewer lines. This can be used in combination with maxLines for a varying set of behaviors.
• onTap: Called when the user taps on this selectable text. The selectable text builds a GestureDetector to handle input events like a tap.
• selectionControls: Optional delegate for building the text selection handles and toolbar.
• style: The style to use for the text. If null, defaults DefaultTextStyle of context.
• dragStartBehavior: Determines the way that drag start behavior is handled. Setting this to DragStartBehavior.start will make drag animation smoother and setting it to DragStartBehavior.down will make drag behavior feel slightly more reactive.
• showCursor: Whether to show the cursor. The cursor refers to the blinking caret when the EditableText is focused.
• scorllPhysics: The ScrollPhysics to use when vertically scrolling the input. If not specified, it will behave according to the current platform.

Example Project

Step 1: Create a Flutter application using the “flutter create app_name” command.

Step 2: Select and open the “main.dart” file.

Step 3: Below the MyApp widget creates a stateless widget.

Step 4: Finally create the scaffold and inside that create SelectableText Widget as shown below.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

// Creating a Stateless widget
// to display our Scaffold widget
class GFG extends StatelessWidget {
  const GFG({Key? key}) : super(key: key);

  // Creating the String text to store our text
  final String text = "Welcome to GeeksForGeeks!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Widget to center text in the app.
      body: Center(
        child: SelectableText(
          text,
          // Providing style to the text
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

Output

After long pressing on the GeeksForGeeks part of the text we can select it.