Error trying to read items from a list of strings to show in a ListView

Question

In the code below I am trying to build a basic ToDo list app using flutter. I have a FAB and when it is pressed, it asks the user to enter a text in the popped up alert dialog that contains a TextField. I also use a TextEditingController to get the text and add it to a list of strings. I have a counter variable to keep track of items being added to the list and to use it as index of the list when I want to show the item from the list and add it to the ListView as a ListTile.

When I run the code it says the index is out of range and I really don't know what else should I take care of. Sorry if my question is basic, I am newbie.

My Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ToDo List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyTaskList(),
    );
  }
}

class MyTaskList extends StatefulWidget {

  @override
  _MyTaskListState createState() => _MyTaskListState();
}

class _MyTaskListState extends State<MyTaskList> {
  final _taskItems = <String>[];
  var _counter = 0;
  final myController = TextEditingController();


  @override
  void dispose(){
    myController.dispose();
    super.dispose();
  }

  void _addTask(String task){
    setState(() {
      _taskItems.add(task);
    });
    myController.clear();
  }


  Widget _buildTaskList() {
    return new ListView.builder(
        itemCount: _taskItems.length,
        itemBuilder: (BuildContext context, _) {
          print(_taskItems);
          return _buildTask(_taskItems[_counter]);

        }

    );

  }

  Widget _buildTask(String task) {

    return new ListTile(
      title: new Text(task),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(

        appBar: AppBar(

          title: Text("ToDo List"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (context) => AlertDialog(
              title: Text("New Task"),
              content: TextField(
                controller: myController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "Enter New Task",
                ),
              ),

              actions: <Widget>[
                TextButton(
                    onPressed: () => {
                      _addTask(myController.text),
                      Navigator.pop(context, "ok"),
                      _counter++,
                      print(_counter),
                      print(_taskItems),


                    },
                    child: const Text("OK")),

              ],
            )
          ),
          child: Center(child:Icon(Icons.add)),

        ),
        body: _buildTaskList(),
    );
  }
}

Answer 1

Edit as below. You can use the ListViewBuilder index, why do you use counter? I think, your initial counter value is 0 but the list is empty. You try to get element 0 (or first)` of empty list, but there is no element.

Widget _buildTaskList() {
    return new ListView.builder(
        itemCount: _taskItems.length,
        itemBuilder: (BuildContext context, index) {
          print(_taskItems);
          return _buildTask(_taskItems[index]);

        }

    );

  }