I can't click on Buttons in Appbar - flutter

Question

I have created a custom appbar that contains buttons.The Problem is I cannot click on these buttons. I have checked the buttons with an output but not happened.
main.dart
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',
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) {
return const HomeScreen();
},
'/archive': (BuildContext context) {
return const ArchiveScreen();
}
},
);
}
}
HomeScreen.dart
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: const [
Indexed(
index: 10,
child: Positioned(bottom: 0, left: 0, child: BottomNav()),
),
Indexed(
index: 1,
child: Positioned(
bottom: 0,
left: 0,
right: 0,
top: 0,
child: Text("hallo"),
),
),
],
),
),
);
}
}
BottomBar.dart
class BottomNav extends StatefulWidget with PreferredSizeWidget {
const BottomNav({super.key});
#override
Size get preferredSize => const Size.fromHeight(70.0);
#override
State<BottomNav> createState() => _BottomNavState();
}
class _BottomNavState extends State<BottomNav> {
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 60,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 1.0, color: Color(0xFF999999)),
),
color: Color(0xFFF0F1F4),
),
child: Stack(
children: [
Align(
alignment: const Alignment(0, -0.5),
child: SizedBox(
width: 0,
height: 0,
child: OverflowBox(
minWidth: 0.0,
maxWidth: 100.0,
minHeight: 0.0,
maxHeight: 100.0,
child: Container(
width: 64,
height: 64,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
color: Color(0xFF00007F)),
child: IconButton(
icon: SvgPicture.asset('assets/icons/search-navbar.svg'),
tooltip: 'Increase volume by 10',
onPressed: () => {
Navigator.pushNamed(context, '/'),
debugPrint("home")
},
),
),
),
),
),
Align(
alignment: const Alignment(-0.8, 0),
child: IconButton(
icon: SvgPicture.asset('assets/icons/archive.svg'),
tooltip: 'Increase volume by 11',
onPressed: () => {
Navigator.pushNamed(context, '/archive'),
debugPrint("archive")
},
),
),
],
),
);
}
}
My first thought was that the cause is the stack and there is an element above the button. So I removed all the elements so that there was only one button in the appbar, but it didn't help.

Answer 1

change
onPressed: () => {
Navigator.pushNamed(context, '/'),
debugPrint("home")
},
to
onPressed: () {
Navigator.pushNamed(context, '/');
debugPrint("home");
},
and moreover, you can set BottomNavigationBar like this, it is easier than your Stack implementation
Scaffold(
bottomNavigationBar: BottomNav(),
// your body
)

Answer 2

you should find another solution, because your second Indexed with "hallo" is above the BottomNav and it covers the entire area.
I made it red so you can see it when you start the application
Stack(
children: [
const Indexed(
index: 10,
child: Positioned(bottom: 0, left: 0, child: BottomNav()),
),
Indexed( /// <- this widget is above the BottomNav and it covers the entire area
index: 1,
child: Positioned(
bottom: 0,
left: 0,
right: 0,
top: 0,
child: Container(
color: Colors.red,
child: Text("hallo"),
),
),
),
],
)

Answer 3

I got a Solution. It was a Combination of multiple problems. Like #Stellar Creed said, the Container was above my AppBar.
Another Problem was that I put SizedBox to width: 0 and height: 0.
Align(
alignment: const Alignment(0, -0.5),
child: SizedBox(
width: 0,
height: 0,
child: OverflowBox(
minWidth: 0.0,
maxWidth: 100.0,
minHeight: 0.0,
maxHeight: 100.0,
child: Container(
width: 64,
height: 64,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
color: Color(0xFF00007F)),
child: IconButton(
icon: SvgPicture.asset('assets/icons/search-navbar.svg'),
tooltip: 'Increase volume by 10',
onPressed: () {
/* Navigator.pushNamed(context, '/'); */
debugPrint("home");
}),
),
),
),
),