Yogesh Dubey
Yogesh Dubey

Reputation: 83

Hide Appbar and Bottom navigation bar

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

Answers (1)

Romil Mavani
Romil Mavani

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

Related Questions