Bagaimana cara saya memberikan nilai awal ke bidang teks?

143

Saya ingin memberikan nilai awal ke bidang teks dan menggambar ulang dengan nilai kosong untuk menghapus teks. Apa pendekatan terbaik untuk melakukan itu dengan Flutter's APIs?

Seth Ladd
sumber

Jawaban:

105

(Dari milis. Saya tidak menemukan jawaban ini.)

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TextEditingController(text: 'Initial value');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          // The TextField is first built, the controller has some initial text,
          // which the TextField shows. As the user edits, the text property of
          // the controller is updated.
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            // You can also use the controller to manipuate what is shown in the
            // text field. For example, the clear() method removes all the text
            // from the text field.
            _controller.clear();
          },
          child: new Text('CLEAR'),
        ),
      ],
    );
  }
}
Seth Ladd
sumber
Saya kira petunjuk server tujuan yang sama.
dhuma1981
3
Hanya ingin tahu milis mana yang Anda rujuk dalam jawaban?
stt106
2
Dan bagaimana kita menambahkan / mengganti nilai textfield menjadi nilai awal?
stuckedoverflow
2
Juga, pastikan untuk membuang _controller pada pengaturan widget. Disarankan oleh Google. Ini memastikan bahwa sumber daya dibebaskan ketika tidak diperlukan.
Amrit Pal Singh
89

Anda dapat menggunakan TextFormFieldalih - alih TextField, dan menggunakan initialValueproperti. sebagai contoh

TextFormField(initialValue: "I am smart")
Sami Kanafani
sumber
2
Untuk beberapa alasan saya tidak bisa menggunakan ini dengan objek yang dinamis. Akhirnya membutuhkan pengontrol.
S1r-Lanzelot
6
Ini hanya valid ketika pengontrol tidak ditentukan dengan TextFormField. docs.flutter.io/flutter/material/TextFormField/…
Alex Fallenstedt
@AlexFallenstedt tidak perlu untuk properti ini ketika controller tersedia
Sami Kanafani
Saya pikir ini berisiko karena ketika membangun kembali pohon widget Anda, teks Anda dapat diganti dengan nilai awal.
Gökberk Yağcı
46

Anda tidak perlu mendefinisikan variabel terpisah dalam cakupan widget, cukup lakukan inline:

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
vovahost
sumber
Apa yang dimaksud dengan titik ganda di "TextEditingController () .. text"?
Ray Li
3
@ Rayli Ini disebut operator kaskade. Untuk info dan contoh, periksa di sini stackoverflow.com/questions/53136945/…
vovahost
1
Terima kasih!. Ini sempurna untuk pembuatan widget yang dinamis dari daftar objek :)
davaus
Inilah yang saya cari !! Terima kasih banyak!
Taejung Shim
1
@vovahost itu hilang bagian buang, sayangnya.
Chris Rutkowski
28

Jika Anda menggunakan TextEditingController maka atur teksnya, seperti di bawah ini

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

final your_text_name = TextFormField(
      autofocus: false,
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Hint Value',
      ),
    );

dan jika Anda tidak menggunakan TextEditingController maka Anda dapat langsung menggunakan initialValue seperti di bawah ini

final last_name = TextFormField(
      autofocus: false,
      initialValue: 'your initial text',
      decoration: InputDecoration(
        hintText: 'Last Name',
      ),
    );

Untuk referensi TextEditingController lebih lanjut

Nirav Bhavsar
sumber
Saya tidak yakin apakah itu ide yang baik untuk menetapkan nilai awal ke textproperti sesuai dokumen TextEditingController.textproperti: Mengatur ini akan memberi tahu semua pendengar TextEditingController ini yang mereka perlu perbarui (ini disebut notifyListeners). Karena alasan ini, nilai ini hanya boleh ditetapkan di antara frame, misalnya sebagai respons terhadap tindakan pengguna, bukan selama fase pembuatan, tata letak, atau cat. ( api.flutter.dev/flutter/widgets/TextEditingController/text.html )
Kirill Karmazin
16

Saya telah melihat banyak cara melakukan ini di sini. Namun saya pikir ini sedikit lebih efisien atau paling tidak ringkas daripada jawaban lainnya.

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)
kent
sumber
7

Jika Anda ingin menangani beberapa TextInputs seperti yang diminta oleh @MRT dalam komentar untuk jawaban yang diterima, Anda dapat membuat fungsi yang mengambil nilai awal dan mengembalikan yang TextEditingControllerseperti ini:

initialValue(val) {
  return TextEditingController(text: val);
}

Kemudian, atur fungsi ini sebagai pengontrol untuk TextInputdan berikan nilai awalnya di sana seperti ini:

controller: initialValue('Some initial value here....')

Anda dapat mengulangi ini untuk yang lain TextInput.

Muaad
sumber
5

Ini bisa dicapai dengan menggunakan TextEditingController.

Untuk memiliki nilai awal, Anda dapat menambahkan

TextEditingController _controller = TextEditingController(text: 'initial value');

atau

Jika Anda menggunakan TextFormFieldAnda memiliki initialValueproperti di sana. Yang pada dasarnya menyediakan ini initialValueke controller secara otomatis.

TextEditingController _controller = TextEditingController();
TextFormField(
  controller: _controller,
  initialValue: 'initial value'
)

Untuk menghapus teks, Anda dapat menggunakan _controller.clear()metode.

Debasmita Sarkar
sumber
3

di dalam kelas,

  final usernameController = TextEditingController(text: 'bhanuka');

TextField,

   child: new TextField(
        controller: usernameController,
    ...
)
Kehilangan darah
sumber
3
TextEdittingController _controller = new TextEdittingController(text: "your Text");

atau

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }
seyed ali Aghamali
sumber
-12

Jika Anda belum menemukan jawaban untuk ini dan bagi mereka yang datang ke sini mencari jawaban: Periksa petunjuk InputDecorationbidangTeks:

new TextField(
  decoration: new InputDecoration(
    hintText:"My Text String."
  ),
...
user693336
sumber
Teks petunjuk bukan nilai awal. Ketika pengguna mengetik sesuatu itu akan hilang. Teks awal seperti pra-menulis sesuatu untuk pengguna.
Arman Ordookhani
Ini adalah teks Petunjuk, Not Value initializer
MRT
2
Itu benar, tetapi ini bagus untuk mereka yang datang ke sini mencari teks petunjuk, tetapi tidak tahu harus menyebutnya apa.
ThinkDigital