At times you might need to make the Text content of your mobile selectable to utilize functionalities like a copy. On the off chance that you need to show text in Flutter, the normal route is by utilizing a Text widget. Be that as it may, it doesn’t permit the user to choose the text. If you need the user to have the option to select the text, you can utilize Flutter’s SelectableText widget.
In this blog, we will explore the SelectableText Widget In Flutter. We will see how to implement a demo program of the selectable text widget and show you how to utilize that widget to copy/select the text, making a text selectable is really simple in Flutter, you simply need to utilize the SelectableText widget in your flutter applications.
SelectableText class – material library – Dart API
A run of selectable text with a single style. The SelectableText widget displays a string of text with a single style…master-api. flutter.dev
Table Of Contents::
SelectableText Widget:
The SelectableText widget shows a string of text with a solitary style. The string may break across various lines or may all be shown on a similar line contingent upon the design imperatives. To utilize SelectableText, there is just one required boundary which is the text to be shown was String.
SelectableText Widget in Flutter allows the user to Select/Copy the content on the UI. The typical Text Widget in Flutter won’t permit a copy/select element by double-tapping on the content, we can either select/copy the content. To take care of this issue, the Flutter discharge came out with the SelectableText Widget.
For more info on SelectableText Widget ,Watch this video By Flutter :
Below demo video shows how to create a selectable text in a flutter. It shows how the selectable text widget will work using the SelectableText Widget in your flutter applications. It shows two buttons on the center screen. When the user taps on these buttons, it will show allow the user to copy/select a feature by double-tapping on the text, we can either select/copy the text. It will be shown on your device.
Demo Module :
Properties:
There are some properties of the SelectableText widget are:
- > data: This property is a significant property where the data to appear as a feature of the SelectableText must appear. The text to be shown.
- > onTap: This property is utilized for the callback function that gets terminated at whatever point somebody taps on the Text of the SelectableText. Of course, the tapping opens the select all/copy choice. On the off chance that you need to perform different exercises, make a point to supersede them here.
- > textSpan: This property is utilized as a component of the SelectableText.rich() widget. This allows you to pick the TextSpan which can hold various texts on the SelectableText widget.
- > autofocus: This property is used whether it should focus itself if nothing else is already focused. Defaults to
false. - > maxLines: This property is used for the maximum number of lines for the text to span, wrapping if necessary.
- > toolbarOptions: This property is used to create a toolbar configuration with given options. All options default to false if they are not explicitly set.
- > enableInteractiveSelection: This property is used to Whether to select text and show the copy/paste/cut menu when long-pressed. Defaults to
true.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_page_screen.dart inside the lib folder.
We will make two buttons on this home page screen, and each button will show SelectableText Widget, and we will show the deeply below detail. When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will deeply define below are the two different uses of the SelectableText class and the resulting output.
SelectableText Basic:
In the body part, we will add the center widget. In this widget, we will add SelectableText() method. Inside this method, we will add text, toolbarOptions. In these options, when selection is active, it shows ‘Copy’ and ‘Select all’ options. You can utilize the toolbarOptions property to pass an instance of ToolbarOptions. The constructor of ToolbarOptions has all values are copied, cut, paste, and selectAll set to false by default. You need to set every option to true on the off chance that you need it to show up on the toolbar. Be that as it may, cut and paste will not be showed regardless of whether you set it to true.
Center(
child: SelectableText(
"Flutter Tutorial by Flutter Dev's.com",
style: TextStyle(color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 45
),
textAlign: TextAlign.center,
onTap: () => print('Tapped'),
toolbarOptions: ToolbarOptions(copy: true, selectAll: true,),
showCursor: true,
cursorWidth: 2,
cursorColor: Colors.red,
cursorRadius: Radius.circular(5),
),
),
We will add the showCursor option true, cursor width, color, and radius. When we run the application, we ought to get the screen’s output like the underneath screen capture.
SelectableText RichText:
In the body part, we will add the center widget. In this widget, we will add SelectableText.rich() method. In this method, that you need the content to have various formats, utilizing RichText is the normal methodology in Flutter. It’s likewise conceivable to have a selectable RichText by utilizing SelectableText.rich named constructor. It acknowledges an TextSpan as the first and the solitary required boundary rather than a String. Different boundaries, which are optional, are the same equivalent to the main constructor.
Center(
child: SelectableText.rich(
TextSpan(
children: <TextSpan>[
TextSpan(text: 'Flutter', style: TextStyle(color: Colors.blue)),
TextSpan(text: 'Devs', style: TextStyle(color: Colors.black)),
TextSpan(text: '.com', style: TextStyle(color: Colors.red)),
],
),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48),
textAlign: TextAlign.center,
onTap: () => print('Tapped'),
toolbarOptions: ToolbarOptions(copy: true, selectAll: false),
showCursor: true,
cursorWidth: 2,
cursorColor: Colors.black,
cursorRadius: Radius.circular(5),
),
)
We will add toolbarOptons, which shows ‘Copy’ was true and ‘Select all’ was false options. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_selectabletext_widget/selectable_text_rich_screen.dart';
import 'package:flutter_selectabletext_widget/selectable_text_screen.dart';
class HomePageScreen extends StatefulWidget {
@override
_HomePageScreenState createState() => _HomePageScreenState();
}
class _HomePageScreenState extends State<HomePageScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
title: Text("Flutter SelectableText Widget Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('Selectable Text',style: TextStyle(color: Colors.black),),
color: Colors.green[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SelectableTextScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Selectable Text Rich',style: TextStyle(color: Colors.black),),
color: Colors.green[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SelectableTextRichScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
],
),
)
), //center
);
}
}
Conclusion:
In the article, I have explained the basic structure of the SelectableText Widget in a flutter; you can modify this code according to your choice. This was a small introduction to SelectableText Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the SelectableText Widget in your flutter projects. We will show you what the SelectableText Widget is?, some properties using in SelectableText Widget, and make a demo program for working SelectableText Widget and show you how to use that widget to copy/select the text, making a text selectable is pretty easy in Flutter using the SelectableText Widget widget in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter SelectableText Widget Demo:
flutter-devs/flutter_selectabletext_widget_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
