如何在Flutter中创建弯曲的bottomBar？

Question

我想要一个弯曲的底部栏，其后有阴影：

我试图创建类似的东西，但是当我将bottomBar放在Scaffold上时，当我向下滚动时，它会切开主体。如果我尝试使脚手架的身体部位变圆，那么我将没有阴影。有谁知道这是怎么做到的吗 ？预先感谢

Answer 1

将其放入堆栈中。不要将底部导航栏直接添加到支架中。

尝试用自己的方式给你例如

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Some Text'),
      ),
      body: Stack(
        children: <Widget>[
          bodyContent,
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: bottomNavigationBar,
          ),
        ],
      ),
    );
  }

  Widget get bodyContent {
    return Container(color: Colors.red);
  }

  Widget get bottomNavigationBar {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
          BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), title: Text('3')),
          BottomNavigationBarItem(
              icon: Icon(Icons.multiline_chart), title: Text('4')),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    );
  }
}