SelectableText Widget In Flutter
By: Shaiq Khan
Tags: Flutter, Mobile App Development, Dart, Flutter App Development, Text

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.

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.

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 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.

: This property is utilized as a component of the 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 .

This property is used whether it should focus itself if nothing else is already focused. Defaults to . > maxLines : This property is used for the maximum number of lines for the text to span, wrapping if necessary.

: 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.

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.

Home Screen

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 Basic

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.

SelectableText RichText

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 ❤❤