How to add TextField in List when user click on a button?

Question

My button to add item doesn't show.

I ask to user to fill player Name. If user would like to add a player, then click on a button to add a new field

List<Widget> _playerList = new List(); //_playerList is my List name

ListView.builder(
    itemBuilder: (context,index){
      _playerList.add(new TextField());
      Widget widget = _playerList.elementAt(index);
    return widget;
    }),

    new FlatButton.icon(
                        color: Colors.black,
                        icon: Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 18,
                        ),
                        label: Text('Add player',
                            style: TextStyle(fontSize: 12, color: Colors.white)),
                        onPressed: () {
                          _playerList.add(new Text("ggg"));
                        },


                    ),

Button to add not display

Nikhat Shaikh · Accepted Answer · 2019-05-23 06:34:16Z

In your code, below part creating problem-

ListView.builder(
    itemBuilder: (context,index){
      _playerList.add(new TextField());
      Widget widget = _playerList.elementAt(index);
    return widget;
    }),

Remove '_playerList.add(new TextField());' line. It should like-

 class Items extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _ItemsState();
      }
    }

    class _ItemsState extends State<Items> {
       List<Widget> _playerList = new List(); //_playerList is my List name

      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            body: Column(
              children: <Widget>[
                new FlatButton.icon(
                  color: Colors.black,
                  icon: Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 18,
                  ),
                  label: Text('Add player',
                      style: TextStyle(fontSize: 12, color: Colors.white)),
                  onPressed: () {
                    setState(() {

                      _playerList.add(new Text("ggg"));
                      print(_playerList);
                    });
                  },
                ),
                Expanded(
                    child: ListView.builder(
                      itemCount:_playerList.length ,
                        itemBuilder: (context,index){
                          Widget widget = _playerList.elementAt(index);
                          return widget;
                        })
                )
              ],
            ));
      }
    }

dshukertjr · Accepted Answer · 2019-05-22 23:39:59Z

0

You have to call setState after you change the _playerList property. I was not sure if you want to add more text fields on button press or want to add texts on button press, so I made the code to add text fields on button press.

List<Widget> _playerList = []; 

  ListView.builder(
    itemBuilder: (context,index){
    return _playerList[index];
    })

    FlatButton.icon(
      color: Colors.black,
      icon: Icon(
        Icons.add,
        color: Colors.white,
        size: 18,
      ),
      label: Text('Add player',
          style: TextStyle(fontSize: 12, color: Colors.white)),
      onPressed: () {
        _playerList.add(TextField());
        setState(() {});
      },
    ),

answered May 22, 2019 at 23:39

dshukertjr

19.2k11 gold badges71 silver badges101 bronze badges

Comments

AbdulMajeed Saad · Accepted Answer · 2019-05-23 00:12:15Z

You have to use setState, Here is the code.

Screenshot https://i.sstatic.net/SFvLE.jpg

 List<String> _playerList = List();
 TextEditingController controller = TextEditingController();

this is the set State

 _submit() {
   setState(() {
     _playerList.add(controller.text);
   });
 }

Here is the body

  Scaffold(
    body: Column(
      children: <Widget>[
        SizedBox(height: 15.0),
        TextField(
          controller: controller,
          decoration: InputDecoration(
            hintText: 'Add Player',
          ),
        ),
        SizedBox(height: 15.0),
        Center(
          child: FlatButton.icon(
              color: Colors.black,
              icon: Icon(
                Icons.add,
                color: Colors.white,
                size: 18,
              ),
              label: Text('Add player',
                  style: TextStyle(fontSize: 12, color: Colors.white)),
              onPressed: () => _submit()),
        ),
        SizedBox(height: 20.0),
        Expanded(
          child: ListView(
            padding: EdgeInsets.all(10.0),
            children: _playerList.reversed.map((data) {
              return Dismissible(
                key: Key(data),
                child: ListTile(
                  title: Text('$data'),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    ),
  );

Collectives™ on Stack Overflow

How to add TextField in List when user click on a button?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related