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

Why is setState not working as I expected? – Flutter

I already used a stateful widget, but it seems that the item wont display when pressing add.

final TextEditingController _commentController = TextEditingController();
List<String> _genComments = [
    'comment 1',
    'comment 2',
    'comment 3',
    'comment 4',
    'comment 5'
];

Here’s my code in a ListView where the items are displayed:

Expanded(
child: Container(
  width: double.infinity,
  child: ListView.builder(
    itemCount: _genComments.length,
    itemBuilder: (context, index) {
      return Container(
        width: double.infinity,
        height: 100,
        child: Card(
          color: Colors.white,
          elevation: 5,
          child: Text(_genComments[index]),
        ),
      );
    },
  ),
),
),

Here’s my code in button where I use setState:

child: ElevatedButton(
onPressed: () {
  setState(() {
    _genComments.add(_commentController.text);
  });
  _commentController.clear();
},
Tags:

2

Answers


  1. 0

    You can use this code to get add a new element in listview

     TextEditingController commentController = TextEditingController();

     List<String> getComments = [
    'comment 1',
    'comment 2',
    'comment 3',
    'comment 4',
    'comment 5'
     ];
    
     void addItemToList(){
        setState(() {
          getComments.add(commentController.text);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                child: TextField(
                  controller: commentController,
                ),
              ),
              RaisedButton(
                child: Text('Add'),
                onPressed: () {
                  addItemToList();
                },
              ),
              Expanded(
                child: ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: getComments.length,
                  itemBuilder: (context, index) {
                      return Container(
                        width: double.infinity,
                        height: 100,
                        child: Card(
                          color: Colors.white,
                          elevation: 5,
                          child: Text(getComments[index].toString()),
                        ),
                      );
                    },
                )
              )
            ]
          )
        );
      }
    }
    Login or Signup to reply.
  2. 0

    when you call setState it will call the build mehtod. which means all widget inside this mehtod will re-executed.

     Widget build(BuildContext context) {
        return Scaffold(

    common mistake is, people declare their variable inside build method. and this cause the state variable will not updated. because everytime they call setState the value is re-declared to initial value.
    example:

    • Wrong
     Widget build(BuildContext context) {
  final TextEditingController _commentController = TextEditingController();
  List<String> _genComments = [
    'comment 1',
    ....
    ];

    return Scaffold(
    • Correct:

    declare the state variable outside build method.

      final TextEditingController _commentController = TextEditingController();
  List<String> _genComments = [
    'comment 1',
    .....
    ];

Widget build(BuildContext context) {
    return Scaffold(

    so, when you call the setState will update the value to the variable.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search