Custom floating bottom navigation bar has white background flutter - flutter

Question

I am trying to create a custom floating bottom navigation bar and i create a widget and added a margin to create a floating effect but it adds a white background.
I need to create it without the white background.
Here is my code;
Scaffold(
bottomNavigationBar: AnimatedBottomBar(
currentIcon: viewModel.currentIndex,
onTap: (int index) => viewModel.updateIndex(index),
icons: viewModel.icons,
),
body: viewModel.pages[viewModel.currentIndex],
);
Then the animated bottom bar
import 'package:flutter/material.dart';
import 'package:woneserve_updated_mobile_app/app/theming/colors.dart';
import 'package:woneserve_updated_mobile_app/models/icon_model.dart';
class AnimatedBottomBar extends StatelessWidget {
final int currentIcon;
final List<IconModel> icons;
final ValueChanged<int>? onTap;
const AnimatedBottomBar({
Key? key,
required this.currentIcon,
required this.onTap,
required this.icons,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
child: Container(
margin: const EdgeInsets.all(40),
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 2), // changes position of shadow
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: icons
.map(
(icon) => GestureDetector(
onTap: () => onTap?.call(icon.id),
child: AnimatedSize(
duration: const Duration(milliseconds: 900),
child: Icon(
icon.icon,
size: currentIcon == icon.id ? 26 : 23,
color: currentIcon == icon.id ? primaryColor : Colors.black,
),
),
),
)
.toList(),
),
),
);
}
}
How can i create the same effect without the white background? Any help would be appreciated.

Answer 1

You might need to add extendBody: true in Scaffold.

Answer 2

my friend
for solve this problem you have 3 way.
use extendBody: true in your Scaffold.
use theme in MaterialApp Widget.(see below)
ThemeData(
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: Colors.transparent,
),
),
use floatingActionButton instead of bottomNavigationBar in Scaffold.(see below)
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: AnimatedBottomBar(...),
...
)

Answer 3

Try remove first Container in build method. If not work, remove margin and padding in second Container.