Show (slide in) or hide (slide out) flutter AppBar on screen tap

Question

Please I am trying to create this effect where the AppBar slides out when the screen is tapped and slides in when it is tapped again.

I am able to create something similar in SliverAppBar by setting floating and snap to true. The difference is that the appBar shows when scrolling down and hides when screen is tapped or scrolled up.

Here is the sample code for the SliverAppBar:

 @override
  Widget build(BuildContext context) {

    return Scaffold(
          body: CustomScrollView(
            controller: _ctrlr,

                slivers: <Widget>[
                  SliverAppBar(
                    floating: true,
                    snap: true,

                  ),
                  SliverList(
                    delegate: SliverChildListDelegate([
                      Text('1', style: TextStyle(fontSize: 160.0),),
                      Text('2', style: TextStyle(fontSize: 160.0),),
                      Text('3', style: TextStyle(fontSize: 160.0),),
                      Text('4', style: TextStyle(fontSize: 160.0),),
                    ]),
                  )
                ],
        ),
    );
  }  

How can I be able to achieve this? I also considered placing the AppBar in a Stack but i don't think that is the best approach. Your help will be greatly appreciated!

Solution 1

I came upon a similar need, and discovered your question. Since there were no answers, I took it upon myself to try and solve the problem. I know you asked this 6 months ago, but I'm putting in an (nearly complete) answer in case anybody else happens upon it.

(I apologize if my approach is less than elegant, but as of this writing, I've only been using Flutter for about a week. :)

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class FramePage extends StatefulWidget {
  final String title;
  final String imageUrl;

  FramePage({Key key, this.title, this.imageUrl}) : super(key: key);

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

class _FramePageState extends State<FramePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _appBarVisible;

  @override
  void initState() {
    super.initState();

    _appBarVisible = true;
    _controller = AnimationController(
      duration: const Duration(milliseconds: 700),
      value: 1.0,
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggleAppBarVisibility() {
    _appBarVisible = !_appBarVisible;
    _appBarVisible ? _controller.forward() : _controller.reverse();
  }

  Widget get _imageWidget {
    return Center(
      child: GestureDetector(
      onTap: () => setState(() { _toggleAppBarVisibility(); } ),
      child: Container(
          foregroundDecoration: new BoxDecoration(color: Color.fromRGBO(155, 85, 250, 0.0)),
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: widget.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context)
  {
    Animation<Offset> offsetAnimation = new Tween<Offset>(
      begin: Offset(0.0, -70),
      end: Offset(0.0, 0.0),
    ).animate(_controller);

    return Scaffold(
      body: Stack(
        children: <Widget>[
          _imageWidget,
          SlideTransition(
            position: offsetAnimation,
            child: Container(
              height: 75,
              child: AppBar(
                title: Text(widget.title),
              ),
            ),
          ),
        ],
      )
    );
  }
}

Essentially, the AppBar is removed as a direct part of the Scaffold, and instead is added to the Stack, where it can actually be animated. In order to make sure the image is visible behind it, it is placed into a Container so it's height can be controlled (otherwise, you would not be able to see the image).

In my code above, tapping on the image makes the AppBar retract, and tapping again makes it re-appear. For some reason, though, I haven't been able to actually get it to smoothly animate forward and back, but the effect is there.

In practice, it looks like this:

If somebody figures out (before I do) what I've missed to make it animate smoothly, please feel free to help out.

Solution 2

Just replace the SlideTransition in Bob H.'s solution with an AnimatedBuilder and a Transform.translate widget:

                          animation: offsetAnimation,
                          builder: (context, child) {
                            return Transform.translate(
                                offset: offsetAnimation.value,
                                child: Container( ....```