如何在BottomNavigationBar中添加边距或填充

Question

我正在尝试制作底部导航栏，但是在屏幕上左右填充。现在，我用容器包装BottomNavigationBar并在其中添加填充。问题是BottomNavigationBar的默认背景仍然包裹了所有图层，因此我们可以删除那里的背景颜色吗？

Goal

Current result

bottomNavigationBar: Container(
    margin: EdgeInsets.only(left: 16, right: 16),
    decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20)),
        ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      elevation: 0,
      currentIndex: _currentIndex,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.local_activity), title: Text('Activity')),
        BottomNavigationBarItem(
            icon: Icon(Icons.inbox), title: Text('Inbox')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ],
    ),
  ),

编辑：我已经删除了脚手架和所有主题的背景色，但是当您滚动项目时，您可能会看到那里仍然有背景Remove Scafold bg

编辑2：此处是活动代码

class App extends StatelessWidget {
  final List<Widget> _children = [
    Center(
      child: Container(
        height: 850,
        color: Colors.red,
      ),
    )
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: _children[0],
        bottomNavigationBar: Container(
          margin: EdgeInsets.only(left: 16, right: 16),
          decoration: BoxDecoration(
            color: Colors.amber,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(200), topRight: Radius.circular(200)),
          ),
          child: BottomNavigationBar(
            backgroundColor: Colors.transparent,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            elevation: 0,
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text('Home')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.local_activity), title: Text('Activity')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.inbox), title: Text('Inbox')),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person), title: Text('Profile')),
            ],
          ),
        ),
      ),
    );
  }
}

result

Answer 1

您需要将您的Body和BottomNavigationBar放在Stack下，以便可以将BottomNavigationBar放在主体内容的顶部。

您的完整代码将是：

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Widget> _children = [
      Center(
        child: Container(
          height: 850, // use 'MediaQuery.of(context).size.height' to fit the screen height,
          color: Colors.red,
        ),
      )
    ];

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Stack(
            children: <Widget>[
              _children[0],
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: bottomNavigationBar(),
              ),
            ],
          ),
        ));
  }
}

Widget bottomNavigationBar() {
  return Container(
    margin: EdgeInsets.only(left: 16, right: 16),
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(200), topRight: Radius.circular(200)),
    ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      elevation: 0,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.local_activity), title: Text('Activity')),
        BottomNavigationBarItem(icon: Icon(Icons.inbox), title: Text('Inbox')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ],
    ),
  );
}

来自How to set border radius to bottom app bar in a flutter app?的部分代码