mjhansen3 / floaty_navy_bar Goto Github PK

View Code? Open in Web Editor NEW

A highly customizable and dynamic floating navigation bar. Use this for your Flutter apps where you need a bottom navigation bar. To achieve the desired floaty effect, avoid passing FloatyNavyBar() to the bottomNavigationBar property. See example or README.md on how to properly use the FloatyNavyBar.

License: MIT License

Dart 17.25% Kotlin 0.21% Swift 2.96% Objective-C 0.07% CMake 33.25% C++ 40.68% C 2.44% HTML 3.15%

floaty_navy_bar's Introduction

📦 Floaty Navy Bar

Version: 1.0.5

💻 EXAMPLE

      Scaffold(
        backgroundColor: Colors.grey[140],
        // BODY TAKES IN A STACK WIDGET WHICH INCLUDES:
        // List<Widgets>, [Home(), Search(), Settings(), Profile()] and
        // FloatingNavigationBar
        // CREATE A BOOL VARIABLE _isVisible and INITIALIZE IT TRUE
        // ** DETERMINE _isVisible WITH YOUR SCROLLCONTROLLER
        body: Stack(
          children: [
            List<Widget>,
            FloatyNavyBar(
            opacityAnimation: _isVisible, 
            backgroundColor: Colors.black,
              barHeight: 70.0,
              iconColor: Colors.white,
              textStyle: const TextStyle(
                color: Colors.white,
                fontSize: 14.0,
              ),
              iconSize: 28.0,
              indicatorColor: Colors.white,
              indicatorHeight: 3,
              indicatorWidth: 14.0,
              items: [
                NavyBarItem(
                  icon: EvaIcons.homeOutline,
                ),
                NavyBarItem(
                  icon: EvaIcons.search,
                  title: "Search",
                ),
                NavyBarItem(
                  icon: EvaIcons.settingsOutline,
                ),
                NavyBarItem(
                  icon: EvaIcons.personOutline,
                  title: "Profile",
                ),
              ],
              onChanged: (value) {
                // USE YOUR STATE MANAGEMENT TECHNIQUE TO GET
                // AND CHANGE INDEX OF NAVIGATION BAR
              },
            )
          ],
        ),
      );