bottom_navbar_with_indicator

Description:

bottom navbar with indicator

Bottom Navbar With Custom Indicator #
bottom_navbar_with_indicator is a Flutter package for a fully customizable bottom navigation bar with line indicators and gradient. ✨ ✨
It allows custom bottom bar with any Custom Widget (Stateless or Stateful).
Very smooth animations supporting Android, iOS & WebApp, DesktopApp.
Show Cases #




Why? #
We build this package because we wanted to:

have a complete customizable bottom bar with indicators.
be able to add gradient color.
pass dynamic icon with label.
choose our own style like IconSize, FontSize, selectedColor,unSelectedColor, splashColor & call back function (onTap).

Installation #
Create a new project with the command
flutter create MyApp
copied to clipboard
Add
bottom_navbar_with_indicator: ...
copied to clipboard
to your pubspec.yaml of your flutter project.
OR
run
flutter pub add bottom_navbar_with_indicator
copied to clipboard
in your project's root directory.
In your library add the following import:
import 'package:bottom_navbar_with_indicator/bottom_navbar_with_indicator.dart';
copied to clipboard
For help getting started with Flutter, view the online documentation.
Usage #
Usage without gradient: #
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyExample(),
);
}
}

class MyExample extends StatefulWidget {
const MyExample({super.key});

@override
_MyExampleState createState() => _MyExampleState();
}

class _MyExampleState extends State<MyExample> {
int _selectedIndex = 0; //default index
static const String basePath = "assets/images";
static const String accountImage = "$basePath/account.png";

final List<Widget> _widgetOptions = [
const Text('Home'),
const Text('Account'),
const Text('Leaves'),
const Text('Loyalty'),
const Text('Requests'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomLineIndicatorBottomNavbar(
selectedColor: Colors.blue,
unSelectedColor: Colors.black54,
backgroundColor: Colors.white,
currentIndex: _selectedIndex,
unselectedIconSize: 15,
selectedIconSize: 20,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
enableLineIndicator: true,
lineIndicatorWidth: 3,
indicatorType: IndicatorType.top,
// gradient: LinearGradient(
// colors: [Colors.pink, Colors.yellow],
// ),
customBottomBarItems: [
CustomBottomBarItems(
label: 'Home',
icon: Icons.home,
// assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Account',
//icon: Icons.account_box_outlined,
assetsImagePath: accountImage,
isAssetsImage: true,
),
CustomBottomBarItems(
label: 'Leaves',
icon: Icons.calendar_today_outlined,
// assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Loyalty',
icon: Icons.card_giftcard_rounded,
assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Requests',
// icon: Icons.list,
assetsImagePath: accountImage,
isAssetsImage: true,
),
],
),
);
}
}
copied to clipboard
Usage with gradient : #
class MyExample extends StatefulWidget {
const MyExample({super.key});

@override
_MyExampleState createState() => _MyExampleState();
}

class _MyExampleState extends State<MyExample> {
int _selectedIndex = 0; //default index
static const String basePath = "assets/images";
static const String accountImage = "$basePath/account.png";

final List<Widget> _widgetOptions = [
const Text('Home'),
const Text('Account'),
const Text('Leaves'),
const Text('Loyalty'),
const Text('Requests'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomLineIndicatorBottomNavbar(
selectedColor: Colors.blue,
unSelectedColor: Colors.black54,
backgroundColor: Colors.white,
currentIndex: _selectedIndex,
unselectedIconSize: 15,
selectedIconSize: 20,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
enableLineIndicator: true,
lineIndicatorWidth: 3,
indicatorType: IndicatorType.top,
gradient: LinearGradient(
colors: [Colors.pink, Colors.yellow],
),
customBottomBarItems: [
CustomBottomBarItems(
label: 'Home',
icon: Icons.home,
// assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Account',
//icon: Icons.account_box_outlined,
assetsImagePath: accountImage,
isAssetsImage: true,
),
CustomBottomBarItems(
label: 'Leaves',
icon: Icons.calendar_today_outlined,
// assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Loyalty',
icon: Icons.card_giftcard_rounded,
assetsImagePath: accountImage,
isAssetsImage: false,
),
CustomBottomBarItems(
label: 'Requests',
// icon: Icons.list,
assetsImagePath: accountImage,
isAssetsImage: true,
),
],
),
);
}
}
copied to clipboard
Constructor #
Basic



Parameter
Default
Description
Required




icon
-
Icon of bottom bar widget.
true


label
-
Label text of bottom bar.
true


label
-
Label text of bottom bar.
true


selectedColor
-
Bottom tab selected color.
false


unSelectedColor
-
Bottom tab unselected color.
false


unSelectedFontSize
11
Unselected tab font size
false


selectedFontSize
12
Selected tab font size.
false


selectedIconSize
20
Selected tab icon size.
false


unselectedIconSize
15
UnSelected tab icon size.
false


splashColor
-
On click splash color.
false


currentIndex
-
bottom nav bar list current index.
false


onTap
-
On tap callback function to handle user click.
true


index
-
List index.
true


enableLineIndicator
false
Set to true if showing line indicator.
false


lineIndicatorWidth
3
Width of line indicator.
false


indicatorType
IndicatorType.top
Indicator type for ex. top and bottom.
false


gradient
-
Gradient property for enable gradient color.
false