fluid_bottom_nav_bar 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

Fluid Navigation Bar #

Many thanks to gskinner for "The vignettes" showcase presented at Flutter Interact '19 : They created an awesome creative experience and most of the code in this package comes from their realisation. I was really impressed by their huge work but the code, even if it was open-sourced, was not usable as it. So I did some refactoring for maintainability, I extracted some fields to be able to adapt and skin the widget according to our design and decided to share it.


Basic Usage #

FluidNavBar is simply a bottom navigation bar but with a very cool and fluid effect while animating the transition between an active button to another one.

The example below shows you the minimal code to use the widget.

  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF75B7E1),
        extendBody: true,
        body: _theBody,
        bottomNavigationBar: FluidNavBar(                     // (1)
          icons: [                                            // (2)
            FluidNavBarIcon(iconPath: "assets/home.svg"),     // (3)
            FluidNavBarIcon(iconPath: "assets/bookmark.svg"),
          onChange: _handleNavigationChange,                  // (4)

(1) Create an instance of FluidNavBar
(2) Set the icons, of type FluidNavBarIcon, to display in the navigation bar
(3) FluidNavBarIcon supports only SVG
(4) Set the callback to react when the user tap an icon (the callback parameter contains the icon's index)

basic usage sample

How To Style #

FluidNavBar comes with a default set of styles which are directly inherited from the gskinner showcase. You can override different properties to adapt the fluid navigation bar to your current design:


  • the bar background color (Colors.white by default)
  • the icon background color (the same color as the bar background color by default)
  • the icon foreground color when it's selected (Colors.black by default)
  • the icon foreground color when it's unselected (Colors.grey by default)

Global Styles #

The easiest way is to define one or more properties in a FluidNavBatStyle and set this instance in the style property of the FluidNavBar:

  icons: [
    FluidNavBarIcon(iconPath: "assets/home.svg"),
    FluidNavBarIcon(iconPath: "assets/bookmark.svg"),
  onChange: _handleNavigationChange,
  style: FluidNavBarStyle(
    barBackgroundColor: Color(0xFFFB5C66),
    iconBackgroundColor: Colors.white,
    iconSelectedForegroundColor: Color(0xFFFB5C66),
    iconUnselectedForegroundColor: Colors.black

is displayed as:

global style


| Property | Description |
| barBackgroundColor | Set the background color of the bar |
| iconBackgroundColor | Set the background color for all icons |
| iconSelectedForegroundColor | Set the foreground color for the selected icon |
| iconUnselectedForegroundColor | Set the background color for all unselected icons |

Local Styles #

You can also define some specific styles per icon, by using optional parameters of FluidNavBarIcon:

  icons: [
    FluidNavBarIcon(iconPath: "assets/home.svg", backgroundColor: Color(0xFF4285F4)),
    FluidNavBarIcon(iconPath: "assets/bookmark.svg", backgroundColor: Color(0xFFEC4134)),
    FluidNavBarIcon(iconPath: "assets/partner.svg", backgroundColor: Color(0xFFFCBA02)),
    FluidNavBarIcon(iconPath: "assets/conference.svg", backgroundColor: Color(0xFF34A950)),
  onChange: _handleNavigationChange,
  style: FluidNavBarStyle(
    iconUnselectedForegroundColor: Colors.white

is displayed as

local styles
Note: In this example I used also a global style for the foreground color of unselected icons, as I don't want to set the same color for all icons


| Property | Description |
| backgroundColor | Set the background color of the icon |
| selectedForegroundColor | Set the foreground color for a selected icon |
| unselectedForegroundColor | Set the foreground color for all unselected icons |

Styles Priorities #

You can define global styles, local styles, both or no style at all!

To define the proper style to apply it tries, for each style, to resolve its value in the following order:
1- local style
2- global style
3- default value
when a value is resolved then it applies it to the widget.

For example if you set the global style iconBackgroundColor to Colors.red and you also set the local style backgroundColor to Colors.green for an icon, then it will use the green color as the local style will be resolved before the global one.

Other options #

There are also few options, you can play with. They are global options and accessible throw FluidNaBar fields.

| Property | Description |
| animationFactor | Set the factor to boost or slowdown animation. The default value is 1.0. If you use a value < 1 then the animation will be faster, if you use a value > 1 the animation will be slower |
| scaleFactor | Define the factor used by the animation to zoom the selected icon. The default value is 1.2. If the value is > 1 then it is a zoom-in, if you use a value < 1 then it is zoom-out |

For an animationFactor of 2.0 (slower) and a scaleFactor of 2.0 (a zoom-in bigger than the default one), the result is:
other options

Contributions #

Feel free to create an issue if you find a bug or if you need new features. Of course PRs are welcome!

If you want to contact me on Twitter: @etaix

[0.0.1] - Initial release #

[1.0.0] - Official release #

  • fix compile error in FluidNavBarStyle with Dart >= 2.8
  • format dart files to be compliant with pub health suggestions
  • put all example code in example/lib/main.dart, so it is visible in pub example page

[1.0.1] - Improvements #

  • fix inactivation animation which is now more synchronized with the wave
  • add the FluidNavBarItemBuilder


import 'package:example/content/home.dart';
import 'package:fluid_bottom_nav_bar/fluid_bottom_nav_bar.dart';
import 'package:flutter/material.dart';

import 'content/account.dart';
import 'content/grid.dart';

void main() => runApp(FluidNavBarDemo());

class FluidNavBarDemo extends StatefulWidget {
  State createState() {
    return _FluidNavBarDemoState();

class _FluidNavBarDemoState extends State {
  Widget _child;

  void initState() {
    _child = HomeContent();

  Widget build(context) {
    // Build a simple container that switches content based of off the selected navigation item
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF75B7E1),
        extendBody: true,
        body: _child,
        bottomNavigationBar: FluidNavBar(
          icons: [
            FluidNavBarIcon(iconPath: "assets/home.svg", backgroundColor: Color(0xFF4285F4), extras: {"label":"home"}),
            FluidNavBarIcon(iconPath: "assets/bookmark.svg", backgroundColor: Color(0xFFEC4134), extras: {"label":"bookmark"}),
            FluidNavBarIcon(iconPath: "assets/partner.svg", backgroundColor: Color(0xFFFCBA02), extras: {"label":"partner"}),
            FluidNavBarIcon(iconPath: "assets/conference.svg", backgroundColor: Color(0xFF34A950), extras: {"label":"conference"}),
          onChange: _handleNavigationChange,
          style: FluidNavBarStyle(iconUnselectedForegroundColor: Colors.white),
          scaleFactor: 1.5,
          itemBuilder: (icon, item) => Semantics(
            label: icon.extras["label"],
            child: item,

  void _handleNavigationChange(int index) {
    setState(() {
      switch (index) {
        case 0:
          _child = HomeContent();
        case 1:
          _child = AccountContent();
        case 2:
          _child = GridContent();
      _child = AnimatedSwitcher(
        switchInCurve: Curves.easeOut,
        switchOutCurve: Curves.easeIn,
        duration: Duration(milliseconds: 500),
        child: _child,

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  fluid_bottom_nav_bar: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:fluid_bottom_nav_bar/fluid_bottom_nav_bar.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart


  • fluid_bottom_nav_bar that is a package requiring null.

Package not compatible with runtime flutter-web on web


  • package:fluid_bottom_nav_bar/fluid_bottom_nav_bar.dart that imports:
  • package:fluid_bottom_nav_bar/src/fluid_nav_bar.dart that imports:
  • package:fluid_bottom_nav_bar/src/fluid_nav_bar_item.dart that imports:
  • package:flutter_svg/svg.dart that imports:
  • package:flutter_svg/src/picture_provider.dart that imports:
  • dart:io

Health suggestions

Format lib/src/fluid_nav_bar.dart.

Run flutter format to format lib/src/fluid_nav_bar.dart.

Format lib/src/fluid_nav_bar_icon.dart.

Run flutter format to format lib/src/fluid_nav_bar_icon.dart.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (flutter_svg).


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_svg ^0.17.4 0.17.4 0.18.0
Transitive dependencies
charcode 1.1.3
collection 1.14.12 1.14.13
convert 2.1.1
meta 1.1.8 1.2.1
path_drawing 0.4.1
path_parsing 0.1.4
petitparser 3.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
xml 3.7.0 4.2.0
Dev dependencies