Reputation: 83
How can I hide the bottom navigation bar and App bar on a specific page in my flutter Application?
I want result like https://i.ibb.co/Pmqfc9T/video-recording.gif
Upvotes: 0
Views: 484
Reputation: 420
Try to use this code.
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isHide = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: !isHide
? AppBar(
title: Text(widget.title),
)
: null,
bottomNavigationBar: !isHide
? BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(backgroundColor: Colors.black, label: "Test", icon: Icon(Icons.add)),
BottomNavigationBarItem(label: "Test1", icon: Icon(Icons.add)),
BottomNavigationBarItem(label: "Test2", icon: Icon(Icons.add)),
BottomNavigationBarItem(label: "Test3", icon: Icon(Icons.add)),
],
)
: null,
body: Center(
child: TextButton(
onPressed: () {
setState(() {
isHide = !isHide;
});
},
child: Text(isHide ? "Show" : "Hide")),
),
);
}
}
Here is video of how this code will works.
https://drive.google.com/file/d/1jvuns-EB9uyh_M1jFd62Q-qL55k_PeeR/view?usp=share_link
I Hope these things are solve your issue.
Upvotes: 2