Question 78292 in Flutter Question posted in
The official Flutter documentation can be found here.

Clear TextField inside ListView Flutter

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,
          ),
        )
      ),
    ),
  ),
),
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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,
          ),
        )
      ),
    ),
    Login or Signup to reply.
  3. 0 
    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),
                     )
                   ),
            )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search