dot_bottom_nav

Description:

dot bottom nav

dot_bottom_nav #
A flutter package that provides awesome bottom navigation bar with dot indicator. The features is:

Rounded bottom nav
Floating bottom nav
Dot indicator
Customizable according to need
Animated dot indicator

Installation #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
dot_bottom_nav: ^0.0.1
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:dot_bottom_nav/dot_bottom_nav.dart';
copied to clipboard
Example #

SafeArea(
child: Scaffold(
extendBody: true, // If you want to show body behind the navbar, it should be true
body: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.green,
child: Icon(Icons.account_circle),
),
title: Text('Name $index'),
subtitle: Text('Name $index'),
);
}),
bottomNavigationBar: DotBottomNav(
currentIndex: selectedIndex,
selectedColor: Colors.indigo,
unSelectedColor: Colors.black54,
indicatorType: IndicatorType.bottom,
dotIndicatorWidth: 8,
enableDotIndicator: true,
onTap: (value){
setState(() {
selectedIndex = value;
});
},
navBarItems: [
NavBarItems(icon: Icons.home, label: "Home"),
NavBarItems(icon: Icons.email, label: "Email"),
NavBarItems(icon: Icons.phone, label: "Phone"),
NavBarItems(icon: Icons.settings, label: "Settings"),
],
),
),
)
copied to clipboard