Dot Bottom Navigation Bar By Using Getx
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
Then, run:
flutter pub get
Then import the package in your dart code:
import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';
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();
}
}