Flutter plugin - FancyBottomNavigation

Overview

FancyBottomNavigation

Fancy Gif

Getting Started

Add the plugin (pub coming soon):

dependencies:
  ...
  fancy_bottom_navigation: ^0.3.2

Limitations

For now this is limited to more than 1 tab, and less than 5. So 2-4 tabs.

Basic Usage

Adding the widget

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "Home"),
        TabData(iconData: Icons.search, title: "Search"),
        TabData(iconData: Icons.shopping_cart, title: "Basket")
    ],
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

TabData

iconData -> Icon to be used for the tab
title -> String to be used for the tab
onClick -> Optional function to be used when the circle itself is clicked, on an active tab

Attributes

required

tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

optional

initialSelection -> Defaults to 0
circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
key -> Defaults to null

Theming

The bar will attempt to use your current theme out of the box, however you may want to theme it. Here are the attributes:

Fancy Theming

Programmatic Selection

To select a tab programmatically you will need to assign a GlobalKey to the widget. When you want to change tabs you will need to access the State using this key, and then call setPage(position).
See example project, main.dart, line 75 for an example.

Showcase

Using this package in a live app, let me know and I'll add you app here.

Inspiration

This package was inspired by a design on dribbble by Manoj Rajput:
https://dribbble.com/shots/5419022-Tab

Contributing

Contributions are welcome, please submit a PR :)

Comments
  • Flutter 3.0 Bugs Showing for a method.

    Flutter 3.0 Bugs Showing for a method.

    I upgraded flutter 3.0 Yesterday and got this line:

    /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/fancy_bottom_navigation-0.3.3/lib/fancy_bottom_navigation.dart:111:7: Error: No named parameter with the name 'overflow'.
          overflow: Overflow.visible,
          ^^^^^^^^
    
    opened by Kayuemkhan 7
  • navbar items show ontop of drawer

    navbar items show ontop of drawer

    Screen shot taken of the example app, with the only addition being drawer: Drawer(), to the scaffold. BottomNavBar items show on-top of the drawer when the drawer is in the open position.

    screenshot 2019-01-10 at 17 03 31

    bug 
    opened by thewithz 4
  • white line as separator

    white line as separator

    we can see the white line if we put a dark background. capture I changed one line and this has ceased to be a problem for me. I commented out a line in BoxDecoration, which assigned him a white child: Container( width: CIRCLE_SIZE + CIRCLE_OUTLINE, height: CIRCLE_SIZE + CIRCLE_OUTLINE, decoration: BoxDecoration( //color: Colors.white, shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.black12, blurRadius: 8) ])),

    bug 
    opened by Miolin 3
  • setState causes error when opening new widgets

    setState causes error when opening new widgets

    I'm using version 0.1.1 developing for android, I don't know if this occurs on IOS.

    related to #3 In addition to the selected icon being stuck, flutter throws an error

    12:48:37.859 33 info flutter.tools I/flutter ( 4810): The following assertion was thrown building TickerMode(mode: disabled):
    
    12:48:37.877 34 info flutter.tools I/flutter ( 4810): setState() or markNeedsBuild() called during build.
    

    relevant stack trace

    12:48:37.902 49 info flutter.tools I/flutter ( 4810): When the exception was thrown, this was the stack:
    12:48:37.902 50 info flutter.tools I/flutter ( 4810): #0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:3485:11)
    12:48:37.902 51 info flutter.tools I/flutter ( 4810): #1      Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:3511:6)
    12:48:37.902 52 info flutter.tools I/flutter ( 4810): #2      State.setState (package:flutter/src/widgets/framework.dart:1146:14)
    12:48:37.902 53 info flutter.tools I/flutter ( 4810): #3      _FancyBottomNavigationState._setSelected (package:fancy_bottom_navigation/fancy_bottom_navigation.dart:194:21)
    12:48:37.902 54 info flutter.tools I/flutter ( 4810): #4      _FancyBottomNavigationState.didChangeDependencies (package:fancy_bottom_navigation/fancy_bottom_navigation.dart:64:5)
    12:48:37.902 55 info flutter.tools I/flutter ( 4810): #5      StatefulElement.didChangeDependencies (package:flutter/src/widgets/framework.dart:3960:12)
    12:48:37.902 56 info flutter.tools I/flutter ( 4810): #6      Element.activate (package:flutter/src/widgets/framework.dart:3054:7)
    

    This error occurs when opening another widget from the body of the scaffold containing the fancy nav bar for example, via a button.

    bug 
    opened by thewithz 3
  • add the opportunity for PageView (same behavior as TabView)

    add the opportunity for PageView (same behavior as TabView)

    Thanks for your grate work! Very nice design!

    Now you can use a PageController. Just give an instance to the FancyBottomNavigation and to a PageView and it works. You can checkout the example.

    opened by spoeck 2
  • Navigation issue

    Navigation issue

    whwnever i tried a new material page route , current bottom navigation bar icon comes along,but only icon is comming and it floats like a floating action button.

    opened by AndiDeveloper 2
  • change page with material page route

    change page with material page route

    Is there any way to change tabs with Navigator I have multi scaffold page and I want to have the static bottom navigation in all my pages is this possible?

    opened by DanialV 1
  • Thoughts on making the overlay widget clickable?

    Thoughts on making the overlay widget clickable?

    I find myself wanted to add a floating button to my project that changes behavior based on which navigation tab is selected. I think a really cool way to do that would be to make the overlay widget clickable. To get the functions for the click event, you could modify TabData.

    I imagine it going something like this:

    class TabData {
      TabData({@required this.iconData, @required this.title, this.on_click});
    
      IconData iconData;
      String title;
      Function on_click;
      final UniqueKey key = UniqueKey();
    }
    
    bottomNavigationBar: FancyBottomNavigation(
            tabs: [
              TabData(iconData: Icons.search, title: "Search", callback_function_1),
              TabData(iconData: Icons.home, title: "Home", callback_function_2),
              TabData(iconData: Icons.settings, title: "Settings", callback_function_3)
            ],
            key: bottomNavigationKey,
            // select home page as initial position
            initialSelection: currentPage = 1,
            onTabChangedListener: (position) {
              setState(() {
                currentPage = position;
              });
            },
          ),
    
    opened by thewithz 1
  • oval color at back of circle icon

    oval color at back of circle icon

    why did you put the SizedBox at lines (185 -190) in file fancyBottomNavigation.dart

     SizedBox(
                                height: ARC_HEIGHT,
                                width: ARC_WIDTH,
                                child: CustomPaint(
                                  painter: HalfPainter(barBackgroundColor),
                                )),
    

    this one is causing a barBackground colored oval at back of icon circle. please remove it, or change its color property. Screenshot_2020-03-08-23-25-49

    opened by Ashuto7h 0
  • Pull request merging

    Pull request merging

    Hi, I found that some of my issues has been addressed by the changes in pull request. May I know when will these pull requests being pushed into master branch? Thanks in advance.

    opened by jasonlaw 0
  • Misspelling in optional attribute (README.md)

    Misspelling in optional attribute (README.md)

    taxtColor was modified to textColor

    Misspelling in:

    https://github.com/tunitowen/fancy_bottom_navigation/blob/9356611151de494023357895eecc8a66acefd909/README.md#L51

    This was modified to:

    https://github.com/tunitowen/fancy_bottom_navigation/blob/166ca87592385ce7b7e447f97becbab0b1a46550/README.md#L51

    opened by HASPIMA 0
  • Fix icon white line and add shadow for dark theme

    Fix icon white line and add shadow for dark theme

    Hello,

    Thanks for your great work.

    I would like to submit two fixes with icons in the navigation bar:

    • look at an icon carefully, and you will observe there is a white line (at the top edge of the navigation bar);
    • add shadow for selected icon for dark themes

    Thanks.

    opened by Eimji 0
  • fix: Stack constructor for Flutter > 2.10

    fix: Stack constructor for Flutter > 2.10

    Closes #67.

    • Replaces overflow: Overflow.visible with clipBehavior: Clip.none, per migration guide
    • Bumps mockito version for compatibility with flutter_test.
    • Renames test file to follow *_test.dart convention.
    • Removes and gitignores pubspec.lock, since this is a library package.
    opened by mockturtl 1
  • Flutter beta channel removed constructor param `Stack.overflow`

    Flutter beta channel removed constructor param `Stack.overflow`

    This package is broken in Flutter's beta channel. Apps using it will not compile.

    See https://github.com/flutter/flutter/pull/98583.

    Offending line is here: https://github.com/tunitowen/fancy_bottom_navigation/blob/master/lib/fancy_bottom_navigation.dart#L111

    PR incoming.

    opened by mockturtl 2
  • Issue 58

    Issue 58

    I've added fontSize field to TabItem class and that determines the size of TabData titles. If you leave it null, it will be 12.

    I deleted const double TEXT_OFF = 3;, because there was an issue with titles of the tabs that were off and changed that into 1 + fontSize / 2

    In the example I put it 18 and you can see it here:

    image_2021-07-15_161314

    can close issue #58

    opened by MohammadKashaniJabbari 0
Owner
Tony Owen
Tony Owen
This is just the simplyfied Flutter Plugin use for one of the popular flutter plugin for social media login.

social_media_logins Flutter Plugin to login via Social Media Accounts. Available Social Media Logins: Facebook Google Apple Getting Started To use thi

Reymark Esponilla 3 Aug 24, 2022
Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check permissions.

On most operating systems, permissions aren't just granted to apps at install time. Rather, developers have to ask the user for permissions while the

Baseflow 1.7k Jan 3, 2023
A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin

maps_demo A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin Getting Started Get an A

Gerry High 41 Feb 14, 2022
Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check permissions.

Flutter permission_handler plugin The Flutter permission_handler plugin is build following the federated plugin architecture. A detailed explanation o

Baseflow 1.7k Dec 31, 2022
Unloc customizations of the Permission plugin for Flutter. This plugin provides an API to request and check permissions.

Flutter Permission handler Plugin A permissions plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check perm

Unloc 1 Nov 26, 2020
Klutter plugin makes it possible to write a Flutter plugin for both Android and iOS using Kotlin only.

The Klutter Framework makes it possible to write a Flutter plugin for both Android and iOS using Kotlin Multiplatform. Instead of writing platform spe

Gillian 33 Dec 18, 2022
A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

step_tracker plugin A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also

Roshan nahak 5 Oct 21, 2022
Boris Gautier 1 Jan 31, 2022
File picker plugin for Flutter, compatible with both iOS & Android and desktop (go-flutter).

File Picker A package that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support. Currently s

Miguel Ruivo 985 Jan 5, 2023
Plugin to access VPN service for Flutter | Flutter 的 VPN 插件

Flutter VPN plugin This plugin help developers to access VPN service in their flutter app. 本插件帮助开发者在自己的应用内调用 VPN 服务。 The Android part was implemented

Xdea 277 Dec 28, 2022
Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Pawan Kumar 1.5k Jan 8, 2023
Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Pawan Kumar 1.5k Jan 2, 2023
Google places picker plugin for flutter. Opens up the google places picker on ios and android returning the chosen place back to the flutter app.

flutter_places_dialog Shows a places picker dialog in ios and android, returning the data in the places picker to the app. Getting Started Generate yo

null 44 Dec 6, 2022
A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

Boris Gautier 5 Sep 14, 2022
Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size.

desktop_window Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size. Usage import 'package:desktop_window/desktop_window.dart

ChunKoo Park 72 Dec 2, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 191 Dec 29, 2022
Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size.

desktop_window Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size. Usage import 'package:desktop_window/desktop_window.dart

ChunKoo Park 72 Dec 2, 2022
A flutter plugin for integrating Mobile Money Payments to your flutter apps

Add Mobile Money payments to your flutter apps using the FlutterWave api gateway. Features Recieve Payments through Mobile Money in Uganda Supports MT

null 5 Nov 9, 2022
Flutter plugin for use Video.js in flutter web

Flutter Video.js player Flutter plugin for use Video.js in flutter web Installation Add it to your package's pubspec.yaml file dependencies: video_j

null 15 Oct 17, 2022
A Side Menu plugin for flutter and compatible with liquid ui for flutter

Liquid Shrink Side Menu A Side Menu plugin for flutter and compatible with liquid ui Side Menu Types There are 8 configuration of Liquid shrink side m

Raj Singh 18 Nov 24, 2022