flutterfeature-discovery

Flutter feature discovery - DescribedFeatureOverlay for BottomNavigationBarItems


I'm using the package feature_discovery at version ^0.12.1. In order to display the feature discovery overlay, I need to wrap the BottomNavigationBarItem with a DescribedFeatureOverlay. However the BottomNavigationBar's items require a list of type BottomNavigationBarItem:

Scaffold(
      [...]
      bottomNavigationBar: BottomAppBar(
        [...]
        child: BottomNavigationBar(
          [...]
          items: [
            DescribedFeatureOverlay( // This does not work because items requires type BottomNavigationBarItem
              [...]
              child: BottomNavigationBarItem(
                icon: Icon(item.icon),
                label: item.title,
              ),
            ),
          ],
        ),
      ),
    );

The valid code would be like this:

Scaffold(
  [...]
  bottomNavigationBar: BottomAppBar(
    [...]
    child: BottomNavigationBar(
      [...]
      items: [
        BottomNavigationBarItem( // need to wrap this with DescribedFeatureOverlay
          icon: Icon(item.icon),
          label: item.title,
        ),
      ],
    ),
  ),
);

I've been trying for so long now to find a solution to this. How can I wrap the BottomNavigationBarItem with the DescribedFeatureOverlay? Is this a limitation of Flutter or is there a way of doing this?

Do I need to copy, extend and modify the BottomNavigationBar class and use that one in order to achieve this?


Solution

  • As workaround you can wrap icon widget of BottomNavigationBarItem like that

     BottomNavigationBarItem(
                icon: DescribedFeatureOverlay(
                  featureId: item.featureId,
                  title: Text(item.title),
                  description: Text(item.description),
                  backgroundColor: item.color,
                  tapTarget: Icon(item.icon),
                  child: Icon(item.icon),
                ),
                label: item.title,
              );