changing state In flutter in another class

Question

I am trying to make a todo list app which will create a Todo task appear when I click a plus button and disappear when I click the remove icon on the task. this code does that but the changes are not done in real time. a task will be added after I click the pulse button only if I save my code and run it, not as soon as I press it.

import 'package:flutter/material.dart';

import 'package:my_app/main.dart';


class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePage();
}

class _HomePage extends State<HomePage> {

  List TodoList = [];

  callback(varTodoList) {
    setState(() {
      TodoList = varTodoList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              flex: 5,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: TodoList.length,
                itemBuilder: (context, index) {
                  return TodoTasks(TodoList: TodoList, index: index, callback: callback);
                }
              ),
            ),
            
            Expanded(
              flex: 1,
              child: 
                AddButton(TodoList: TodoList, callback: callback)
            )
            
        ],
        )
      )
    );
  }
}


class TodoTasks extends StatelessWidget {

  List TodoList;
  int index;
  Function callback;

  TodoTasks({required this.TodoList, required this.index, required this.callback});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 300,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(30),

        boxShadow: [BoxShadow(
          color: Colors.grey.shade500,
          offset: Offset(4.0, 4.0),
          blurRadius: 15.0,
          spreadRadius: 1.0
          ),
          BoxShadow(
            color: Colors.white,
            offset: Offset(-4.0, -4.0),
            blurRadius: 15.0,
            spreadRadius: 1.0
          ),
        ]
      ),

      child:
        Row( children: [
          Expanded(
            flex: 11,
            child:
              Center(child: Text(TodoList[index], style: TextStyle(fontSize: 30))),
          ),

          Expanded(
            flex: 1,
            child:
              GestureDetector(
                onTap: () {
                    callback(TodoList.remove(TodoList[index]));
                },
                child: 
                  Container(
                    height: 30,
                    width: 30,
                    decoration: BoxDecoration(
                      color: Colors.grey[700],
                      borderRadius: BorderRadius.circular(30)
                    ),

                    child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
                  ),
            )
          )
          
        ]) 
    );
  }
}


class AddButton extends StatelessWidget {

  List TodoList = [];
  Function callback;

  AddButton({required this.TodoList, required this.callback});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
          callback(TodoList.add('toDo: '+ (TodoList.length + 1).toString()));                 
      },

      child: Container(
            height: 80,
            width: 80,
            margin: EdgeInsets.all(30),
            child: Icon(Icons.add,size: 50),
              
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                
                BoxShadow(
                  color: Colors.grey.shade500,
                  offset: Offset(4.0, 4.0),
                  blurRadius: 15.0,
                  spreadRadius: 1.0
                ),
                  
                BoxShadow(
                  color: Colors.white,
                  offset: Offset(-4.0, -4.0),
                  blurRadius: 15,
                  spreadRadius: 1
                ),
              ]
            ),
          ),
  );
  }
}

score 0 · Accepted Answer · answered Nov 04 '21 at 01:39

I will be better to include dataType on list. Check the code-snippet, you will get the point.


class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePage();
}

class _HomePage extends State<HomePage> {
  List<String> todoList = [];

  callback(varTodoList) {
    setState(() {
      todoList = varTodoList;
    });
    print(varTodoList.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              flex: 5,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: todoList.length,
                itemBuilder: (context, index) {
                  return TodoTasks(
                    todoList: todoList,
                    index: index,
                    callback: (v) {
                      print(v.toString());
                      callback(v);
                    },
                  );
                },
              ),
            ),
            Expanded(
              flex: 1,
              child: AddButton(
                  todoList: todoList,
                  callback: (v) {
                    callback(v);
                    print("OnAdd BTN: ${v.toString()}");
                  }),
            ),
          ],
        ),
      ),
    );
  }
}

class TodoTasks extends StatelessWidget {
  final List todoList;
  final int index;
  final Function callback;

  const TodoTasks({
    Key? key,
    required this.todoList,
    required this.index,
    required this.callback,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        width: 300,
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(30),
            boxShadow: [
              BoxShadow(
                  color: Colors.grey.shade500,
                  offset: Offset(4.0, 4.0),
                  blurRadius: 15.0,
                  spreadRadius: 1.0),
              BoxShadow(
                  color: Colors.white,
                  offset: Offset(-4.0, -4.0),
                  blurRadius: 15.0,
                  spreadRadius: 1.0),
            ]),
        child: Row(children: [
          Expanded(
            flex: 11,
            child: Center(
                child: Text(todoList[index], style: TextStyle(fontSize: 30))),
          ),
          Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  callback(
                    todoList
                      ..remove(
                        todoList[index],
                      ),
                  );
                },
                child: Container(
                  height: 30,
                  width: 30,
                  decoration: BoxDecoration(
                      color: Colors.grey[700],
                      borderRadius: BorderRadius.circular(30)),
                  child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
                ),
              ))
        ]));
  }
}

class AddButton extends StatelessWidget {
  final List<String> todoList;
  final Function(List<String>) callback;

  AddButton({
    Key? key,
    required this.todoList,
    required this.callback,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print("ONPressed : ${todoList.length}");

        callback(
          // passing new list with including one
          todoList
            ..add(
              'toDo: ' + (todoList.length + 1).toString(),
            ),
        );
      },
      child: Container(
        height: 80,
        width: 80,
        margin: EdgeInsets.all(30),
        child: Icon(Icons.add, size: 50),
        decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                  color: Colors.grey.shade500,
                  offset: Offset(4.0, 4.0),
                  blurRadius: 15.0,
                  spreadRadius: 1.0),
              BoxShadow(
                  color: Colors.white,
                  offset: Offset(-4.0, -4.0),
                  blurRadius: 15,
                  spreadRadius: 1),
            ]),
      ),
    );
  }
}

BTW, you simplify the code structure just having callback without passing list. — Md. Yeasin Sheikh, Nov 04 '21 at 01:49
why does adding ```todoList..remove``` work instead of ```todoList.remove``` — smileawe123, Nov 04 '21 at 12:20
`..` known as [cascade-notation](https://dart.dev/guides/language/language-tour#cascade-notation-) . My assumption is we are getting the list as final and can't be modified. While using `..` we create a new list including those values. You can check [this](https://stackoverflow.com/a/49447893/10157127) — Md. Yeasin Sheikh, Nov 04 '21 at 12:36

changing state In flutter in another class

1 Answers1