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

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!

CodePudding user response：

use this

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

    scrollController!.addListener(() {
      if (scrollController!.position.userScrollDirection ==
          ScrollDirection.forward) {
        if (!isFilterVisible) {
          setState(() => visible = true);
        }
      } else if (scrollController!.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() => visible = false);
      }
    });
  }

CustomScrollView(
controller: scrollController)

CodePudding user response：

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