CODEWITHSUNDEEP
flutterdart
user21043019
user21043019

Reputation:

How to hide top card when scrolling down and appear when scrolling up?

I'm new to Flutter and came across this problem, I have filter cards at the top of the screen that I want to hide and show when scrolling up and down.

Thank in advance!

Upvotes: 2

Views: 225

Answers (1)

Munsif Ali
Munsif Ali

Reputation: 6224

check out this code

  class HideAppBar extends StatefulWidget {
    @override
    HideAppBarState createState() => new HideAppBarState();
  }
    
  class HideAppBarState extends State<HideAppBar> {
    
    @override
    initState() {
      super.initState();
    }
    
    @override
    Widget build(BuildContext context) {
      // MaterialApp 
      return MaterialApp(  
        debugShowCheckedModeBanner:false,
        // scaffold 
        home:Scaffold(  
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
                leading:Icon(Icons.wallpaper),
                title: Container(
                  color:Colors.blue, 
                  child:Text("Hidden AppBar")
                ),
                elevation: 10.0,
                automaticallyImplyLeading: false,
                expandedHeight:50,
                floating: true,
                snap: true,
              )
            ];
          },
          // list of images for scrolling
          body:  ListView(
            children: <Widget>[
              Text("Scroll Down To Hide The AppBar!"),
              Divider(),
             Text("Widget 2"),
              Divider(),
              Text("Widget 3"),
              Divider(),
              Text("Widget 4"),
            ],
          ),
        ),
      ),
      );
    }
  }

Upvotes: 1

Related Questions