Search code examples
flutterappbarflutter-sliver

Flutter: Is there a way to make sliverAppBar disappear when pressing a button


I was wondering if there is a way to make the sliverAppBar disappear once a button has been pressed. Instead of just scrolling.


Solution

  • yes, it is possible. checkout below example.

    import 'package:flutter/material.dart';
    
      class Ch1 extends StatefulWidget {
    
        @override
        _Ch1State createState() => _Ch1State();
      }
    
      class _Ch1State extends State<Ch1> {
        bool check = true;
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                   if(check)SliverAppBar(
                    expandedHeight: 200.0,
                    floating: false,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        title: Text("Collapsing Toolbar",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            )),
                        background: Image.network(
                          "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                          fit: BoxFit.cover,
                        )),
                  ),
                ];
              } ,
              body: Center(
                child: InkWell(
                  onTap: (){
                    setState(() {
                      check= !check;
                    });
                  },
                    child: Text("Press"),
                ),
              ),
            ),
          );
        }
      }