Customize bottom navigation bar in flutter - flutter

Question

I need to create a nav bar whose icons will look like this when active:
But mine looks like:
I usually use bottom_navy_bar.
So here is the code for it:
BottomNavyBarItem(
icon: _currentIndex == 0
? _buildActiveIcon(
'assets/icons/navigation/home_white_icon.png')
: _buildInactiveIcon("assets/icons/navigation/home_icon.png"),
activeColor: Colors.black,
inactiveColor: CustomColors.white,
title: Text(
"Home",
),
),
Code for active and inactive icon:
Widget _buildInactiveIcon(String assetUrl) {
return Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: CustomColors.white,
),
child: Center(
child: ImageIcon(
AssetImage(
assetUrl,
),
color: CustomColors.black,
),
),
);
}
Widget _buildActiveIcon(String assetUrl) {
return Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: Colors.black,
),
child: Center(
child: ImageIcon(
AssetImage(
assetUrl,
),
color: Colors.white,
),
),
);
}
So can this be done with the help pf any package or do I have to create some sort of custom navbar?

Answer 1

This is your solution:
Full page Screen Shot
BottomNavigationBarItem
BottomNavigatonBarItem Code:-
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Notification",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
Full Code:-
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: const Center(
child: Text(
"Screen 1",
style: TextStyle(fontSize: 28),
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
selectedItemColor: Colors.amber[800],
onTap: (v) {},
elevation: 0.0,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: const Icon(
Icons.home,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Home",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: const Icon(
Icons.notifications,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Notification",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
],
),
);
}
}

Answer 2

You can use persistent_bottom_nav_bar

Answer 3

Check also the package Salomon_bottom_navigation