gradient_nav_bar 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 58

Gradient Navigation Bar #

This package lets you create a bottom navigation bar with the selected item overlayed on a gradient apart from the selected color provided.

Getting Started #

You will need to add the following dependency in your pubspec.yaml file to download the depedency.

    sdk: flutter
  gradient_nav_bar: 1.0.0

Note: This was built on the following tools.

  • Flutter - v1.7.8+hotfix.4
  • Dart - vDart 2.4.0

Usage #

When you add a bottom navigation bar to your application, use the GradientNavigationBar you will receive with this package. Following are the parameters that the constructor takes:


  • items - This is mandatory and needs to have atleast 2 items. This is a list of TabInfo items which will create the tab items. The TabInfo takes 2 parameters - icon and label. The icon is mandatory.


  • labelColor - The unselected label color. Default is grey.
  • iconColor - The unselected icon color. Default is grey.
  • selectedLabelColor - The selected label color. Default is white.
  • selectedIconColor - The selected icon color. Default is white.
  • backgroundColor - The background color of the navigation bar. Default is the theme's background color.
  • currentIndex - This is the current selected item's index.
  • onTap - A call back function to determine the value changed
  • showLabel - A bool value to show the label on the bar. It is false by default.
  • selectedFontSize - The font size of the label of the selected item. The default value is 14.0
  • unselectedFontSize - The font size of the label of the unselected item. The default value is 12.0


Contributing #

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Authors #

  • Rejish Radhakrishnan

License #

Copyright 2019 Rejish Radhakrishnan

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

[1.0.0] - 19 August 2019. #

  • Creates a navigation bar with the selected item overlayed on a gradient.


import 'package:flutter/material.dart';
import 'package:gradient_nav_bar/gradient_nav_bar.dart';
import 'package:gradient_nav_bar/model/tab_info.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      home: MyHomePage(title: 'Custom Nav Bar'),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{
  int _selectedIndex = 0;

  Widget build(BuildContext context) {
    var gradient = LinearGradient(
                colors: [Color(0xFFD602EE), Color(0x00D602EE)],//[Color.fromRGBO(254, 34, 164, 100), Color.fromRGBO(254, 34, 164, 0)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter
    var backgroundColor = Color(0xFF6002EE); // Color.fromRGBO(72, 31, 216, 1);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      // Add the gradient navigation bar here
      bottomNavigationBar: GradientNavigationBar(
        backgroundColor: backgroundColor,
        gradient: gradient,
        currentIndex: _selectedIndex, 
        iconColor: Colors.grey,
        labelColor: Colors.grey,
        selectedIconColor: Colors.white,
        onTap: _selectIndex, // calls a void method to change the index on tap of the item
        showLabel: true,
        items: [
            icon: Icons.ac_unit,
            label: 'AC Unit'
            icon: Icons.backup,
            label: 'Backup'
            icon: Icons.cached,
            label: 'Cached'
            icon: Icons.dashboard,
            label: 'Dashboard'

  void _selectIndex(int index) {
    setState(() {
      _selectedIndex = index;

Use this package as a library

1. Depend on it

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

  gradient_nav_bar: ^1.0.0

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:gradient_nav_bar/gradient_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 Apr 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/gradient_nav_bar.dart.

Run flutter format to format lib/gradient_nav_bar.dart.

Format lib/model/tab_info.dart.

Run flutter format to format lib/model/tab_info.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies