A 3D Bottom Navigation Bar in Flutter

Related tags

Templates flutter flutter-plugin flutter-package
Overview

flip_box_bar

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction].

Demo

Example Use

      // In Scaffold
      int selectedIndex = 0;
      
      bottomNavigationBar: FlipBoxBar(
              selectedIndex: index,
              items: [
                FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, backColor: Colors.blueAccent),
                FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),
                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor: Colors.orange, backColor: Colors.orangeAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.pink, backColor: Colors.pinkAccent),
              ],
              onIndexChanged: (newIndex) {
                setState() {
                    selectedIndex = newIndex;
                }
              },
            ),

Properties

List<FlipBarItem> items;

The items to be displayed in the BottomNavBar.

Duration animationDuration;

The duration of the animation of the box flip.

ValueChanged<int> onIndexChanged;

Callback for getting value of item selection.

int initialIndex;

The initial selected index of the BottomNavBar.

double navBarHeight;

The height of the BottomNavBar.

Note: Breaking change

Prior to 0.9.0, only initialIndex was provided as a parameter. 0.9.0 onwards, user needs to modify the selectedIndex property and rebuild to animate. The reason for this modification is that it allows programmatically changing the selected index whereas the earlier version did not.

A version of the code before 0.9.0 would look like this:

        // In Scaffold
      
      bottomNavigationBar: FlipBoxBar(
              initialIndex: 0,
              items: [
                FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, backColor: Colors.blueAccent),
                FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),
                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor: Colors.orange, backColor: Colors.orangeAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),
                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.pink, backColor: Colors.pinkAccent),
              ],
              onIndexChanged: (newIndex) {
                print(newIndex);
              },
            ),
You might also like...

Flutter circle bottom bar by animation

Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Oct 29, 2022

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Dec 28, 2022

Notched Bottom Tab Bar Example using Flutter Framework

Notched Bottom Tab Bar Example using Flutter Framework

bottom_tab_bar Notched Bottom Tab Bar Example using Flutter Framework Getting Started Flutter tutorial explaining how to create a notched shaped botto

Dec 6, 2022

Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Jan 1, 2023

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

Nov 11, 2022

Starlight search bar - Starlight search bar with flutter

Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Apr 20, 2022

This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

Nov 27, 2022

Flutter-FFNavigationBar - Configurable navigation bar for Flutter

Flutter-FFNavigationBar - Configurable navigation bar for Flutter

ff_navigation_bar A highly configurable navigation bar with emphasis for the selected item. Add dependency dependencies: ff_navigation_bar: ^0.1.5

Sep 22, 2022

Configurable navigation bar for Flutter

Configurable navigation bar for Flutter

ff_navigation_bar A highly configurable navigation bar with emphasis for the selected item. Add dependency dependencies: ff_navigation_bar: ^0.1.5

Sep 22, 2022
Comments
  • How do I set active state on FlipBarItem when the index is programmatically changed?

    How do I set active state on FlipBarItem when the index is programmatically changed?

    I want to commend the great work you did with this package. Please I was wondering if there is a way to change the state of the FlipBarItem when the index is programmatically outside tap event on the FlipBarItem?

    Thank you.

    opened by papakay 7
  • Can I specify the backColor of the color of icon and text?

    Can I specify the backColor of the color of icon and text?

    Hello, the developer of this great project!

    Currently, I cannot change the color of the icon and text when it gets flipped and only can change the background color.

    Is there a way to change the color of the icon and text? If not, it would be great if we can specify both the front and back colors of the icon and text!

    opened by tdh8316 4
  • Where is the onTab?

    Where is the onTab?

    In my standart BottomNavigationBar after items I have

    onTap: navigationTapped,
currentIndex: this._page,
.....
.....
.....
  void navigationTapped(int page) {
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 800), curve: Curves.ease);
  }

    But I can't seems to add onTab into my scaffold. am I missing something or should I use GestureDoctor to get onTab()?

    In my scaffold body PageView I also use

    • onPageChanged: onPageChanged,
    • controller: _pageController,
      void onPageChanged(int page) {
    if (this.mounted) {
      setState(() {
        this._page = page;
      });
    }
  }

    Any idea/help please?

    opened by NTMS2017 4
Owner
Deven Joshi
Google Developer Expert, Flutter | Technical Writer | Speaker
Deven Joshi
GitHub
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Dec 22, 2022
simple flutter bottom navigation bar widget

bmnav A very flexible Flutter implementation of the Bottom Navigation Bar. Get Started Add bmanv to your pubspec.yaml file: dependencies: bmnav: ^0.

Edwin 21 Oct 8, 2022
A 3D Bottom Navigation Bar in Flutter

flip_box_bar A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction]. Demo Exam

Deven Joshi 258 Nov 19, 2022
Playful and customizable bottom navigation bar for Flutter

rolling_nav_bar A bottom nav bar with layout inspired by this design and with heavily customizable animations, colors, and shapes. Getting Started To

Craig Labenz 117 Dec 22, 2022
Custom Shaped Bottom Navigation Bar in Flutter

CustomShapedBottomBar Custom Shaped Bottom Navigation Bar in Flutter **Usage: ** Add CustomPaint Widget to use this Painter class like this: C

Shraddha Sojitra 5 May 6, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022
A fancy animated bottom navigation bar 💫.

Stacky_bottom_nav_bar A fancy animated bottom navigation bar. Preview Default Light Mode Default Dark Mode ⚠️ IMPORTANT: when adding this widget don’t

null 5 Oct 23, 2022
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022