How to hide AppBar dynamically on Double Tap?

Question

I want to dynamically hide and show App Bar on DoubleTap on Container with some animation on hiding, but the solution from this link doesn't work for my project: Flutter - How can I dynamically show or hide App Bars on pages

Image of the app:

Code:

import 'package:flutter/material.dart';

class GeneratedCouponScreen extends StatelessWidget {

  bool ShowAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ShowAppBar ? AppBar(
        title: Text('Makdolan Flutter'),
      ) : null ,
      backgroundColor: Colors.white,
      body: GestureDetector(
        onDoubleTap: () {
          ShowAppBar = false;
        },
        child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('DATA WYDANIA:', style: TextStyle(color: Colors.black),),
                  Text('10/09/2019', style: TextStyle(color: Colors.black))
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black)),
                  Text('e-86-tC-9', style: TextStyle(color: Colors.black))
                ],
              )
              ],
            ),
            Column(
              children: [
                SizedBox(height: 8.0),
                Image.asset('assets/images/coupon_hamburger.png',)
              ],
            )
          ],
        )
      ),
    ));
  }
}

Answer 1

Use setState

onDoubleTap: () {
  setState(() => ShowAppBar = false); // you missed setState
}

Update (Full code):

void main() => runApp(MaterialApp(home: YourPage()));

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _showAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar() : null,
      body: Center(
        child: GestureDetector(
          onDoubleTap: () => setState(() => _showAppBar = !_showAppBar),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

Answer 2

Change Widget type Stateless to Stateful Widget

Note: setState() work with statefull widget

void main() {
  runApp(
    MaterialApp(
      home:
     App(),
    ),
  );
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {

  bool showAppBar = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: showAppBar ? AppBar(
          title: Text('Makdolan Flutter'),
        ) : null ,
        backgroundColor: Colors.white,
        body: GestureDetector(
          onDoubleTap: () {
            setState(() {
              showAppBar = true;
            });
          },
           child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('DATA WYDANIA:', style: TextStyle(color: Colors.black),),
                          Text('10/09/2019', style: TextStyle(color: Colors.black))
                        ],
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black)),
                          Text('e-86-tC-9', style: TextStyle(color: Colors.black))
                        ],
                      )
                    ],
                  ),
                  Column(
                    children: [
                      SizedBox(height: 8.0),
                      Image.asset('assets/images/coupon_hamburger.png',)
                    ],
                  )
                ],
              )
          ),
        ));
}
}