Not updating state of SpeedDialChild (flutter_speed_dial: ^7.0.0)

Question

I'm trying to update SpeedDialChild icon value based on a boolean value.

final showCriticalPoint = useState(false);

                  SpeedDial(
                          isOpenOnStart: true,
                          closeManually: true,
                          renderOverlay: false,
                          closeDialOnPop: false,
                          direction: SpeedDialDirection.down,
                          backgroundColor: Colors.white,
                          activeIcon: Icons.close,
                          iconTheme: IconThemeData(color: themeData.colorScheme.secondary),
                          icon: Icons.menu_outlined,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          buttonSize: const Size(48, 48),
                          childrenButtonSize: const Size(48, 48),
                          spacing: 4,
                          children: [
                            SpeedDialChild(
                              child: Icon(
                                showCriticalPoint.value ? Icons.report_off_outlined : Icons.report_outlined,
                                color: Colors.white,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              backgroundColor: Colors.red,
                              onTap: () {
                                showCriticalPoint.value = !showCriticalPoint.value;
                              },
                            ),
                            
                          ],
                        ),

in children I wanted to change icon when its tapped

SpeedDialChild(
                              child: Icon(
                                showCriticalPoint.value ? Icons.report_off_outlined : Icons.report_outlined,
                                color: Colors.white,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              backgroundColor: Colors.red,
                              onTap: () {
                                showCriticalPoint.value = !showCriticalPoint.value;
                              },
                            ),

but it's not updating icon state. how can I update icon state without closing speed dial menu?

Answer 1

It appears like SpeedDial is preserving it's context.
Do the following,

final showCriticalPoint = useState(false);
var myGlobalKey = GlobalKey();
....
SpeedDial(
key: myGlobalKey,
....
// Inside onTap
onTap: () {
  setState(() {
    myGlobalKey = GlobalKey();
    showCriticalPoint.value = !showCriticalPoint.value;
  });
},

This will force SpeedDial to loose previous context and render updated values in the UI.