Undefined name 'task' isn't letting my app run

Question

I am having a problem running my app. I am trying to create a todolist app but I am new to coding so I am battling. I am not sure where the problem is. I a using Android Studio I have two files and I have put all the code in here except the import and run code. I have tried fixing all the errors but they just seem to cause more. I cannot run my app. (I have removed brackets in places as there is too much code when posting this question) Please can you help me out.

main.dart:

import 'package:flutter/material.dart';
import 'Task_Card.dart';

void main() {
  runApp(MaterialApp(
    home: TaskList(),
  ));
}

class TaskList extends StatefulWidget {

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

class _TaskListState extends State<TaskList> {

final task = Task('Grocery');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      appBar: AppBar(
        title: Text('ToDoList'),
        centerTitle: true,
        backgroundColor: Colors.grey[900],
      ),
      body: SingleChildScrollView(
        child: Column(),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.black,
        onPressed: () {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => TaskCard(
              task: task,
              done: () {}
              ,)
            ),
          );},
        child: Icon(
          Icons.add
        ),
      ),
    );
  }
}

class Task {

  late String task;

  Task(this.task);

}

Task_Card.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Task {

  String task;

  Task(this.task);

}

class TaskCard extends StatelessWidget {

  final Task task;
  final Function() done;
  TaskCard({required this.task, required this.done});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              task.task,
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[900],
              ),
            ),
            SizedBox(height: 6.0,),
            TextButton.icon(
              onPressed: done,
              label: Text(
                'Delete Quote',
              ),
              style: TextButton.styleFrom(
                primary: Colors.black,
              ),
              icon: Icon(
                Icons.delete,
                color: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the error:

Answer 1

I hope you have a task model in your project. If it's not there create one (Just adding an example model, you need to create one based on your own requirement):

class Task {
   String task;
   
   Task(this.task);
}

In your TaskListState create an instance of this model:

class _TaskListState extends State<TaskList> {
    final task = Task('Grocery');

    // Remaining code
}

Note: The above code will always show Grocery, in your actual app you may need to dynamically create the task object with actual value.

Answer 2

Try this

Undefined 'task' usually means that the item referenced has no definition. Did you remember to create a separate Task class (in a data file) and import that file into the file throwing the error?

You'll also need to initialize the task data somewhere before using it.

I do not see where you pass the initialized task into your argument defined in your widget. You might want to override initState in the state widget to initialize the Task so that it is not null or pass a new task to the widget when you call it on your Navigator.

Finally in the State Content class you will want to refer to the task as widget.task because the final variable is only accessible by reference through widget.task.

To be clear:

You are currently doing this:

MaterialPageRoute(builder: (context) => TaskCard(
              task: task,
              done: () {}
              ,)

The problem is that you never initialized the task object. Even this might work (its hard to say since I don't see. the Task.dart file at this point).

 MaterialPageRoute(builder: (context) => TaskCard(
              task: Task(),
              done: () {}
              ,)

Even better before you return Scaffold you could create a new task object and evaluate the data from inside the done completion handler.

Task mytask = Task();
...
return Scaffold

and then send that initialized task into the widget while evaluating any properties on the done completion handler.

MaterialPageRoute(builder: (context) => TaskCard(
              task: mytask,
              done: () {
                 print(mytask.prop1);
 }
          ,)

Answer 3

please try this:

   ...

   Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => 
         TaskCard(task: widget.task, done: () {})

   ...

instead of

   ...

   Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => 
         TaskCard(task: task, done: () {})

   ...