Hide bottom navigation bar when SliverAppBar is min height

Question

I'm trying to change positioned of custom bottom navigation bar when my sliverAppBar have to min height.

Flutter How to check if Sliver AppBar is expanded or collapsed? - implementation is taken from here

Here is my code

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  bool _headerOpen = true;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 250,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  if (constraints.biggest.height -
                          MediaQuery.of(context).padding.top ==
                      kToolbarHeight) {
                    _headerOpen = false;
                  } else {
                    _headerOpen = true;
                  }
                  return FlexibleSpaceBar(
                    title: Text(_headerOpen.toString()),
                  );
                },
              ),
            )
          ];
        },
        body: Stack(
          children: [
            ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return Text("Index is " + index.toString());
              },
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: _headerOpen ? 28 : -500,
              child: SafeArea(
                bottom: true,
                child: CustomNavigationBar(
                 // implement of my bottom bar
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

I think that's because main Widget build is not updated when SliverAppBat change size, but I have no idea what to do.

Boby · Answer 1 · 2020-11-14T17:10:46.127

I'm bit confused, do you want to hide it or what ? because your title says you want to hide it.

If you want to hide it, you can use visibility widget. Then wrap your Position to this

 Visibility(
                  visible: _headerOpen,
                  child: Positioned(
                    left: 0,
                    right: 0,
                    child: SafeArea(
                      bottom: true,
                      child: CustomNavigationBar(
                          // implement of my bottom bar
                          ),
                    ),
                  ),
                );

Hide bottom navigation bar when SliverAppBar is min height

1 Answers1