How to Create Copyable Text Widget In Flutter?

Even though many exciting things are available in the flutter, developers often confront specific issues with this platform. One of the common issues in flutter is unable to copy the text content. By default, users cannot copy the text content of the flutter app. But, sometimes, users want to copy text content to the clipboard. This is where the text widget comes in.

It allows the users to display text in the flutter application. It is also used to showcase the purpose of the component in the mobile app. When you long tap on the text widget, a tooltip will show up with a copy. Once you click on the copy, the text content will copy to the system clipboard. Keep reading to know how to make a copyable text widget in a flutter.

What is a text widget in flutter?
The text widget is one of the most widely accessed widgets in a flutter. You need to use the text widget when you want to display text in flutter applications. Using this widget, you can even display the text in a single line or multiple lines.

It also helps you to customize the text with different properties such as font size, font weight, color, and much more. Here is the code used to customize the widget with different properties. You have another option to get a customized solution in Flutter app development by hiring a Flutter developers From Bosc Tech.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
         appBarTheme: const AppBarTheme(
       color: Colors.orange,
     )),
     debugShowCheckedModeBanner: false,
     home: const FlutterTextWidget(),
   );
 }
}

A guide to making copyable text widget in the flutter

Since Flutter 1.9 has launched the widget for the same, you will find the list of properties in SelectableText. It enables the option selectAll, copy, paste, and cut. Here is how the code snippet looks!

SelectableText("Lorem ipsum...")

Whenever the text is selected, the copy context button will appear, and it will render the output. If you are worried about not showing the copy context button, you can use SnackBar Widget. It notifies the user about the copy. Here is the code snippet!

final String _copy = "long press to copy";
@override
Widget build(BuildContext context) {
 return Scaffold(
   key: key,
   appBar: AppBar(
     title: const Text("Copy"),
     centerTitle: true,
   ),
   body: Column(mainAxisAlignment: MainAxisAlignment.center, children: < Widget>[
     const SelectableText.rich(
       TextSpan(
         children: [
           TextSpan(text: "Copy me", style: TextStyle(color: Colors.red)),
           TextSpan(text: " and leave me"),
         ],
       ),
     ),
     const SizedBox(
       height: 20,
     ),
     const SelectableText(
       'Hello Flutter Developer',
       cursorColor: Colors.red,
       showCursor: true,
       toolbarOptions: ToolbarOptions(
           copy: true, selectAll: true, cut: false, paste: false),
     ),
     const SizedBox(
       height: 20,
     ),
     const SelectableText(
       'This is a copyable text...',
       textAlign: TextAlign.center,
       style: TextStyle(fontWeight: FontWeight.bold),
     ),
     const SizedBox(
       height: 20,
     ),
     GestureDetector(
       child: Text(_copy),
       onLongPress: () {
         Clipboard.setData(ClipboardData(text: _copy));
         key.currentState?.showSnackBar(const SnackBar(
           content: Text("Copied to Clipboard"),
         ));
       },
     ),
     const SizedBox(
       height: 20,
     ),
     const Padding(
       padding: EdgeInsets.symmetric(horizontal: 10),
       child: TextField(decoration: InputDecoration(hintText: "Paste Here")),
     ),
   ]),
 );
}

Create copyable text in flutter using SelectableText class
It is extremely easy to create copyable text in a flutter with the help of SelectableText class. Here is the code to follow!

const SelectableText(
 'This is a copyable text...',
 textAlign: TextAlign.center,
 style: TextStyle(fontWeight: FontWeight.bold),
),

Example of copyable text in flutter

import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Copyable Text Example',
      home: FlutterExample(),
    );
  }
}
class FlutterExample extends StatelessWidget {
  const FlutterExample({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Copyable Text Example')),
      body: Center(child: SelectableText('You can copy me!'),)
    );
  }
}

Use SelectableText to enable list of properties – copy, paste, cut and selectAll

child: Center(
            child: SelectableText('Hello Flutter Developer',
                cursorColor: Colors.red,
                showCursor: true,
                toolbarOptions: ToolbarOptions(
                copy: true,
                selectAll: true,
                cut: false,
                paste: false
                ),
                style: Theme.of(context).textTheme.body2)
            ),

If you wish to have different styling for TextWidget, then you can use this code.

SelectableText.rich(
  TextSpan(
    children: [
      TextSpan(text: "Copy me", style: TextStyle(color: Colors.red)),
      TextSpan(text: " and leave me"),
    ],
  ),
)

Output

Conclusion

So, you will now understand how to make a copyable text widget in a flutter. If you still need support for flutter development, hire flutter developer without any hesitation. The experienced and skilled flutter will give you enough assistance in developing the Flutter project. They use the incredible resources from Flutter and help you to get the desired outcome.