如何使BottomNavigationBar透明？

Question

我有四个不同的屏幕，我使用自定义的 BottomNavigationBar 来管理所有这些屏幕，但我似乎找不到一种方法使其透明，以便它显示不同屏幕的背景。我认为这可能是因为我从不同的类导入它，因为经过多次尝试后，似乎如果我在拥有屏幕的同一个小部件中“从头开始”制作它，我可以使其透明，但如果我正在导入它，但我无法导入。

我已经尝试将高度设置为0，使其背景透明，将extendBodyBehindAppBar设置为true并将extendBody：true设置为true，但没有提示起作用。

这是屏幕外观的 gif：

如有任何帮助，我们将不胜感激。

这是

// 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'),           
        ],
        );
  }
}

我的主屏幕，我称之为自定义导航栏

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],
    );
  }
}

这是我主屏幕的一小部分，所以你可以看到即使在那个屏幕中我也试图使自定义BottomNavBar透明

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
                

也许问题可能与我有一个应用程序主题有关，所以我添加了我的主小部件+我的应用程序主题

主要小部件：

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'
  );
}

如果你们中的任何人不知道如何使自定义导航栏透明，但有任何其他提示，我们也将不胜感激。

Answer 1

你可以试试这个代码。运行良好。

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),
      ),
    );
  }
}