Why this toggle button not working in flutter - dart?

Question

I'm retrieving the boolean value for toggle button from model. The button is not switching between true and false in screen. I'm new to flutter please help me to solve this issue.

This is code I had given for toggle button.

Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5.0),
                        child: AnimatedContainer(duration: Duration(milliseconds: 1000),
                        height: 35.0,
                        width: 70.0,
                        decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(20.0),
                          color: TaskData().tasks[0].isOn ? Color(0xFF1F8BD0): Colors.grey[100]!.withOpacity(0.2)
                        ),
                          child: Stack(
                            children: <Widget>[
                              AnimatedPositioned(
                                  duration: Duration(milliseconds: 400),
                                curve: Curves.ease,
                                left: TaskData().tasks[0].isOn ? 30.0 : 0.0,
                                right: TaskData().tasks[0].isOn ? 0.0 : 30.0,
                                child: InkWell(
                                  onTap: (){
                                    setState(() {
                                      TaskData().tasks[0].isOn = !TaskData().tasks[0].isOn;
                                    });
                                  },
                                  child: AnimatedSwitcher(
                                    duration: Duration(milliseconds: 10),
                                    transitionBuilder: (Widget child, Animation<double> animation) {
                                      return ScaleTransition(child: child, scale: animation);
                                    },
                                    child: TaskData().tasks[0].isOn? Icon(Icons.circle, color: Colors.white, size: 35.0,
                                    key: UniqueKey(),
                                    ) : Icon(Icons.circle, color: Colors.white, size: 35.0,
                                    key: UniqueKey(),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )

This code is from Model:

class T{
final String tsk;
 bool isOn;

 T({required this.tsk, required this.isOn});
 }

class TaskData {
 List tasks = [
  T(tsk: "complete the work", isOn: false),
  T(tsk: "do the work", isOn: false),
  T(tsk: "do the pending works", isOn: false)
]
}

Solution

Every time you use TaskData() you create a new instance of that class with a new list of tasks.

You need to create a variable that holds a TaskData instance. Otherwise all changes you make will be pointless, as you create your data anew with every call.

At some point in your program you need a variable, maybe name it myTaskData:

final myTaskData = TaskData();

Then replace every call of TaskData() with myTaskData, so they all reference the same instance.

Please note that the build method is not the right place for that variable. It should be on class level of some kind of State class.

Comments

[gocaf19619]

can you provide me the code like how to implement your solution?

[nvoigt]

@gocaf19619 I did. If you need more info, you need to come up with a minimal reproducible example that I could modify.