Question 78640 in Flutter Question posted in
The official Flutter documentation can be found here.

Show and Hide AppBar on Screen Tap in Flutter

enter image description here enter image description here

I want like the Above images.
I want to create an app that will Hide and Show the AppBar and Bottom bar of the app on-screen tap.

so I tried It by SetState method and worked great but The Problem is with this only

When AppBar Hides the App Content Goes Up but I want that My Content should be fixed.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showAppBar = true;
  bool _showBottomBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : null,
      bottomNavigationBar: _showBottomBar ? BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      ]) : null,
      body: SafeArea(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _showAppBar = !_showAppBar;
              _showBottomBar = !_showBottomBar;
            });
          },
          child: Image.network('https://img.freepik.com/free-vector/funny-monkey-animal-cartoon-sticker_1308-75307.jpg?w=2000'),
        ),
      ),
    );
  }
}
Tags:

4

Answers


  1. 0

    You can use preferred size widget instead of appbar as below code and then you can change height as per your use

    appBar:_showAppBar 
? PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: Container(color: Colors.red) 
: PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: Container(color: Colors.transparent),
),
    Login or Signup to reply.
  2. 0

    If You click on Widget the appbar is hide your appbar is hide successfully but you return it null please change this below hope its help to you.

    appBar: _showAppBar ? AppBar(title: Text('My App')) : AppBar(backgroundColor: Colors.transparent,),

    Full Code:

    class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showAppBar = true;
  bool _showBottomBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : AppBar(backgroundColor: Colors.transparent,),
      bottomNavigationBar: _showBottomBar ? BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      ]) : null,
      body: SafeArea(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _showAppBar = !_showAppBar;
              _showBottomBar = !_showBottomBar;
            });
          },
          child: Image.network('https://img.freepik.com/free-vector/funny-monkey-animal-cartoon-sticker_1308-75307.jpg?w=2000'),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    Wrap your whole body with Padding and toggle it when you hide the appBar and bottomNavigationBar like so:

    class _MyHomePageState extends State<MyHomePage> {
  bool _showAppBar = true;
  bool _showBottomBar = true;

  double appBarHeight = 56.0; // default appBar height

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : null,
      bottomNavigationBar: _showBottomBar
          ? BottomNavigationBar(items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search), label: 'Search'),
            ])
          : null,
      body: Padding(
        padding: EdgeInsets.symmetric(vertical: _showAppBar ? 0 : appBarHeight),
        child: SafeArea(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _showAppBar = !_showAppBar;
                _showBottomBar = !_showBottomBar;
              });
            },
            child: Image.network(
                'https://img.freepik.com/free-vector/funny-monkey-animal-cartoon-sticker_1308-75307.jpg?w=2000'),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  4. 0

    Try doing this way

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,

    Then show or hide appbar normally. Use animations for smoother effects.

    Adding extendBodyBehindAppBar: true will ensure that the body won’t go up or down when showing or hiding appbar.

    Ensure that your body is having height equal to height of screen.
    Do this by wrapping the body in a Container, then setting height to MediaQuery.of(context).size.height.

    You will have to make some adjustments such as adding empty space at the top of body to avoid appbar covering the body.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search