How to Add Selectable/Copy Text Widget in Flutter

In this example, we are going to show you how to add a selectable text widget and RichText in Flutter. Text widgets have no select or copy text feature, you can use the SelectableText widget to make selectable and copyable text widgets in Flutter. 

SelectableText(
  "Hello this is FlutterCampus, and you are making selectable and copyable text.",
  style: TextStyle(fontSize: 18),
)

Use SlectableText instead of Text Widget. Text widgets have no selectable and copyable features.

SelectableText.rich(
  TextSpan( 
      style: TextStyle(fontSize: 20),
      children: [
        TextSpan(text:"Hello this is FlutterCampus"),
        TextSpan(text:"and you are making selectable and copyable text.")
      ]
  )
)

Use SelectableText.rich() widget to add selectable RichText widget in Flutter.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Selectable Text in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            padding: EdgeInsets.all(20),
            alignment: Alignment.center,
            child: Column(
                children: [
                    SelectableText(
                      "Hello this is FlutterCampus, and you are making selectable and copyable text.",
                      style: TextStyle(fontSize: 18),
                    ),

                    SelectableText.rich(
                      TextSpan( 
                          style: TextStyle(fontSize: 20),
                          children: [
                            TextSpan(text:"Hello this is FlutterCampus"),
                            TextSpan(text:"and you are making selectable and copyable text.")
                          ]
                      )
                    )
                ],
            ),
          )
       );
  }
}

In this way, you can add selectable and copyable text widget in Flutter UI.

No any Comments on this Article


Please Wait...