Flutter - SelectableText Widget
Last Updated :
26 Apr, 2022
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.
Â
Similar Reads
Flutter - RichText Widget
The RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree. Depending on the layout constraints the text might break across multiple lines o
3 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Table Widget in Flutter
Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach. SliverList or Column will be most suitable if we only want to have a single column. Th
3 min read
Flutter - Stateless Widget
Stateless Widget is something that does not have a state. To understand a Stateless Widget, you need to clearly understand widgets and states. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To le
4 min read
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - TextButton Widget
TextButton is a built-in widget in Flutter which derives its design from Googleâs Material Design Library. It is a simple Button without any border that listens for onPressed and onLongPress gestures. It has a style property that accepts ButtonStyle as value, using this style property developers can
3 min read
Flutter - ListTile Widget
The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.The Constructor of the ListTile classListTile({ Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool isT
4 min read
Flutter - Stack Widget
The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - SizedBox Widget
SizedBox is a built-in widget in flutter SDK. It is a simple box with a specified size. It can be used to set size constraints to the child widget, put an empty SizedBox between the two widgets to get some space in between, or something else. It is somewhat similar to a Container widget with fewer p
3 min read