Code Monkey home page Code Monkey logo

flutter-curverbottomnavigationbar's Introduction

bottomnavigationbar

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 development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Steps ----------

BottomNavyBar A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it.

Preview PageView FanBottomNavyBar Gif Fix Gif Customization (Optional) BottomNavyBar iconSize - the item icon's size items - navigation items, required more than one item and less than six selectedIndex - the current item index. Use this to change the selected item. Default to zero onItemSelected - required to listen when a item is tapped it provide the selected item's index backgroundColor - the navigation bar's background color showElevation - if false the appBar's elevation will be removed mainAxisAlignment - use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items curve - param to customize the item change's animation containerHeight - changes the Navigation Bar's height BottomNavyBarItem icon - the icon of this item title - the text that will appear next to the icon when this item is selected activeColor - the active item's background and text color inactiveColor - the inactive item's icon color textAlign - property to change the alignment of the item title Getting Started Add the dependency in pubspec.yaml:

dependencies: ... bottom_navy_bar: ^5.6.0 Basic Usage Adding the widget

bottomNavigationBar: BottomNavyBar( selectedIndex: _selectedIndex, showElevation: true, // use this to remove appBar's elevation onItemSelected: (index) => setState(() { _selectedIndex = index; _pageController.animateToPage(index, duration: Duration(milliseconds: 300), curve: Curves.ease); }), items: [ BottomNavyBarItem( icon: Icon(Icons.apps), title: Text('Home'), activeColor: Colors.red, ), BottomNavyBarItem( icon: Icon(Icons.people), title: Text('Users'), activeColor: Colors.purpleAccent ), BottomNavyBarItem( icon: Icon(Icons.message), title: Text('Messages'), activeColor: Colors.pink ), BottomNavyBarItem( icon: Icon(Icons.settings), title: Text('Settings'), activeColor: Colors.blue ), ], ) Use with PageView and PageController class _MyHomePageState extends State {

int _currentIndex = 0; PageController _pageController;

@override void initState() { super.initState(); _pageController = PageController(); }

@override void dispose() { _pageController.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Bottom Nav Bar")), body: SizedBox.expand( child: PageView( controller: _pageController, onPageChanged: (index) { setState(() => _currentIndex = index); }, children: [ Container(color: Colors.blueGrey,), Container(color: Colors.red,), Container(color: Colors.green,), Container(color: Colors.blue,), ], ), ), bottomNavigationBar: BottomNavyBar( selectedIndex: _currentIndex, onItemSelected: (index) { setState(() => _currentIndex = index); _pageController.jumpToPage(index); }, items: [ BottomNavyBarItem( title: Text('Item One'), icon: Icon(Icons.home) ), BottomNavyBarItem( title: Text('Item Two'), icon: Icon(Icons.apps) ), BottomNavyBarItem( title: Text('Item Three'), icon: Icon(Icons.chat_bubble) ), BottomNavyBarItem( title: Text('Item Four'), icon: Icon(Icons.settings) ), ], ), ); } }

flutter-curverbottomnavigationbar's People

Contributors

devhabib429 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.