如何在 Flutter 中使用 GestureDetector 隐藏 appBar？

Question

I have been trying to hide the AppBar in Flutter using GestureDetector widget whenever I tap on the screen.

But it's not working. Following are my codes:

import 'package:flutter/material.dart';

// This is the page widget
class PageWidget extends StatefulWidget {
  final String title;
  PageWidget({Key key, this.title}) : super(key: key);

  @override
  _PageWidgetState createState() => _PageWidgetState();
}

class _PageWidgetState extends State<PageWidget> {
  Widget build(BuildContext context) {
    // making the AppBar
    bool _showAppBar = true;
    final appBar = AppBar(
      title: Text("Page one"),
      centerTitle: true,
      backgroundColor: Colors.teal,
    );
    final body = Container(
      child: GestureDetector(
        onTap: () {
          setState(() => {_showAppBar = !_showAppBar});
          print("This GestureDetector");
        },
        behavior: HitTestBehavior.translucent,
        // content of the page.
        child: SingleChildScrollView(
        ),
      ),
    );
    
    return Scaffold(
      appBar: _showAppBar ? appBar : null,
      body: body,
    );
  }
}

What's going on here?

Answer 1

You must move bool _showAppBar = true; to be outside the build of the widget. When state updates, it rebuilds the widget. Hence you always end up with true on the variable. Like this:

class _PageWidgetState extends State<PageWidget> {
  bool _showAppBar = true;

  Widget build(BuildContext context) {
    final appBar = AppBar(
      title: Text("Page one"),
      centerTitle: true,
      backgroundColor: Colors.teal,
    );