title: How to edit an element from an array in flutter
body: <p>I have been working on a to do list app in flutter and now I am trying to implement an edit function in which the user can select the element the user wants to edit and finally saving those changes made. For doing this, I created a function that calls the array which stores the uploaded items to then target the selected element from the array and finally give it a new value which would be the edited text. I have used this process before in react native but since flutter uses dart I have been getting some problems like I can’t just add indexOf(index) because an integer can’t be used in ToDoElement which is a string, also I don’t know how can I assign a new value to that selected element since this is my second week learning flutter. How can I achieve this edit function? Please correct me if my idea of doing this is wrong.</p>
  <p>EDIT: I have recieved help and now I am getting an error on _editDialog when calling the _editToDoItem function, on index because <code>Undefined name 'index'</code>.</p>
  <p>code related to the edit function</p>
  <pre><code>class ToDoElement {
    String task;
    final DateTime timeOfCreation;
  
    ToDoElement(this.task, this.timeOfCreation);
  }
  
  void main() =&gt; runApp(MaterialApp(home: MyApp()));
  
  class MyApp extends StatefulWidget {
    @override
    createState() =&gt; MyAppState();
  }
  
  
  
  class MyAppState extends State&lt;MyApp&gt; {
    List&lt;ToDoElement&gt; _toDoItems = [];
    TextEditingController _controller = TextEditingController();
  
    void _addToDoItem(String task) {
      if(task.isNotEmpty) {
        setState(() {  
          _toDoItems.add(ToDoElement(task, DateTime.now()));
        });
      }
    }
  
    void _editToDoItem(String newText, int index) {
      setState(() {
        _toDoItems[index].task = newText;
      });
    }
  
    void _removeTodoItem(int index) {
      setState(() =&gt; _toDoItems.removeAt(index));
    }
  
    _editDialog(BuildContext context) {
      return showDialog(context: context, builder: (context) {
        return Dialog(
          backgroundColor: Colors.transparent,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
            padding: EdgeInsets.all(20),
            height: 180,
            width: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Container(
                    height: 60, 
                    child: TextField(
                      controller: _controller,
                      autofocus: true,
                      style: TextStyle(fontSize: 18,),
                    )
                  ), 
                  Container(
                    height: 65,
                    width: double.infinity,
                    margin: EdgeInsets.only(top: 5,),
                    child: RaisedButton(
                      textColor: Colors.white,
                      color: Colors.red,
                      child: Text('EDIT', style: TextStyle(fontSize: 18)),
                      
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12)),
                      ),
                      onPressed: () {
                        _editToDoItem(_controller.text, index); // error on index, Undefined name 'index'
                        FocusScope.of(context).requestFocus(FocusNode());
                      },
                    ),
                  ),                                          
              ],
            ),
          ),
        );
      });
    }
  </code></pre>
  <p>full main.dart</p>
  <pre><code>class ToDoElement {
    String task;
    final DateTime timeOfCreation;
  
    ToDoElement(this.task, this.timeOfCreation);
  }
  
  void main() =&gt; runApp(MaterialApp(home: MyApp()));
  
  class MyApp extends StatefulWidget {
    @override
    createState() =&gt; MyAppState();
  }
  
  
  
  class MyAppState extends State&lt;MyApp&gt; {
    List&lt;ToDoElement&gt; _toDoItems = [];
    TextEditingController _controller = TextEditingController();
  
    void _addToDoItem(String task) {
      if(task.isNotEmpty) {
        setState(() {  
          _toDoItems.add(ToDoElement(task, DateTime.now()));
        });
      }
    }
  
    void _editToDoItem(String newText, int index) {
      setState(() {
        _toDoItems[index].task = newText;
      });
    }
  
    void _removeTodoItem(int index) {
      setState(() =&gt; _toDoItems.removeAt(index));
    }
  
    _editDialog(BuildContext context) {
      return showDialog(context: context, builder: (context) {
        return Dialog(
          backgroundColor: Colors.transparent,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
            padding: EdgeInsets.all(20),
            height: 180,
            width: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Container(
                    height: 60, 
                    child: TextField(
                      controller: _controller,
                      autofocus: true,
                      /*onSubmitted: (val) {
                        _addToDoItem(val);
                        _controller.clear();
                      },*/
                      style: TextStyle(fontSize: 18,),
                      decoration: InputDecoration(
                        hintText: 'Add a task here...',
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(12.0)),
                          borderSide: BorderSide(color: Colors.red, width: 2),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(12.0)),
                          borderSide: BorderSide(color: Colors.red, width: 2),
                        ),
                        
                      ),
                    )
                  ),
  
                
                     
                  Container(
                    height: 65,
                    width: double.infinity,
                    margin: EdgeInsets.only(top: 5,),
                    child: RaisedButton(
                      textColor: Colors.white,
                      color: Colors.red,
                      child: Text('EDIT', style: TextStyle(fontSize: 18)),
                      
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12)),
                      ),
                      onPressed: () {
                        _editToDoItem(_controller.text, index);
                        FocusScope.of(context).requestFocus(FocusNode());
                      },
                    ),
                  ),                                          
              ],
            ),
          ),
        );
      });
    }
  
    Widget _buildToDoItem(String toDoText, int index) {
      return SizedBox(
        child: Container(
          height: 58,
          margin: EdgeInsets.only(left: 22.0, right: 22.0, bottom: 12,),
          decoration: BoxDecoration(
            border: Border.all(width: 1.5, color: Colors.red),
            borderRadius: BorderRadius.all(Radius.circular(18)),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children:[
              Expanded(
                child: ListTile(
                  title: Text(
                    toDoText,
                    style: TextStyle(fontSize: 18),
                  ),
                  onTap: () =&gt; null,
                ),
              ),
              FlatButton(
                child: Text('Edit', style: TextStyle(color: Colors.red, fontSize: 16.5),),
                onPressed: () =&gt; _editDialog(context),
              ),
              FlatButton(
                child: Text('Delete', style: TextStyle(color: Colors.red, fontSize: 16.5),),
                onPressed: () =&gt; _removeTodoItem(index),
              ),
            ],
          ),
        ),
      );
    }
  
    int compareElement(ToDoElement a, ToDoElement b) =&gt;
        a.timeOfCreation.isAfter(b.timeOfCreation) ? -1 : 1;
  
    Widget _buildToDoList() {
      _toDoItems.sort(compareElement);
      return Expanded(
        child: ListView.builder(
          itemCount: _toDoItems.length,
          itemBuilder: (context, index) {
            if (index &lt; _toDoItems.length) {
              return _buildToDoItem(_toDoItems[index].task, index);
            }
          },
        ),
      );
    }
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
              centerTitle: true,
              backgroundColor: Colors.red,
              title: Text('To Do List', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold,),),
            )
          ),
          backgroundColor: Colors.white,
          body: GestureDetector(
            onTap: () {
              FocusScope.of(context).requestFocus(FocusNode());
            },
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  height: 60,
                  margin: EdgeInsets.all(22),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(
                        flex: 10,
                        child: Container(
                          height: double.infinity,
                          child: TextField(
                            controller: _controller,
                            autofocus: true,
                            onSubmitted: (val) {
                              _addToDoItem(val);
                              _controller.clear();
                            },
                            style: TextStyle(fontSize: 18,),
                            
                            decoration: InputDecoration(
                              hintText: 'Add a task here...',
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                                borderSide: BorderSide(color: Colors.red, width: 2),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                                borderSide: BorderSide(color: Colors.red, width: 2),
                              ),
                              
                            ),
                          ),
                        ),
                        
                      ),
                      Expanded(
                        flex: 4,    
                        child: Container(
                          height: double.infinity,
                          margin: EdgeInsets.only(left: 12),
                          child: RaisedButton(
                            textColor: Colors.white,
                            color: Colors.red,
                            child: Text('ADD', style: TextStyle(fontSize: 18)),
                            
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12)),
                            ),
                            onPressed: () {
                              _addToDoItem(_controller.text);
                              _controller.clear();
                              FocusScope.of(context).requestFocus(FocusNode());
                            },
                          ),
                        ),                                          
                      ),
                    ],
                  ),
                ), 
                _buildToDoList()
              ]
            ), 
                   
          ),
      );
    }
  }
  
  </code></pre>
  <p>if you have any questions please let me know in the comments;)</p>