Clear TextField inside ListView Flutter-CodePudding

How onTap clear TextField in below example?

Note TextField is positioned inside trailing in ListView

trailing: FittedBox(
  fit: BoxFit.fill,
  child: SizedBox(
    height:40, width:100,
    child: TextField(
      controller: TextEditingController(text: _docData[index].quantity.toString()),
      decoration: InputDecoration(
        suffix: InkWell(
          onTap: () {
            setState(() {
              
            });
          },
          child: Icon(
            Icons.clear,
          ),
        )
      ),
    ),
  ),
),

CodePudding user response：

Try this

Create a list of TextEditingController

List<TextEditingController> controllers = List.empty(growable: true);

Then inside ListView.builder, create TextEditingController one by one and add it to controllers list.

Then assign to TextField and clear like this

child: TextField(
      controller: controllers[index],
      decoration: InputDecoration(
        suffix: InkWell(
          onTap: () {
            setState(() {
              controllers[index].clear();
            });
          },
          child: Icon(
            Icons.clear,
          ),
        )
      ),
    ),

CodePudding user response：

When we call the function:

 setState(() {
              
            });

The whole widget rebuilds hence your TextEditingController is initialized again so the text inside is reset to default which is empty

CodePudding user response：

First create a variable from TextEditingController like this:

TextEditingController _controller = TextEditingController();

then change your TextField to this:

TextField(
    controller: _controller,
    decoration: InputDecoration(
        suffix: InkWell(
      onTap: () {
        setState(() {
          _controller.text = ''; // or _controller.clear();
        });
      },
      child: Icon(
        Icons.clear,
      ),
    )),
  )

you can pass your _docData[index].quantity.toString() to _controller when the value get ready.

CodePudding user response：

Full Code

1)First Screen
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyCustomForm(),
    );
  }
}

2)Second Screen

import 'package:flutter/material.dart';
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);
  @override
State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  TextEditingController _controller =TextEditingController();
  @override
  Widget build(BuildContext context) {
    // question: delete textField inside the ListView
    return Scaffold(
      body: Container(
        child: ListView(
          children: [
            TextField(
              onChanged: (value){
             _controller.text;
              },
              controller: _controller,
                   decoration:  InputDecoration(
                     hintText: 'Enter Name',
                     suffix: InkWell(
                       onTap: (){
                         _controller.clear();
                       },
                       child:Icon(Icons.clear),
                     )
                   ),
            )
          ],
        ),
      ),
    );
  }
}