CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
user1734642
user1734642

Reputation: 77

How do I make the AppBar slide from top and overlay the screen content, just like inshorts app bar

I am trying to make the AppBar slide from top and show it on screen tap and then hide after 10 seconds.

I am currently doing it by showing the Appbar based on a boolean variable value and it is working also, but when the AppBar comes, the screen is resized to fit the AppBar. I want that my screen should remain as is and the AppBar just overlay on the screen, Just like a banner. 

_showAppBar(bool val) {
        setState(() {
          if (val) {
            _barVisible = true;
            print("show");
          }
          else {
            _barVisible = false;
            print("hide");
          }
        });
      }

Widget build(BuildContext context) {
    return Theme(
        data: getCurrentTheme(),
        child: Scaffold(
            key: _scaffoldKey,
            appBar: _barVisible ? buildAppBar():null,
            body: buildBody()
        ));
  }

buildAppBar() {
    Color accentColor = currentSelectedTheme == MyThemes.defaultLight ? Colors.white : getAccentColor();
    return AppBar(
      leading: Text(appBarTitle, style: TextStyle(color: accentColor)),
      actions: <Widget>[
        IconButton(
            icon: Icon(
                _nightMode ? Icons.lightbulb_outline : Icons.brightness_2
            ),
            padding: EdgeInsets.fromLTRB(0.0, 0.0, 16.0, 0.0),
            iconSize: 32.0,
            onPressed: () => print("hi")
      ],
    );
  }

Upvotes: 1

Views: 1354

Answers (1)

bytesizedwizard
bytesizedwizard

Reputation: 6033

Scaffold won't help you to achieve what you're looking for. Use the AppBar in a Stack instead. Try something like this:

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: getCurrentTheme(),,
      child: Scaffold(
          key: _scaffoldKey,
          body: Stack(
            children: <Widget>[
              buildBody(),
              /*Below is the new AppBar code. Without Positioned widget AppBar will fill entire screen*/
              Positioned( 
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: _barVisible ? buildAppBar() : Container(width: 0, height: 0,),
                /*You can't put null in the above line since Stack won't allow that*/
              )
            ],
          )
      ),
    );
  }

Rest of the code will remain same. Let me know if it helps!

Upvotes: 1

Related Questions