Skip to content

How to hide BottomNavigationBar when scrolling #23674

Closed

Description

@tiagosito

I need to implement the hide / show feature of the BottomNavigationBar when the user scrolls the scroll down or up.
Please, if you know how to do it or have an example of how to do it and can share it, I am grateful for the help!

Example

hide_bottomnaviagtionbar-2

Activity

  1. zoechi commented on Oct 29, 2018

    @zoechi
    Contributor

    Looks similar to #19502

    Please add the output of flutter doctor -v.

  2. added
    c: new featureNothing broken; request for a new capability
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    on Oct 29, 2018
  3. added this to the milestone on Oct 29, 2018
  4. tiagosito commented on Oct 29, 2018

    @tiagosito
    Author

    Ok, here my output of flutter doctor -v.

    flutter doctor -v
    [✓] Flutter (Channel dev, v0.9.1, on Mac OS X 10.13.6 17G65, locale pt-BR)
        • Flutter version 0.9.1 at /Users/tiagosito/flutter
        • Framework revision bf7c27095c (6 weeks ago), 2018-09-18 13:39:21 -0700
        • Engine revision 9e315e6465
        • Dart version 2.1.0-dev.4.0.flutter-050561fd82
    
    [✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
        • Android SDK at /Users/tiagosito/Library/Android/sdk
        • Android NDK at /Users/tiagosito/Library/Android/sdk/ndk-bundle
        • Platform android-28, build-tools 28.0.2
        • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
        • All Android licenses accepted.
    
    [✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Xcode 10.0, Build version 10A255
        • ios-deploy 1.9.2
        • CocoaPods version 1.5.2
    
    [✓] Android Studio (version 3.2)
        • Android Studio at /Applications/Android Studio.app/Contents
        • Flutter plugin version 29.1.1
        • Dart plugin version 181.5656
        • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    
    [✓] Connected devices (4 available)
        • ASUS Z00AD                • G8AZB6020764MYV                      • android-x86 • Android 5.0 (API 21)
        • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 7.1.1 (API 25) (emulator)
        • iPhone 6s                 • 18301207-EE1F-45FA-BC03-86CE9A95253E • ios         • iOS 12.0 (simulator)
        • iPhone XS Max             • 169CE4DC-40AF-4FB5-B708-225A8C63F6FF • ios         • iOS 12.0 (simulator)
    
    • No issues found!
    
  5. zoechi commented on Dec 22, 2018

    @zoechi
    Contributor

    I'd suggest to ask on StackOverflow if there is no such question yet.

  6. rakeshlanjewar commented on Feb 7, 2019

    @rakeshlanjewar

    I have answered a workaround on this :-

    https://stackoverflow.com/a/54567061/7416454

  7. tiagosito commented on Jan 13, 2020

    @tiagosito
    Author

    I also want to thank @rakeshlanjewar's answer, but existe another answer is closer than I wanted!

  8. edsonbonfim commented on Mar 30, 2020

    @edsonbonfim

    You can use this package to hide or show bottom navigation bar while scrolling: https://pub.dev/packages/scroll_bottom_navigation_bar

    snapshot

  9. lock commented on Apr 15, 2020

    @lock

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  10. locked and limited conversation to collaborators on Apr 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions