How to make a BottomNavigationBar transparent?

Question

I have four different screens, and I'm using a custom BottomNavigationBar to manage all of these screens, but I can't seem to find a way to make it transparent so it shows the background of the different screens. I think it might be because I'm importing it from a different class, because after trying multiple times it seems that if I make it "from scratch" in the same widget where I have the screen I can make it transparent, but if I'm importing it I cannot.

I already tried making the elevation 0, making its background transparent, setting extendBodyBehindAppBar as true and extendBody: true, but no tip is working.

Here is a gif of how the screen looks:

Any help is appreciated.

Here is the

// in case anyone edits this doc: hi i'm the op and my color is pink.
// my customNavBar

class CustomBottomNavigationBar extends ConsumerWidget {
  const CustomBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final navigationProv = ref.watch(navigationProvider);
    final colors = Theme.of(context).colorScheme;

    return BottomNavigationBar(
        // here i added the tips for making it transparent
      elevation: 0,
      backgroundColor: Colors.transparent,
      unselectedItemColor: colors.secondary,
      selectedItemColor: colors.primary,
      currentIndex: navigationProv,
      onTap: (value)=> ref
        .watch(navigationProvider.notifier)
        .update( (state)=> value),
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
           label: 'Inicio'),
           
        BottomNavigationBarItem(
          icon: Icon(Icons.music_note),
           label: 'Canción'),
           
        BottomNavigationBarItem(
          icon: Icon(Icons.photo),
           label: 'Foto'),
           
        BottomNavigationBarItem(
          icon: Icon(Icons.text_snippet_rounded),
           label: 'Poema'),           
        ],
        );
  }
}

my home screen where i call the customNavBar

import 'package:amptr/presentation/shared/widgets/widgets.dart';

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    final navigationProv = ref.watch(navigationProvider);

// here is where i have my screens stored for the body of the scaffold

    final screens = [
      FadeInRight(
        duration: const Duration(seconds: 1),
        child: const GreetingScreen()),
      const DailySongScreen(),
      const DailyPhotoScreen(),
      const DailyPoemScreen(),
    ];

    return Scaffold(
        // once again, the tips for making the bottomNavBar transparent
      extendBodyBehindAppBar: true,
      extendBody: true,
      bottomNavigationBar: const CustomBottomNavigationBar(),
      body: screens[navigationProv],
    );
  }
}

this is a small fragment of my main screen, so you can see that even in that screen i am trying to make the customBottomNavBar transparent

class _EveningScreen extends StatelessWidget {
  const _EveningScreen({
    
    required this.size,
  });

  final Size size;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        extendBody: true,
        backgroundColor: Colors.blue[300],
        body: Stack(
          children: [
            Column(children: [
                ....
                and the code goes so on, here i do not add the bottom nav bar because it already is being called in my homeScreen
                

Maybe the problem could be in relation with the fact that i have an AppTheme, so i'm adding my main widget + my appTheme

main widget :

Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: AppTheme().getTheme(),
      home: const HomeScreen()
    );
    
// app theme :
    
class AppTheme{
  ThemeData getTheme() => ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Color.fromARGB(255, 84, 117, 83),
    fontFamily: 'Red Hat'
  );
}

If any of you don't know how to make the custom nav bar transparent but have any other tips, they would also be appreciated.

Answer 1

You can try this code . It is working fine.

import 'package:flutter/material.dart';

class BottomNavigationScreen extends StatefulWidget {
  const BottomNavigationScreen({super.key});

  @override
  State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}

class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    CategoryScreen(),
    AddOrderScreen(),
    ProfileScreen()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.black.withOpacity(0.1),
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: 'Category',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_box),
            label: 'Add',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_pin),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white,
        onTap: _onItemTapped,
      ),
      extendBody: true,
      extendBodyBehindAppBar: true,
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
    );
  }
}