titled_navigation_bar 3.6.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

Titled Bottom Navigation Bar #

A beautiful, clean and simple bottom navigation bar with smooth animation on click. This package is high customizable, read more bellow for more details.

You can see the source code of this lib inside the /lib folder.

Show some ❤️ and star the repo to support this project

Preview (default mode) #

Default Mode Gif

Preview (with reverse mode) #

Reversed Mode Gif

Package overview #

  • [x] Custom icon color
  • [x] Custom indicator color
  • [x] Support from two to five items
  • [x] Reverse mode (show selected item as icon or title)
  • [x] Option to define custom item background color
  • [x] Use currentIndex property to update the Bar giving a tab position
  • [x] No need setState(...) to update the current index

Getting Started #

Follow these steps to use this library

Add the plugin: #

  titled_navigation_bar: ^3.5.0

Import the package #

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

Adding the widget #

bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2, // Use this to update the Bar giving a position
  onTap: (index){
    print("Selected Index: $index");
  items: [
      TitledNavigationBarItem(title: 'Home', icon: Icons.home),
      TitledNavigationBarItem(title: 'Search', icon: Icons.search),
      TitledNavigationBarItem(title: 'Bag', icon: Icons.card_travel),
      TitledNavigationBarItem(title: 'Orders', icon: Icons.shopping_cart),
      TitledNavigationBarItem(title: 'Profile', icon: Icons.person_outline),

Customization (Optional) #

TitledBottomNavigationBar #

onTap - Use this to get notified when a item is clicked, you can retrieve the current item's index on this function. Should not be null!<br/> items - The items of your bottom navigation bar. Use the TitledNavigationBarItem class to add items. Should not be null!<br/> curve - Use this to define your custom curve animation. Should not be null!<br/> reverse - If true, the visible widget of the selected item will be the Text (with the title of the item). If false, the visible widget of the selected item will be the icon. Default to false<br/> activeColor - The active Text/Icon color. The default color is the indicatorColor of your app Theme.<br/> inactiveColor - The inactive Text/Icon color. The default is the black color.<br/> indicatorColor - The indicator color. The default color is the indicatorColor of your app Theme.<br/> currentIndex - Use this to update the Bar giving a position.<br/>

TitledNavigationBarItem #

icon -The icon of this item. This will be used as default state if reverse mode is disabled<br/> title - The title of this item. This will be used as default state if reverse mode is enabled<br/>

3.6.0 #

  • Removed white color bellow the indicator
  • Removed initialIndex property. Please use currentIndex instead

3.5.0 #

  • Removed initialIndex property. Use currentIndex instead
  • Improved animation duration
  • Fixed: on iPhone Devices (iPhone X Above) navigation bar is getting too low behind iPhone's floating bar at bottom
  • Fixed: Calling toDouble() on null

3.0.1 #

  • code improvements

3.0.0 #

  • added currentIndex property to updated the Bar by giving an index.

2.2.0 #

  • option to define a custom item background color

2.1.0 #

  • option to define a custom curve animation

2.0.0 #

  • option to show title/icon on selected item (added reverse mode)

1.5.0 #

  • Documentation improved

1.0.0 #

  • Good first version (v1)

0.9.1 #

  • Bug assertion bug fixed

0.9.1 #

  • Added support to notify the parent on item click

0.5.1 #

  • Added support to set indicator color

0.1.1 #

  • Added support to set icon color

0.0.1 #

  • First release (beta)


example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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

  titled_navigation_bar: ^3.6.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:titled_navigation_bar/titled_navigation_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 Jan 25, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/src/navigation_bar.dart.

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


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <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