easy_bottom_navbar

Description:

easy bottom navbar

This Flutter package provides a easy navigation bar that allows you to create a unique and visually appealing bottom navigation bar for your mobile app. It includes various customization options such as different gradients for active and inactive icons, adjustable icon sizes, and more.
Features #

Create a custom bottom navigation bar with a unique look and feel.
Customize the active and inactive gradients for the icons.
Adjust the size of the active and inactive icons.
Set the initial selected index for the navigation bar.
Use a gradient as the background for the entire navigation bar screen.

Getting started #
To use this package in your Flutter project, follow these steps:

Add the package to your 'pubspec.yaml' file:

dependencies:
easy_bottom_navbar: ^latestVerison
copied to clipboard


Install the dependencies by running flutter pub get in the terminal.


Import the package in your Dart file where you want to use the easy navigation bar:


import 'package:easy_bottom_navbar/easy_bottom_navbar.dart';
copied to clipboard

Now you can create an instance of the 'GradientNavBar' widget by passing the required parameters, such as 'widgetList' and 'iconList', which represent the list of widgets and icons for the navigation items, respectively.

Usage #
An simple example to describe the package
// Import the package
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Easy Navigation Bar Example'),
),
body: MyHomePage(),
),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GradientNavBar(
// List of widget screens to display for each navigation item
widgetList: [
Screen1(),
Screen2(),
Screen3(),
],

// List of icons for the navigation items
iconList: [
Icons.home,
Icons.search,
Icons.person,
],

// easyization options (you can modify these as per your needs)
activeGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color.fromRGBO(233, 210, 149, 1),
Color.fromRGBO(255, 170, 87, 1),
Color.fromRGBO(250, 97, 215, 1),
Color.fromRGBO(253, 127, 176, 1),
],
),
inactiveGradient: LinearGradient(
colors: [
Color.fromRGBO(79, 80, 123, 1),
Color.fromRGBO(64, 65, 101, 1),
],
),
activeIconSize: 38,
inactiveIconSize: 35,
initialIndex: 1,
screenGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF252429), Color(0xFF171717)],
),
);
}
}

class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Screen 1'),
);
}
}

class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Screen 2'),
);
}
}

class Screen3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Screen 3'),
);
}
}

copied to clipboard
Additional information #

The package includes a GradientNavBar widget and a corresponding state _GradientNavBarState to handle the state of the navigation bar.
It uses the BottomNavigationBar widget to display the easy navigation bar at the bottom of the screen.
The widgetList contains the screens that will be displayed when you switch between navigation items.
The iconList contains the icons for each navigation item.
The activeGradient and inactiveGradient parameters allow you to set different gradients for the active and inactive icons, respectively.
The activeIconSize and inactiveIconSize parameters allow you to adjust the size of the icons for the active and inactive states.
The initialIndex parameter allows you to set the initial selected index for the navigation bar.
The screenGradient parameter allows you to set a gradient as the background for the entire navigation bar screen.