circle_bottom_navigation 1.0.5

Circle Bottom Navigation #


Getting Started #

Add the plugin:

  circle_bottom_navigation: ^1.0.4

Minimum Usage #

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home),
    TabData(icon: Icons.history),
    TabData(icon: Icons.alarm),
  onTabChangedListener: (index) => setState(() => currentPage = index),

Attributes #

Required #

initialSelection -> The number of page you want to start/navigate, receive a int
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

Optional #

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
circleSize -> Defaults to 60.0, size of intern circle
barHeight -> Defaults to 60.0, height of bar
arcHeight -> Defaults to 70.0, height of external circle arc
arcWidth -> Defaults to 90.0, width of external circle arc
circleOutline -> Defaults to 10.0
shadowAllowance -> Defaults to 20.0, size of icon shadow
hasElevationShadows -> Defaults to true, define if bar have elevation shadows
blurShadowRadius -> Defaults to 8.0, size of bar shadow if hasElevationShadows is true
key -> Defaults to null

TabData #

Required #

icon -> Icon to be used for the TabData

Optional #

title -> String to be used for the tab
onClick -> Function to be used when the circle itself is clicked, on an active tab
iconSize -> Size of icon displayed active and not active
fontSize -> Size of font in case of title has informed
fontWeight -> Weight of font in case of title has informed

Example #

There is a example project in the example folder. Check it out.

Showcase #

If you use this package in a live app, let me know and I'll add your app here. ;)

Contributing #

Found a bug? Please, submit a PR!

[1.0.5] - Fix shadows.

  • Property hasElevationShadows fixed

[1.0.4] - Shadow properties.

  • Included hasElevationShadows and blurShadowRadius to manipulate bar shadows
  • Updated example folder

[1.0.0] - Changes to TabData and release.

  • Now is possible to set title optionally
  • It's possible to set icon size optionally
  • You can set font properties too (font size and font weight)

[0.1.1] - Fix for alignment.

  • Alignment of tab box has fixed

[0.1.0] - Beta Release.

  • Beta release


Example #

See example folder :D

Use this package as a library

1. Depend on it

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

  circle_bottom_navigation: ^1.0.5

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:circle_bottom_navigation/circle_bottom_navigation.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 Feb 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/circle_bottom_navigation.dart.

Run flutter format to format lib/circle_bottom_navigation.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
analyzer ^0.39.1 0.39.4
flutter 0.0.0
vector_math ^2.0.8 2.0.8
Transitive dependencies
_fe_analyzer_shared 1.0.3
args 1.5.2
async 2.4.0
charcode 1.1.3
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.4
csslib 0.16.1
glob 1.2.0
html 0.14.0+3
js 0.6.1+1
meta 1.1.8
node_interop 1.0.3
node_io 1.0.1+2
package_config 1.1.0
path 1.6.4
pedantic 1.9.0
pub_semver 1.4.3
sky_engine 0.0.99
source_span 1.6.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+13
yaml 2.2.0
Dev dependencies