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',)
              ],
            )
          ],
        )
      ),
    ));
  }
}

Why doesn't the linked solution work for your project? Also, you need to wrap `ShowAppBar = false;` in a call to `setState`. — Abion47, Sep 11 '19 at 18:59
I don't know why it doesn't work. I tried to show a Toast message on Double Tap and it worked, but it doesn't work for my App Bar. When it comes to setState, I cannot call this method, because my Widget is Stateless. Any idea how to do it? — szakes1, Sep 11 '19 at 19:03
Yes... make your widget a `StatefulWidget` and not a `StatelessWidget`. You can't change the data and/or appearance of a `StatelessWidget` dynamically within the widget itself. (That's what "Stateless" means.) — Abion47, Sep 11 '19 at 19:09

CopsOnRoad · Accepted Answer · 2019-09-15T04:51:40.447

5

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,
          ),
        ),
      ),
    );
  }
}

edited Sep 15 '19 at 04:51

answered Sep 11 '19 at 18:59

CopsOnRoad

237,138
77
654
440

I cannot call setState. Any idea how to do it? – szakes1 Sep 11 '19 at 19:05
Sorry I didn't get that, you weren't able to call `setState` or you don't want to call `setState`? – CopsOnRoad Sep 11 '19 at 19:06
I wasn't able to call setState. That's what I mean. The IDE throws this error: "The method 'setState' isn't defined for the class 'GeneratedCouponScreen'" – szakes1 Sep 11 '19 at 19:06
Ah I see, you are using `StatelessWidget` class, do one thing, hover your mouse to `StatelessWidget` and press `option/alt + enter/return` key, and IDE would show you to convert it to `StatefulWidget`. After that you can use `setState` – CopsOnRoad Sep 11 '19 at 19:08

Atul · Answer 2 · 2019-09-11T19:17:19.590

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',)
                    ],
                  )
                ],
              )
          ),
        ));
}
}

Great! That worked like a charm, but how to animate hiding the App Bar? Do you have a clue how to do it? — szakes1, Sep 11 '19 at 19:19
@szakes1 yes just checkout "AnimatedContainer" for animation — Atul, Sep 11 '19 at 19:22
Do you know how to wrap AppBar with AnimatedContainer widget? Using it on AppBar, it throws an error saying that it needs the AppBar widget. Do you know how to do it? — szakes1, Sep 12 '19 at 10:11

How to hide AppBar dynamically on Double Tap?

2 Answers2

Linked