fix: `NavigationBar` items are not found by Fluttium
Thithip opened this issue · comments
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.
Hmm interesting, I will have to look into how that Widget sets up the semantics values then. Fluttium is already checking the label semantic 🤔
@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 #225 (comment).
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?
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
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 😉
@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.
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
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