Flutter Selectable Text Widget Example

In this article, we are going to create flutter selectable text in mobile application without using any third party library or plugin. You can also check out flutter rich text article.

Using selectable text, we can copy specific text using cursor. Normally we can select text in mobile app without using selectable text. Two options copy and select all are displayed by double tapping on text. These options we can set using toolbarOptions attribute in flutter selectable text widget. In this flutter example, we display two types of text: Flutter Selectable Text and Flutter Selectable Rich Text.

Selectable Text Widget has different types of property to customize text UI. toolbarOptions property is used to display toolbar with options. By default all options are false. textSpan property is used to customize different parts of selectable text. autofocus property is used to focus selectable text automatically. maxLines property is used to set maximum number of lines for text to span.

 

Home Screen UI

import ‘package:flutter/material.dart’;
import ‘package:flutterselectabletextsample/my_selectable_rich_text_screen.dart’;
import ‘my_selectable_text_screen.dart’;

class MyHomeScreen extends StatefulWidget {
@override
_MyHomeScreenState createState() => _MyHomeScreenState();
}

class _MyHomeScreenState extends State<MyHomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Selectable Text Sample’)),
body: Center(
child: Padding(
padding: EdgeInsets.all(18),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(15),
primary: Colors.deepOrangeAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(18))),
),
child: Text(‘Selectable Text’,style: TextStyle(color: Colors.white, fontSize: 25)),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => MySelectableTextScreen()));
},
),
SizedBox(height: 25),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(15),
primary: Colors.orangeAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(18))),
),
child: Text(‘Selectable Rich Text’,style: TextStyle(color: Colors.white, fontSize: 25),),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => MySelectableRichTextScreen()));
},
),
],
),
)
), //center
);
}
}

 
 
 

Flutter Selectable Text

import ‘package:flutter/material.dart’;

class MySelectableTextScreen extends StatefulWidget {
@override
_MySelectableTextScreenState createState() => _MySelectableTextScreenState();
}

class _MySelectableTextScreenState extends State<MySelectableTextScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SelectableText(
“CodingWithDhrumil.com”,
style: TextStyle(
color: Colors.deepOrangeAccent,
fontSize: 35,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
showCursor: true,
cursorWidth: 2,
cursorColor: Colors.black,
cursorRadius: Radius.circular(5),
toolbarOptions: ToolbarOptions(
copy: true,
selectAll: true,
),
onTap: () => print(‘Clicked’),
),
),
);
}
}

 
 
 

Selectable Rich Text in Flutter

import ‘package:flutter/material.dart’;

class MySelectableRichTextScreen extends StatefulWidget {
@override
_MySelectableRichTextScreenState createState() =>
_MySelectableRichTextScreenState();
}

class _MySelectableRichTextScreenState
extends State<MySelectableRichTextScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SelectableText.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: ‘Coding’, style: TextStyle(color: Colors.orangeAccent)),
TextSpan(
text: ‘With’, style: TextStyle(color: Colors.black)),
TextSpan(
text: ‘Dhrumil’, style: TextStyle(color: Colors.orangeAccent)),
TextSpan(text: ‘.com’, style: TextStyle(color: Colors.redAccent)),
],
),
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
showCursor: true,
cursorWidth: 2,
cursorColor: Colors.black,
cursorRadius: Radius.circular(5),
toolbarOptions: ToolbarOptions(copy: true, selectAll: false),
onTap: () => print(‘Clicked’),
),
),
);
}
}

 
 

Leave a Reply