dot_bottom_navigation_bar_getx

Description:

dot bottom navigation bar getx

Dot Bottom Navigation Bar By Using Getx









https://github.com/muneeb-shahid/Favourite-button-functionality-Getx-Flutter/assets/115135886/6ae21929-df1e-4437-8d04-6426133a7a4c
Introduction
The dot_bottom_navigation_bar_getx package provides a customizable and visually appealing dotted bottom navigation bar for Flutter developers using the GetX state management library. This package allows you to easily integrate a bottom navigation bar into your Flutter application with smooth navigation between screens.
Features
Easy Integration: Seamlessly integrates with GetX-powered Flutter projects.

Visual Customization: Customize the appearance with versatile options.

Smooth Transitions: Enjoy smooth and animated screen transitions.

Dynamic Screens: Supports dynamic screen changes based on the selected index.

App Bar Integration: Includes an app bar for a comprehensive navigation experience.

Efficient State Management: Leverages the power of GetX for reactive state management.
Installation
To use dot_bottom_navigation_bar_getx, add the following to your pubspec.yaml file:
dependencies:
dot_bottom_navigation_bar_getx: ^1.0.0
copied to clipboard
Then, run:
flutter pub get
copied to clipboard
Then import the package in your dart code:
import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';
copied to clipboard
Complete Implementation
import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(const MyApp());
}

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dot Bottom Navigation Bar',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const BottomNavigationView());
}
}


/// View Class

class BottomNavigationView extends StatelessWidget {
const BottomNavigationView({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return GetBuilder<BottomNavigationViewModel>(
init: BottomNavigationViewModel(),
builder: (bottomNavController) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text(
"Bottom Nested Navigation",
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
),
backgroundColor: Colors.amber,
body: bottomNavController.screens[bottomNavController.currentIndex],
bottomNavigationBar:

/// If you want to remove splash effect from bottom navigation then use the theme below.
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(
elevation: 20,
type: BottomNavigationBarType.fixed,
selectedFontSize: 0,
unselectedFontSize: 0,
backgroundColor: Colors.white,
selectedItemColor: Colors.black,
showUnselectedLabels: false,
currentIndex: bottomNavController.currentIndex,
onTap: bottomNavController.changeIndex,
items: const [
BottomNavigationBarItem(
activeIcon: Column(
children: [
Icon(
Icons.home,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/home.png"),
// color: Colors.green,
// ),
SizedBox(
height: 10,
),
CircleAvatar(
backgroundColor: Colors.green,
radius: 3,
),
],
),
icon: Icon(
Icons.home_outlined,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/home_outlined.png"),
// color: Colors.green,
// ),
label: "",
),
BottomNavigationBarItem(
activeIcon: Column(
children: [
Icon(
Icons.favorite,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/favorite.png"),
// color: Colors.green,
// ),
SizedBox(
height: 10,
),
CircleAvatar(
backgroundColor: Colors.green,
radius: 3,
),
],
),
icon: Icon(
Icons.favorite_outline,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/favorite_outline.png"),
// ),
label: "",
),
BottomNavigationBarItem(
activeIcon: Column(
children: [
Icon(
Icons.settings,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/settings.png"),
// color: Colors.green,
// ),
SizedBox(
height: 10,
),
CircleAvatar(
backgroundColor: Colors.green,
radius: 3,
),
],
),
icon: Icon(
Icons.settings_outlined,
color: Colors.green,
),

/// Here you can use a Image like this:
// Image(
// image: AssetImage(
// "assets/images/settings_outlined.png"),
// ),
label: "",
),
],
),
),
);
},
);
}
}


/// View Model Class
class BottomNavigationViewModel extends GetxController {
int currentIndex = 0;
final screens = [
/// you can call your any class here just like DataLibrary()
const Center(
child: Text(
"Home Screen",
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
/// you can call your any class here just like CalendarComponent(),
const Center(
child: Text(
"Favorite Screen",
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
/// you can call your any class here just like DashboardComponent()
const Center(
child: Text(
"Setting Screen",
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
];

void changeIndex(int index) {
currentIndex = index;
update();
}
}
copied to clipboard
Issues
If you encounter any issues or have suggestions for improvement, please visit the
GitHub repository and submit an issue or pull request.
Developed By
Muneeb Shahid