Using Flutter GetX the display of the item inside the visibility widget is not toggled

Question

I am new to using GetX in Flutter and I am trying to toggle the display of the contents by using unfold bool, a floating action button and a visibility widget. Unfortunately, it is not working. The unfolded value changes but the contents are not hidden. Here is the code:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';

import 'note_controller.dart';

class HomeScreen extends StatelessWidget {
  static Route route() => MaterialPageRoute(builder: (_) => HomeScreen());
  var noteController = Get.put(NoteController());
  RxBool unfold = false.obs;
  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Notes'),
        actions: [
          CircleAvatar(
            backgroundColor: Colors.blue.shade200,
            child: Obx(
              () => Text(
                noteController.notes.value.length.toString(),
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),
              ),
            ),
          ),
          const SizedBox(
            width: 10,
          ),
        ],
      ),
      body: Obx(
        () => ListView.separated(
          itemCount: noteController.notes.value.length,
          separatorBuilder: (context, index) => const Divider(
            color: Colors.blueGrey,
          ),
          itemBuilder: (context, index) => ListTile(
            trailing: SizedBox(
              width: 110.0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                    icon: const Icon(Icons.edit, color: Colors.blue),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: const Icon(
                      Icons.delete,
                      color: Colors.blue,
                    ),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
            title: Text(noteController.notes.value[index].title!),
            subtitle: Visibility(
              child: Text(noteController.notes.value[index].content!),
              visible: !unfold.value,
            ),
            onTap: () {},
            onLongPress: () {},
          ),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Obx(
            () => FloatingActionButton(
                heroTag: "btn1",
                child:
                    unfold.value ? Icon(Icons.menu) : Icon(Icons.unfold_less),
                tooltip: unfold.value
                    ? 'show more. reveals notes content'
                    : 'Show less. Hide notes content',
                onPressed: () {
                  unfold.value = !unfold.value;
                }),
          ),
          /* Notes: for the "Show More" icon use: Icons.menu */

          FloatingActionButton(
            heroTag: "btn2",
            child: const Icon(Icons.add),
            tooltip: 'Add a new note',
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

Answer 1

Wrap the Visibility with an Obx as well. It's going to be like the following:

subtitle: Obx(
  () => Visibility(
    child: Text(noteController.notes.value[index].content),
    visible: !unfold.value,
  ),
),