How to make bottom bar same like in image - flutter

Question

how can I make bottom bar to look same like in image, top corners to be rounded and to icons have the space same like in image.
here is code of bottomMenu bar how is right now.. so basically to have rounded corner and to icon have padding from left and right. but if I add whole BottomNavigationBar in padding then it not move just icons.. hope that somebody can help me to fix this..
Scaffold(
body: _handlePages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: <BottomNavigationBarItem>[
_currentIndex == 0
? BottomNavigationBarItem(
icon: Image.asset(
"assets/images/cam.png",
height: 25,
color: appColorBlue,
),
label: "",
)
: BottomNavigationBarItem(
icon: Image.asset(
"assets/images/cam.png",
height: 25,
color: appColorGrey,
),
label: "",
),
_currentIndex == 1
? BottomNavigationBarItem(
icon: Image.asset(
"assets/images/call_blue.png",
height: 27,
color: appColorBlue,
),
label: "",
)
: BottomNavigationBarItem(
icon: Image.asset(
"assets/images/call_blue.png",
height: 27,
color: appColorGrey,
),
label: "",
),
_currentIndex == 2
? BottomNavigationBarItem(
icon: Image.asset(
"assets/images/chat.png",
height: 27,
color: appColorBlue,
),
label: "",
)
: BottomNavigationBarItem(
icon: Image.asset(
"assets/images/chat.png",
height: 27,
color: appColorGrey,
),
label: "",
),
_currentIndex == 3
? BottomNavigationBarItem(
icon: Container(
height: 30,
width: 30,
child: new Stack(
children: <Widget>[
globalImage.length > 0
? CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(globalImage),
)
: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[400],
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset(
"assets/images/user.png",
height: 10,
color: Colors.white,
),
)),
],
),
),
// Image.asset(
// "assets/images/settings.png",
// height: 25,
// color: appColorBlue,
// ),
label: "",
)
: BottomNavigationBarItem(
icon: Container(
height: 30,
width: 30,
child: new Stack(
children: <Widget>[
globalImage.length > 0
? CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(globalImage),
)
: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[400],
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset(
"assets/images/user.png",
height: 10,
color: Colors.white,
),
)),
],
),
),
// Image.asset(
// "assets/images/settings.png",
// height: 25,
// color: appColorGrey,
// ),
label: "",
),
],
),
),

Answer 1

You can create your own bottom nav bar so that you can design it freely.
Sample...
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: List.generate(
100,
(index) => ListTile(
title: Text('TEST $index'),
),
),
),
bottomNavigationBar: const RoundedBottomNavBar(
onTap: print,
children: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.camera_alt)),
BottomNavigationBarItem(icon: Icon(Icons.phone)),
BottomNavigationBarItem(icon: Icon(Icons.send)),
BottomNavigationBarItem(icon: Icon(Icons.circle)),
],
childrenPadding: const EdgeInsets.symmetric(horizontal: 10),
),
);
}
}
class RoundedBottomNavBar extends StatefulWidget {
const RoundedBottomNavBar({
required this.onTap,
required this.children,
this.background = Colors.white,
this.topCornerRadius = 20,
this.childrenPadding = const EdgeInsets.all(0),
});
final ValueChanged<int> onTap;
final List<BottomNavigationBarItem> children;
final Color background;
final double topCornerRadius;
final EdgeInsetsGeometry childrenPadding;
#override
_RoundedBottomNavBarState createState() => _RoundedBottomNavBarState();
}
class _RoundedBottomNavBarState extends State<RoundedBottomNavBar> {
late Radius _topCornerRadius;
int _selectedIndex = 0;
#override
void initState() {
super.initState();
_topCornerRadius = Radius.circular(widget.topCornerRadius);
}
#override
Widget build(BuildContext context) {
int tmpCount = 0;
return Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: widget.background,
borderRadius: BorderRadius.only(
topLeft: _topCornerRadius,
topRight: _topCornerRadius,
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5,
offset: Offset(0, 3),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.children.map((BottomNavigationBarItem item) {
final int index = tmpCount++;
return GestureDetector(
onTap: () {
setState(() => _selectedIndex = index);
widget.onTap(index);
},
child: Opacity(
opacity: _selectedIndex == index ? 1 : 0.3,
child: Padding(
padding: widget.childrenPadding,
child: item.icon,
),
),
);
}).toList(),
),
),
);
}
}

Answer 2

a solution can be adding your custom bottomNvigationBar, playing with the colors and the shadow, also de radius, something like this:
this is the body
Scaffold(
bottomNavigationBar: bottom(),
appBar: AppBar(
title: Center(child: Text("test")),
),
body: Container(),
);
and here is the bottom widget:
Widget bottom() {
return Container(
height: 60, //you can do it with mediaQuery
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 5.0,
spreadRadius: 2.0,
),
],
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
print("hello, i press ");
},
child: Icon(
Icons.camera_alt,
size: 35,
),
),
GestureDetector(
onTap: () {
print("hello, i press ");
},
child: Icon(
Icons.phone,
size: 35,
),
),
GestureDetector(
onTap: () {
print("hello, i press ");
},
child: Icon(
Icons.near_me,
size: 35,
)),
],
));
}
here a screenshot of the result: