How to Make Copyable Text Widget In Flutter

0
58

Flutter is the free and open source framework developed by Google for building beautiful and multi-platform applications from a single codebase. In other words, it is Google’s portable UI toolkit for developing applications for desktop, web, and mobile from a single codebase. Organizations and developers worldwide use flutter because it works well with the existing code. 

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 fontsize, fontweight, color, and much more. If you have any doubt, then consult Flutter App development company get enough understanding about text widget. Here is the code used to customize the widget with different properties. 

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)

            ),

How to create different styling for TextWidget

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”),

    ],

  ),

)

Conclusion

So, you will now understand how to make a copyable text widget in a flutter. If you still need support for flutter development, consult Flutter experts 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. 

Previous articleJournal Of Rare Diseases Research and Treatment
Next articleMikayla Nogueira New House Details {Sep} Know Here!

LEAVE A REPLY

Please enter your comment!
Please enter your name here