https://github.com/rrifafauzikomara/flutter_curved_navigation_bar

Animated Curved Navigation Bar in Flutter
https://github.com/rrifafauzikomara/flutter_curved_navigation_bar

animation flutter flutter-animation

Last synced: about 1 year ago
JSON representation

Animated Curved Navigation Bar in Flutter

• Host: GitHub
• URL: https://github.com/rrifafauzikomara/flutter_curved_navigation_bar
• Owner: rrifafauzikomara
• Created: 2019-05-22T16:31:58.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-22T17:18:35.000Z (about 7 years ago)
• Last Synced: 2025-04-15T02:51:30.608Z (about 1 year ago)
• Topics: animation, flutter, flutter-animation
• Language: Dart
• Homepage: https://pub.dev/packages/curved_navigation_bar
• Size: 362 KB
• Stars: 8
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# CurvedNavigationBar

[pub package](https://pub.dartlang.org/packages/curved_navigation_bar)

A Flutter package for easy implementation of curved navigation bar. 

![Gif](https://github.com/rrifafauzikomara/flutter_curved_navigation_bar/blob/master/example.gif "Fancy Gif")



### Add dependency

```yaml

dependencies:

  curved_navigation_bar: ^0.2.11 #latest version

```

### Easy to use

```dart

Scaffold(

  bottomNavigationBar: CurvedNavigationBar(

    backgroundColor: Colors.blueAccent,

    items: [

      Icon(Icons.add, size: 30),

      Icon(Icons.list, size: 30),

      Icon(Icons.compare_arrows, size: 30),

    ],

    onTap: (index) {

      //Handle button tap

    },

  ),

  body: Container(color: Colors.blueAccent),

)

```

### Attributes

items: List of Widgets  

index: index of NavigationBar, can be used to change current index or to set initial index  

color: Color of NavigationBar, default Colors.white  

buttonBackgroundColor: background color of floating button, default same as color attribute  

backgroundColor: Color of NavigationBar's background, default Colors.blueAccent  

onTap: Function handling taps on items  

animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic  

animationDuration: Duration of button change animation, default Duration(milliseconds: 600)  

height: Height of NavigationBar, min 0.0, max 75.0  

## Author

* **R Rifa Fauzi Komara**

Don't forget to follow and ★