Pacote de navegação inferior personalizada construído para o Flutter com animações impressionantes e possibilidades de personalização de cores, velocidade de animação e muito mais.
{"sdk":"flutter"}{"sdk":"flutter"}^2.0.0Texto original em inglês. Visite o GitHub para a versão atual.
Preview
Add the dependency at pubspec.yaml:
dependencies:
dot_curved_bottom_nav: ^0.0.1
bottomNavigationBar: DotCurvedBottomNav(
scrollController: _scrollController,
hideOnScroll: true,
indicatorColor: Colors.blue,
backgroundColor: Colors.black,
animationDuration: const Duration(milliseconds: 300),
animationCurve: Curves.ease,
selectedIndex: _currentPage,
indicatorSize: 5,
borderRadius: 25,
height: 70,
onTap: (index) {
setState(() => _currentPage = index);
},
items: [
Icon(
Icons.home,
color: _currentPage == 0 ? Colors.blue : Colors.white,
),
Icon(
Icons.notification_add,
color: _currentPage == 1 ? Colors.blue : Colors.white,
),
Icon(
Icons.color_lens,
color: _currentPage == 2 ? Colors.blue : Colors.white,
),
Icon(
Icons.person,
color: _currentPage == 3 ? Colors.blue : Colors.white,
),
],
),
| Property | Description |
|---|---|
| scrollController | Used to listen when the user scrolls and hides the bottom navigation |
| hideOnScroll | Used to enable or disable hide on scroll behavior. (NOTE: scrollController must be provided when hideOnScroll is TRUE) |
| indicatorColor | Color of the indicator displayed on currently selected item |
| backgroundColor | Configures the background color of the bottom navigation |
| animationDuration | Configures animation duration of hiding and indicator movement between items |
| animationCurve | Configures curve of the animation of indicator movement and hide on scroll animation |
| selectedIndex | Configures currently selected item / page |
| indicatorSize | Configures the size of indicator displayed on top of the item |
| borderRadius | Configures border radius of border DotCurvedBottomNav |
| height | Configures height of DotCurvedBottomNav |
| onTap | Configures callback function that is invoked whenever user taps on an item |
| items | Configures list of items of bottom nav |
Feel free to create an issue if you find a bug or if you need new features. Of course PRs are welcome!
If you want to connect with me on LinkedIn: Muzammil Hussain