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();
}}

Answer 1

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());