Flutter 顶部带有圆形按钮的弯曲容器答案

【问题标题】：Curved Container with rounded button on top in FlutterFlutter 顶部带有圆形按钮的弯曲容器
【发布时间】：2019-08-17 01:07:58
【问题描述】：

我正在尝试在中间顶部创建一个带有曲线的容器，并在曲线内放置一个圆形按钮。它看起来应该类似于 Flutter 中的 Curved Navigation Bar 包，只是没有动画。

我尝试过使用 Stack 和 Positioned，但是，Flutter 并没有按照我的想象进行转换。

class CurvedContainerWithButtonAtTopCenter extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
   // TODO: implement build
    return Scaffold(
    body: Container(
      height: 200.0,
      child: Stack(
        children: <Widget>[
          Positioned(
             top: 30.0,
             right: 0.0,
             left: 0.0,
             child: Container(
                height: 170.0,
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 20.0, vertical:                 
                40.0),
                color: Colors.blue,
          )),
      Container(
        height: 60.0,
        width: 60.0,
        decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.circle),
        alignment: FractionalOffset.center,
        child: Container(
          margin: EdgeInsets.all(10.0),
          child: FloatingActionButton(),
        )
      )
    ],
  )
)
);
 }
}

我希望 Container 占据整个宽度并定位得更低一些。圆圈应位于容器顶部边框的中心。 Circle 还应该包含一个 FloatingActionButton。

【问题讨论】：

标签： flutter dart stack flutter-positioned

【解决方案1】：

我希望您现在已经找到了答案，但以防万一……您可以在下面找到一个潜在的解决方案：

构建函数

 Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Text('Hello'),
        ),
        bottomNavigationBar: _navigationDrawer,
        floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.orange,
            child: Icon(Icons.add),
            onPressed: () {}),
        floatingActionButtonLocation:
            FloatingActionButtonLocation.centerDocked);
}

底部导航的getter

 Widget get _navigationDrawer {
    return Container(
      height: 80.0,
      child: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              Padding(
                padding: const EdgeInsets.only(right: 50),
                child: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {},
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 50),
                child: IconButton(
                  icon: Icon(Icons.note_add),
                  onPressed: () {},
                ),
              ),
              IconButton(
                icon: Icon(Icons.portrait),
                onPressed: () {},
              ),
            ],
          )),
    );
  }

结果

希望这会有所帮助 :) 编码愉快！！！

【讨论】：