MacOS - bug system sound on tap inside RouterOutlet #984
Description
Describe the bug
Title
System sound on tap inside RouterOutlet
Platform
Applicable only to macOS (my version 15.3.1).
Description
I encountered this issue while using modular with RouterOutlet in a new Flutter project. The RouterOutlet is placed inside the widget tree and occupies the remaining screen space using Expanded(child: RouterOutlet()), where nested navigation takes place. It’s also done this way in the official documentation.
However, depending on the widget inside the RouterOutlet, some parts of the RouterOutlet area become unexpectedly clickable with a sound effect. This also applies when there's another nested RouterOutlet inside it.
The behavior is inconsistent:
- Text('123') inside RouterOutlet is not clickable with a sound.
- Row(children: [Text('123')]) inside RouterOutlet is clickable with a sound, except for the text itself.
Using Flutter DevTools, I noticed that the clicks triggering the sound effect are intercepted by a Listener widget inside RouterOutlet. However, this was determined indirectly, as the trigger doesn’t always occur precisely on that widget.
I checked for similar issues in both modular and Flutter repositories but couldn’t find anything relevant.
Question
Is there a way to disable this sound effect? I couldn’t find any relevant settings or documentation on this.
Environment
Add your flutter doctor -v
Add your pubspec.yaml
Add your Info.plist
Add your AppDelegate.swift
Add your MainActivity
not applicable
Add your AndroidManifest.xml
not applicable
Add your /app/res/values/strings.xml
not applicable
To Reproduce
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
void main() {
runApp(ModularApp(module: AppModule(), child: AppWidget()));
}
class AppWidget extends StatelessWidget {
const AppWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
theme: ThemeData(primarySwatch: Colors.blue),
routerConfig: Modular.routerConfig,
);
}
}
class AppModule extends Module {
AppModule();
@override
void routes(r){
r.child(
'/', child: (_) => HomePage(),children: [
ChildRoute('/text', child: (context) => Text('123')),
ChildRoute('/row', child: (context) => Row(children: [Text('123')],)),
ModuleRoute(SecondModule.route, module: SecondModule()),
],
transition: TransitionType.noTransition,
);
super.routes(r);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
SizedBox(
width: 200,
child: Column(
children: [
InkWell(
child: Text('Text'),
onTap: () => Modular.to.navigate('/text'),
),
InkWell(
child: Text('Row'),
onTap: () => Modular.to.navigate('/row'),
),
InkWell(
child: Text('Submodule'),
onTap: () => Modular.to.navigate(SecondModule.route),
),
],
),
),
Container(width: 1, color: Colors.black),
Expanded(child: RouterOutlet()),
],
),
);
}
}
class SecondModule extends Module {
static const route = '/second';
@override
void binds(i) {}
@override
void routes(r) {
r.child('/', child: (context) => SecondPage(), children: [
ChildRoute('/text', child: (context) => Text('123')),
ChildRoute('/row', child: (context) => Row(children: [Text('123')],)),
]);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Row(children: [
SizedBox(
width: 200,
child: Material(
child: Column(
children: [
InkWell(
child: Text('Text'),
onTap: () => Modular.to.navigate('${SecondModule.route}/text'),
),
InkWell(
child: Text('Row'),
onTap: () => Modular.to.navigate('${SecondModule.route}/row'),
),
],
),
)
),
Container(width: 1, color: Colors.black),
Expanded(child: RouterOutlet()),
]);
}
}
Expected behavior
Do not play unexpected system sound on mac os app
Screenshots
(turn on the sound on the video)