I am trying to hide my appbar while scrolling pages using pageview.builder. But the appbar doesn't hide while I scroll the pages.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../Controller/NewsController.dart';
import 'Export.dart';

class ShowNewsPage extends StatefulWidget {
  const ShowNewsPage({Key? key}) : super(key: key);

  @override
  State<ShowNewsPage> createState() => _ShowNewsPageState();
}

class _ShowNewsPageState extends State<ShowNewsPage> {
  bool _init = true;
  bool _isLoadingNews = false;
  @override
  void didChangeDependencies() async {
    if (_init) {
      _isLoadingNews =
          await Provider.of<NewsController>(context, listen: false).getNews();
    }
    _init = false;
    setState(() {});
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final news = Provider.of<NewsController>(context).allNews;
    if (!_isLoadingNews) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    } else {
      return Scaffold(
        extendBodyBehindAppBar: true,
        body: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverAppBar(
              floating: true,
              title: Text('Next'),
              centerTitle: true,
              toolbarHeight: 40,
            ),
          ],
          body: PageView.builder(
            physics: const ScrollPhysics(),
            itemCount: news.length,
            scrollDirection: Axis.vertical,
            // shrinkWrap: true,
            itemBuilder: (context, index) {
              return NewNewscardWidget(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                title: news[index].title!.rendered!,
                content: news[index].content!.rendered!,
                image: news[index].ogImage ?? [],
                id: news[index].id!,
                // authorName: news[index].author!,
                date: 'November 5, 2022',
              );
            },
          ),
        ),
      );
    }
  }
}

I want the Appbar to hide while I scroll the pages downwards and want it to reappear if I drag the page up a bit. The code I have implemented in the SliverAppbar works perfectly fine for Listview.builder but doesn't work for Pageview.builder. Is it possible to hide the appbar in Pageview.builder?

CodePudding user response：

Since that is pageView, you need to create a PageController and attach a listener to it that listens to the scrolling and hides the appbar when scrolling. I have created a sample here for you.

class ShowNewsPage extends StatefulWidget {
  const ShowNewsPage({Key? key}) : super(key: key);

  @override
  State<ShowNewsPage> createState() => _ShowNewsPageState();
}

class _ShowNewsPageState extends State<ShowNewsPage> {
  late PageController _pageViewController;
  bool _showAppbar = true;
  bool isScrollingDown = false;

  @override
  void initState() {
    super.initState();
    _pageViewController = PageController();
    _pageViewController.addListener(() {
      if (_pageViewController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        if (!isScrollingDown) {
          isScrollingDown = true;
          _showAppbar = false;
          setState(() {});
        }
      }

      if (_pageViewController.position.userScrollDirection ==
          ScrollDirection.forward) {
        if (isScrollingDown) {
          isScrollingDown = false;
          _showAppbar = true;
          setState(() {});
        }
      }
    });
  }

  @override
  void dispose() {
    _pageViewController.dispose();
    _pageViewController.removeListener(() {});
    super.dispose();
  }

  final bool _isLoadingNews = false;

  @override
  Widget build(BuildContext context) {
    if (_isLoadingNews) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    } else {
      return Scaffold(
        extendBodyBehindAppBar: true,
        body: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverAppBar(
              floating: true,
              title: const Text('Next'),
              centerTitle: true,
              toolbarHeight: _showAppbar ? 40 : 0.0,
            ),
          ],
          body: PageView.builder(
            controller: _pageViewController,
            physics: const ScrollPhysics(),
            itemCount: 5,
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              return Container(
                color: Colors.amber,
                width: MediaQuery.of(context).size.width * .80,
                height: MediaQuery.of(context).size.height * .80,
                child: const Center(child: Text('item')),
              );
            },
          ),
        ),
      );
    }
  }
}