Ternary operator not changing state

Question

There is a text displaying the scheduled time, Basically, the color of the text should change depending on the time, so if the scheduled time is in the future then it should not change its color and if it's in the past then its color should change to red. The scheduled time is when the notification should appear and when the notification appears it should change, the ternary operation works properly but only when I click another widget to change its state, it does not change the state on its own. I am using getx so I also tried Obx but that didn't work. How can I resolve this?

                 Visibility(
                            visible: todoController.todos[index].date ==
                                        '' &&
                                    todoController.todos[index].time == ''
                                ? false
                                : true,
                            child: Obx(() => Text(
                                (todoController.todos[index].date != now)
                                    ? '${todoController.todos[index].date!}, ${todoController.todos[index].time}'
                                    : 'Today, ${todoController.todos[index].time}',
                                style: GoogleFonts.notoSans(
                                  color: (run(
                                                  todoController
                                                      .todos[index].date,
                                                  todoController
                                                      .todos[index].time)
                                              .compareTo(tz.TZDateTime.now(
                                                  tz.local)) >
                                          0)
                                      ? Theme.of(context).hintColor
                                      : Colors.redAccent,
                                  fontSize: 20.0,
                                  decoration:
                                      (todoController.todos[index].done)
                                          ? TextDecoration.lineThrough
                                          : TextDecoration.none,
                                ))),
                          )

TodoController:

class TodoController extends GetxController {
 var todos = <Todo>[].obs;

 @override
 void onInit() {
  List? storedTodos = GetStorage().read<List>('todos');

if (storedTodos != null) {
  todos = storedTodos.map((e) => Todo.fromJson(e)).toList().obs;
}
ever(todos, (_) {
  GetStorage().write('todos', todos.toList());
});
super.onInit();
}}

Solution

You need to move your Obx widget up and wrap the Visibility widget with it:

Obx(()=> Visibility(....));

Update

You have problem with this line:

todos = storedTodos.map((e) => Todo.fromJson(e)).toList().obs;

Instead of re-assigning the Rx variable itself, you should assign the data to the Rx variables value:

todos.assignAll(storedTodos.map((e) => Todo.fromJson(e)).toList());

Comments

[Faiz Shahid]

Please provide controller code also for better understanding

[Rohith Nambiar]

I am using getx

[John Joe]

did you wrap your widget with Obx?

[Rohith Nambiar]

Yes but that didn't work

[John Joe]

Show us how you wrapped your widget with Obx.

[Rohith Nambiar]

Still doesn’t work

[S. M. JAHANGIR]

Verify that your ternary produces expected results.

[Rohith Nambiar]

It works as expected, but the only problem is it does not change state, Only when I press another widget to change the state, it changes its state

[S. M. JAHANGIR]

Got it! Check the updated answer.