我想在页面视图中添加一个滚动 controller 以便我可以隐藏它上面的 appbar 等内容

Question

I want to add a scroll controller to the pageview (which can scroll horizontally as well as vertically) so that I can hide the content like appbar that are above it when I scroll down the contents of the pageview.
I tried adding the Singlechildscrollview but it doesn't work properly don't know why. It doesn't register the up down scrolls.

      class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
      }

      class _HomePageState extends State<HomePage> {
        int currentPage = 0;
        bool isScrollingDown = false;
        PageController _controller = PageController(
          initialPage: 0,
        );
        ScrollController _scrollController;

        @override
        void initState() {
          super.initState();
          _initImages();
          _scrollController = ScrollController();
          _scrollController.addListener(() {
            if (_scrollController.position.userScrollDirection ==
                ScrollDirection.reverse) {
              if (!isScrollingDown) {
                setState(() {
                  isScrollingDown = true;
                });
                print(isScrollingDown);
              }
            }

            if (_scrollController.position.userScrollDirection ==
                ScrollDirection.forward) {
              if (isScrollingDown) {
                setState(() {
                  isScrollingDown = false;
                });
                print(isScrollingDown);
              }
            }
          });
        }

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

        @override
        Widget build(BuildContext context) {
          var height = MediaQuery.of(context).size.height;
          return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.black,
            ),
            body: Container(
              color: Colors.black,
              child: Column(
                children: [
                  AnimatedContainer(
                    height: isScrollingDown ? 0 : height * 0.25,
                    duration: Duration(milliseconds: 400),
                    child: Column(
                      children: [
                        CircleAvatar(
                          backgroundImage: AssetImage("assets/profile.jpg"),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "Samantha Smith",
                          style: profileText(),
                        ),
                        Text(
                          "@imsamanthasmith",
                          style: profileValues(),
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Column(
                              children: [
                                Text(
                                  "1.2m",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Liked",
                                  style: profileValues(),
                                )
                              ],
                            ),
                            Column(
                              children: [
                                Text(
                                  "12.8k",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Followers",
                                  style: profileValues(),
                                )
                              ],
                            ),
                            Column(
                              children: [
                                Text(
                                  "1.9k",
                                  style: profileStats(),
                                ),
                                Text(
                                  "Following",
                                  style: profileValues(),
                                )
                              ],
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Column(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[900],
                            borderRadius: BorderRadius.only(
                                topRight: Radius.circular(20),
                                topLeft: Radius.circular(20))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            IconButton(
                              icon: currentPage == 0
                                  ? Icon(Icons.grid_on_rounded)
                                  : Icon(Icons.grid_view),
                              onPressed: () {
                                _controller.animateToPage(0,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                            IconButton(
                              icon: currentPage == 1
                                  ? Icon(Icons.favorite)
                                  : Icon(Icons.favorite_border),
                              onPressed: () {
                                _controller.animateToPage(1,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                            IconButton(
                              icon: currentPage == 2
                                  ? Icon(Icons.bookmark)
                                  : Icon(Icons.bookmark_outline),
                              onPressed: () {
                                _controller.animateToPage(2,
                                    duration: Duration(milliseconds: 50),
                                    curve: Curves.bounceOut);
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: PageView(
                      physics: BouncingScrollPhysics(),
                      controller: _controller,
                      onPageChanged: (value) {
                        setState(() {
                          currentPage = value;
                        });
                      },
                      children: [
                        Page1(foodImages),
                        Page2(danceImages),
                        Page3(lolImages),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        }
      }

Answer 1

You can use CustomScrollView instead of using Scaffold, so you can use SliverAppBar which does have properties which you want to do like hiding/appearing on scroll etc. Here is the link of detailed information about SliverAppBar https://api.flutter.dev/flutter/material/SliverAppBar-class.html

Official doc from Flutter about implementing SliverAppBar here https://flutter.dev/docs/cookbook/lists/floating-app-bar#2-use-sliverappbar-to-add-a-floating-app-bar