I have a row which includes 3 icons, but one of them needs to be shown if notes have been added, but hidden if there are no notes.

I tried to use Visibility but couldn’t get it right. If there are no notes, I need to use a SizedBox() so everything else stays aligned correctly.

What’s the right way to do this?

    Expanded(
      flex: 14,
      child: Center(
        child: GestureDetector(
          onTap: () {
            print(data[index].rosterId);
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ShiftsForRoster(
                  rId: data[index].rosterId,
                ),
              ),
            );
          },
          child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
        ),
      ),
    ),

>Solution :

I can’t see in your code snippet, how you check if you have notes or not. I used a bool "notestExist", check if it’s true and show your icon, else show an empty Container. You could also do something like notes.length != 0

  Expanded(
  flex: 14,
  child: notesExist ? Center(
    child: GestureDetector(
      onTap: () {
        print(data[index].rosterId);
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ShiftsForRoster(
              rId: data[index].rosterId,
            ),
          ),
        );
      },
      child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
    ),
  ) : Contaniner()
),