fix: `NavigationBar` items are not found by Fluttium

[Thithip]

Description

Fluttium don't find semantics from nether NavigationBar nor BottomNavigationBar items. I'm not able to perform actions like expectVisible or pressOn for items in the NavigationBar.

Steps To Reproduce

Please consider this minimal example to reproduce: main.dart file (with NavigationBar as bottomNavigationBar widget for the Scaffold)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(title: 'Fluttium NavBar Semantic Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int _currentPageIndex = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _currentPageIndex,
        onDestinationSelected: (newPageIndex) => setState(() {
          _currentPageIndex = newPageIndex;
        }),
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Bookmarks'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

main.dart file (with BottomNavigationBar as bottomNavigationBar widget for the Scaffold)

[...]
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPageIndex,
        onTap: (newPageIndex) => setState(() {
          _currentPageIndex = newPageIndex;
        }),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Bookmarks'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
      body: [...]

flows/navbar_semantics_flow.yaml Fluttium flow flie:

description: NavBar Semantics test flow
---
# AppBar title
- expectVisible: "Fluttium NavBar Semantic Test"

# NavBar items
- expectVisible: "Home"
- expectVisible: "Bookmarks"
- expectVisible: "Settings"

Command line to reproduce: fluttium test flows/navbar_semantics_flow.yaml

Expected Behavior

Fluttium actions like expectVisible or pressOn should be able to perform on NavigationBar items.

Screenshots App:

Fluttium prompt:

[wolfenrain]

Hmm interesting, I will have to look into how that Widget sets up the semantics values then. Fluttium is already checking the label semantic 🤔

[matthiasn]

@Thithip @wolfenrain I had a similar issue except for tapping the BottomNavigationBarItem but I would expect the expectVisible assertion to work as well when the respective icon is tappable. The fix was to wrap the icon in a Semantics widget as described in https://github.com/wolfenrain/fluttium/issues/225#issuecomment-1504036660.

[Thithip]

Hey, thank you @matthiasn !! This is a great workaround !

Maybe this should work without adding a Semantic Widget around the icon. But this is maybe a Flutter issue?

[wolfenrain]

Hey, thank you @matthiasn !! This is a great workaround !

Maybe this should work without adding a Semantic Widget around the icon. But this is maybe a Flutter issue?

Indeed I would also expect it to work without the semantic widget, I'll have to take a look at the resulting semantics tree to see what values are being set within the BottomNavigationBarItem, but I suspect they are omitting some of the labeling needed for the icons.

PS: Sorry for the late reply

[Thithip]

Can you provide me some hints to look into the resulting semantics tree, I would help you with this (at minimum, I want to understand how to find more clues of this issue)? This is through the DevTools utility? Because I never found a "tree" of semantics here, and it's hard to me to provide you more information of this issue (except the minimal reproducible example).

PS: No worries, this is not urgent. Please take care of you 😉

[AhmedAlyDev]

@wolfenrain @Thithip I had the same issue.Acions ate not working on destinations of the flutter AdaptiveScaffold. any updates?

I had also tried to wrap icon with Semantics and to use Icon attribute semanticLabel without any progression.

[k-ane]

Not sure why, but I've discovered there are cases where setting the label property of Semantics does not work, but hint or tooltip do work. Might be helpful to someone

[k-ane]

Also if you go to MaterialApp and set showSemanticsDebugger to true, it's really helpful for seeing what the Semantic makeup of your widget tree is