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

Adding widget to list doesn't update on the screen – Flutter

Helllo, can someone explain it to me, why when I press the buttons to add/remove a new task (elevated buttons at the end of the first code) the screen is not updated? I need to hit hot reload to see the new task, when I print the taskList I see the new task

Helllo, can someone explain it to me, why when I press the buttons to add/remove a new task (elevated buttons at the end of the first code) the screen is not updated? I need to hit hot reload to see the new task, when I print the taskList I see the new task


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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Task> taskList = [
    Task(
        nome: "Aprender Flutter",
        imageSrc: "assets/images/fluttericon.png",
        diff: 5),
    Task(nome: "Meditar", imageSrc: "assets/images/ying.jpg", diff: 4),
    Task(nome: "Task 3", diff: 3),
  ];
  bool opacidade = true;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: AnimatedOpacity(
          opacity: opacidade ? 1 : 0,
          duration: const Duration(milliseconds: 500),
          child: ListView(
            children: taskList,
          ),
        ),
        persistentFooterButtons: [
          ElevatedButton(
              onPressed: () {
                setState(() {
                  opacidade = !opacidade;
                });
              },
              child: opacidade
                  ? const Icon(Icons.remove_red_eye_outlined)
                  : const Icon(Icons.remove_red_eye)),
          ElevatedButton(
              onPressed: () {
                setState(() {
                  taskList.add(Task(nome: 'New Task', diff: 1));
                });
              },
              child: const Icon(Icons.add_task)),
          ElevatedButton(
              onPressed: () {
                setState(() {
                  int i = taskList.length - 1;
                  taskList.removeAt(i);
                  print(taskList);
                });
              },
              child: const Icon(Icons.delete_sharp))
        ],
      ),
    );
  }
}


class Task extends StatefulWidget {
  final String nome;
  final String? imageSrc;
  final int diff;

  const Task({Key? key, required this.nome, required this.diff, this.imageSrc})
      : super(key: key);

  @override
  State<Task> createState() => _TaskState();
}

class _TaskState extends State<Task> {
  int nivel = 0;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(6.0),
      child: Stack(
        children: [
          Container(
            height: 140,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5), color: Colors.blue),
          ),
          Column(
            children: [
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.grey.shade200),
                height: 100,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.black),
                      width: 85,
                      height: 100,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(5),
                        child: Image.asset(
                          widget.imageSrc ??
                              "assets/images/no.png",
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    Container(
                      width: 200,
                      alignment: Alignment.centerLeft,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(widget.nome,
                              style: const TextStyle(
                                  fontSize: 25,
                                  overflow: TextOverflow.ellipsis)),
                          Difficulty(difficulty: widget.diff)
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: SizedBox(
                        height: 50,
                        width: 58,
                        child: ElevatedButton(
                            onPressed: () {
                              setState(() {
                                nivel++;

                                if (nivel >= (widget.diff * 10)) {
                                  nivel = (widget.diff * 10);
                                }
                              });
                            },
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: const [
                                Icon(Icons.keyboard_double_arrow_up),
                                Text(
                                  "Up",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10),
                                )
                              ],
                            )),
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(
                        width: 200,
                        child: LinearProgressIndicator(
                          color: Colors.white,
                          value: (nivel / widget.diff) / 10,
                        )),
                    Text("Nível: $nivel",
                        style:
                            const TextStyle(color: Colors.white, fontSize: 15)),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    The listview builder should solve your problem. Change ListView to this one

    ListView.builder(
  itemCount: taskList.length,
  itemBuilder: (context, index) {
    return taskList[index];
  }
)
    Login or Signup to reply.
  2. 0

    use ListView builder so that it keeps your list updated.
    use index for removing particular item.

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

    and remove item like this:

    taskList.removeAt(index);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search