我想制作这样的按钮但没有得到所需的输出

Question

我想在容器内创建一个文本表单字段和按钮，单击表单中的按钮文本应该复制到剪贴板。我怎样才能做到这一点？ My Requirement is like this

Container(
      height: 65.0,
      width: 270.0,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
                decoration: InputDecoration(
                    hintText: "https://",
                    border: OutlineInputBorder(
                        borderRadius:
                        BorderRadius
                            .circular(10.0),
                        borderSide:
                        BorderSide()))),
          ),
          Container(
            child: FlatButton(
                onPressed: () {},
                child: Text("Copy Link")),
          )
        ],
      ),
    )

Answer 1

您需要将边框添加到 Container 而不是 Textfield

Container(
      height: 50.0,
      width: 270.0,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey,
        ),
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10.0),
                hintText: "https://",
                border: InputBorder.none,
              ),
            ),
          ),
          Container(
            height: 50.0,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
              ),
              borderRadius: BorderRadius.circular(6.0),
            ),
            child: FlatButton(onPressed: () {}, child: Text("Copy Link")),
          ),
        ],
      ),
    )

Answer 2

试试这个：

Container(
      height: 65.0,
      width: 270.0,
        decoration: BoxDecoration(
              border: Border.all(),
        borderRadius: BorderRadius.circular(20.0)),
              
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                    hintText: "https://")),
          ),
          Container(
            child: FlatButton(
                onPressed: () {},
                child: Text("Copy Link")),
          )
        ],
      ),
        )
    );

这会给

Answer 3

你有两件事要学习去实现，你想要什么，它们是：

Clipboard class => 剪贴板复制哪个。 此外，请在您的文件中导入此 import 'package:flutter/services.dart'; 以使用此 Class
suffixIcon in InputDecoration，这会将项目添加到 TextField()

最终解决方案：

// mandatory for Clipboard class
import `'package:flutter/services.dart';

class _MyHomePageState extends State<MyHomePage> {
  final key = new GlobalKey<ScaffoldState>();
  final TextEditingController _controller = new TextEditingController();
  
  @override
  Widget build(BuildContext context){
    return Scaffold(
      key: key,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 65.0,
          width: 270.0,
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(
               hintText: "https://",
               suffixIcon: FlatButton(
                  onPressed: () {
                    // Here what you have to do the operation using Clipboard
                    Clipboard.setData(new ClipboardData(text: _controller.text.toString()));
                    key.currentState.showSnackBar(
                    new SnackBar(content: new Text("Copied to Clipboard")));
                  },
                  child: Text("Copy Link")
               ),
               border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide()
               )
            )
          )
        )
      ),
    );
  }
}

结果：

我想制作这样的按钮但没有得到所需的输出

I want to make a button like this but not getting the desired output

button

flutter

textformfield