如何删除底部导航栏（Flutter）中容器的背景颜色？

Question

我正在创建一个带有容器的底部导航栏。我试图消除背景中的这种颜色。我要解决

如何去除背景中的那种颜色？

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: pages[pageIndex],
      bottomNavigationBar: Container(
        width: double.infinity,
        height: Sizes.height_120,
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.5),
          boxShadow: AppShadows.navBarBoxShadow,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(
            pages.length,
            (index) => BottomNavigationIcons(
              imageName: pageIndex == index
                  ? activeIcons[index]
                  : inactiveIcons[index],
              vertical: index == 0 ? 28 : 36,
              onTap: () {
                setState(() {
                  pageIndex = index;
                });
              },
            ),
          ),
        ),
      ),
    );
  }

Answer 1

在底部导航栏的主容器周围添加一个 ClipRRect

bottomNavigationBar: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
          ),
          child: Container()

Answer 2

用另一个容器包裹container并将颜色设置为Colors.transparent

bottomNavigationBar: Container(
          color: Colors.transparent,
          width: double.infinity,
          height: 120,
          child: Container(
            decoration:  const BoxDecoration(
              color: Colors.red,
              //color: Colors.black.withOpacity(0.5),
              borderRadius: BorderRadiusDirectional.only(
                topStart: Radius.circular(35),
                topEnd: Radius.circular(35),
              ),
              boxShadow: AppShadows.navBarBoxShadow,

Answer 3

用带有圆形 BoxDecoration 的容器包裹底部导航栏。使用 cliprect 删除背景。为操作和路由设置带有 BottomNavigationBarItems 的子 BottomNavigationBar。

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Test_BottomNavBar(),
    );
  }
}

class Test_BottomNavBar extends StatefulWidget {
  Test_BottomNavBar({Key? key}) : super(key: key);

  @override
  State<Test_BottomNavBar> createState() => _Test_BottomNavBarState();
}

class _Test_BottomNavBarState extends State<Test_BottomNavBar> {
  int _current_index=0;
  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(appBar: AppBar(title:Text("Bottom Nav Bar")),body:
    
    Container(
      height: double.infinity,
      width:double.infinity,
      decoration: BoxDecoration(
        image: DecorationImage(
          image:AssetImage("assets/images/background.png"),
          fit:BoxFit.cover),
        
      ),
      child:
      Center(
      child:Text("Bottom Nav Bar",style:TextStyle(fontSize: 60,color:Colors.white))
      
      ),
    ),
     

    bottomNavigationBar:
    Container(                                             
  decoration: BoxDecoration(                                                   
    borderRadius: BorderRadius.only(                                           
      topRight: Radius.circular(20), topLeft: Radius.circular(20)),            
    boxShadow: [                                                               
      BoxShadow(color: Colors.green, spreadRadius: 0, blurRadius: 10),       
    ],                                                                         
  ),                                                                           
  child: ClipRRect(                                                            
    borderRadius: BorderRadius.only(                                           
    topLeft: Radius.circular(20.0),                                            
    topRight: Radius.circular(20.0),                                           
    ),         
    
     child:BottomNavigationBar(
      currentIndex: _current_index,
      selectedItemColor: Colors.orange,
        
      onTap:(int index){
          setState(() {
            _current_index=index;
          });

      },
      items:[
        BottomNavigationBarItem(
          icon: Icon(Icons.home)
          ,label:"Home"
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.email),
          label:"Email"
        )
      ]

    ),
    )))
    ;
  }
}

如何删除底部导航栏（Flutter）中容器的背景颜色？

How to remove background color to a container in Bottom Navigation bar (Flutter)?

dart

flutter

flutter-layout