How to make copyable Text Widget in Flutter?

前端 未结 5 1227
闹比i
闹比i 2020-12-04 16:54

When long tab on Text widget, a tooltip show up with \'copy\'. When click on the \'copy\' the text content should copy to system clipboard.

The following will copy t

5条回答
  •  北荒
    北荒 (楼主)
    2020-12-04 17:16

    You can use a SnackBar to notify the user about the copy.

    Here is a relevant code:

    String _copy = "Copy Me";
    
      @override
      Widget build(BuildContext context) {
        final key = new GlobalKey();
        return new Scaffold(
          key: key,
          appBar: new AppBar(
            title: new Text("Copy"),
            centerTitle: true,
          ),
          body:
          new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new GestureDetector(
                  child: new Text(_copy),
                  onLongPress: () {
                    Clipboard.setData(new ClipboardData(text: _copy));
                    key.currentState.showSnackBar(
                        new SnackBar(content: new Text("Copied to Clipboard"),));
                  },
                ),
                new TextField(
                    decoration: new InputDecoration(hintText: "Paste Here")),
              ]),
    
    
        );
      }
    

    EDIT

    I was working on something and I did the followin, so I thought of revisiting this answer:

    import "package:flutter/material.dart";
    import 'package:flutter/services.dart';
    
    void main() {
      runApp(new MaterialApp(home: new MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => new _MyAppState();
    }
    
    class _MyAppState extends State with TickerProviderStateMixin {
      String _copy = "Copy Me";
    
      @override
      Widget build(BuildContext context) {
        final key = new GlobalKey();
        return new Scaffold(
          key: key,
          appBar: new AppBar(
            title: new Text("Copy"),
            centerTitle: true,
          ),
          body:
          new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new GestureDetector(
                  child: new CustomToolTip(text: "My Copyable Text"),
                  onTap: () {
    
                  },
                ),
                new TextField(
                    decoration: new InputDecoration(hintText: "Paste Here")),
              ]),
    
    
        );
      }
    }
    
    class CustomToolTip extends StatelessWidget {
    
      String text;
    
      CustomToolTip({this.text});
    
      @override
      Widget build(BuildContext context) {
        return new GestureDetector(
          child: new Tooltip(preferBelow: false,
              message: "Copy", child: new Text(text)),
          onTap: () {
            Clipboard.setData(new ClipboardData(text: text));
          },
        );
      }
    }
    

提交回复
热议问题