Hide Bottom Navigation bar on Scroll in Flutter

2019-05-10 10:33发布

站内问答 / 前沿技术
1770 2 6

I have a list of blog posts in the body and bottom navigation bar. I want to hide bottom navigation bar with a slide down animation when the posts list is scrolled down and visible with a slide up animation when scrolled up. How to do it?

2条回答
Summer. ? 凉城
2楼-- · 2019-05-10 11:27

This solution is just a workaround to this problem. There may be some detrimental changes. 

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _hideButtonController;

  var _isVisible;
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
          print("**** $_isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
          print("**** $_isVisible down");
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new CustomScrollView(
        controller: _hideButtonController,
        shrinkWrap: true,
        slivers: <Widget>[
          new SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: new SliverList(
              delegate: new SliverChildListDelegate(
                <Widget>[
                  const Text('I\'m dedicating every day to you'),
                  const Text('Domestic life was never quite my style'),
                  const Text('When you smile, you knock me out, I fall apart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('I realize I am crazy'),
                ],
              ),
            ),
          ),
        ],
      )),
      bottomNavigationBar: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        height: _isVisible ? 60.0 : 0.0,
        child: _isVisible
            ? new BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                items: [
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text('Home'),
                  ),
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.card_giftcard),
                    title: Text('Offers'),
                  ),
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.account_box),
                    title: Text('Account'),
                  ),
                ],
                currentIndex: 0,

              )
            : Container(
                color: Colors.white,
                width: MediaQuery.of(context).size.width,
              ),
      ),

    );
  }

}

Also you can use sliver bar with this :- 

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _hideButtonController;

  var _isVisible;
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
          print("**** $_isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
          print("**** $_isVisible down");
        });
      }
    });
  }

  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  TextEditingController searchController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomPadding: true,
      drawer: Container(),
      key: scaffoldKey,
      body: NestedScrollView(
        controller: _hideButtonController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Container(
                child: Card(
                  elevation: 3.0,
                  margin: EdgeInsets.only(top: 10.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(2.0))),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        GestureDetector(
                          child: Icon(
                            Icons.sort,
                            color: Colors.black54,
                          ),
                          onTap: () {
                            scaffoldKey.currentState.openDrawer();
                          },
                        ),
                        SizedBox(
                          width: 10.0,
                        ),
                        Expanded(
                          child: TextField(
                            controller: searchController,
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "What are you looking for?"),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            searchController.clear();
                          },
                          child: Icon(
                            Icons.clear,
                            color: Colors.black54,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              elevation: 10.0,
              automaticallyImplyLeading: false,
              expandedHeight: 70,
              floating: true,
              snap: true,
            )
          ];
        },
        body: new ListView(
          children: <Widget>[
            const Text('I\'m dedicating every day to you'),
            const Text('Domestic life was never quite my style'),
            const Text('When you smile, you knock me out, I fall apart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('I realize I am crazy'),
            const Text('I\'m dedicating every day to you'),
            const Text('Domestic life was never quite my style'),
            const Text('When you smile, you knock me out, I fall apart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('I realize I am crazy'),
          ],
        ),
      ),

      bottomNavigationBar: AnimatedContainer(
        duration: Duration(seconds: 1),
        height: _isVisible ? 60.0 : 0.0,
        child: _isVisible
            ? AnimatedContainer(
                duration: Duration(milliseconds: 200),
                height: _isVisible ? 60.0 : 0.0,
                child: _isVisible
                    ? new BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        items: [
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.home),
                            title: Text('Home'),
                          ),
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.card_giftcard),
                            title: Text('Offers'),
                          ),
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.account_box),
                            title: Text('Account'),
                          ),
                        ],
                        currentIndex: 0,
                      )
                    : Container(
                        color: Colors.white,
                        width: MediaQuery.of(context).size.width,
                      ),
              )
            : Container(
                color: Theme.of(context).primaryColor,
                width: MediaQuery.of(context).size.width,
              ),
      ),

//                _isVisible
//                  ? bottomNavigationBar()
//                  : Container(
//                      height: 0.0,
//                      width: MediaQuery.of(context).size.width,
//                    ),
    );
  }
}

Kindly comment your view on this codes so we can improve this code.

this was taken from this answer :- Flutter - Hiding FloatingActionButton

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2019-05-10 11:31

Try to wrap the ListView as the child of a NotificationListener and listen to scrolling events https://docs.flutter.io/flutter/widgets/OverscrollNotification-class.html

other approach is using ScrollUpdateNotification https://docs.flutter.io/flutter/widgets/ScrollUpdateNotification-class.html

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)