Я хочу сделать такую ​​кнопку, но не получаю желаемого результата

Я хочу создать поле и кнопку текстовой формы внутри контейнера, и при нажатии кнопки текст в форме должен быть скопирован в буфер обмена. Как я могу этого добиться?Мое требование такое

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")),
          )
        ],
      ),
    )

3 ответа

Решение

Вам нужно научиться достигать двух вещей, это то, чего вы хотите, это =>

  1. Класс буфера обмена => Который копирует буфер обмена. Кроме того, импортируйте этоimport 'package:flutter/services.dart'; в вашем файле, чтобы использовать этот класс
  2. suffixIcon в 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()
               )
            )
          )
        )
      ),
    );
  }
}

РЕЗУЛЬТАТ:

Дайте мне знать, если это вам поможет:) Удачного обучения!!

Вам нужно добавить границу к 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")),
          ),
        ],
      ),
    )

Попробуй это:

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")),
          )
        ],
      ),
        )
    );

это даст

Другие вопросы по тегам