Flutter

Question

如何在Flutter中构建一排左右两端圆角的按钮？我想在我的第一个 flutter 应用程序中添加这样的东西。 imgur.com 上的示例取自我的华为 phone.

上的消息应用程序

我可以做一系列并排坐着的个人FloatingActionButton.extended。或者一行带有 RoundedRectangleBorder 的 RaisedButtons。但是这两个看起来有点奇怪 - Two rounded buttons

我猜是

shape: new LeftRoundedRectangleBorder(borderRadius: new BorderRadius.circular(30)),

接着是

shape: new RightRoundedRectangleBorder(borderRadius: new BorderRadius.circular(30)),

可能没问题，除非它们实际上并不存在。

我应该如何将我的小部件放在一起，以便在我的应用程序底部制作一个工具栏，就像这样？我想我也应该对这个完全 non-standard 的设计持开放态度，这就是为什么我发现它对编码有点挑战。谢谢

Answer 1

    class RoundedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: SizedBox(
        height: 60.0,
        width: 250.0,
        child: Material(
          shape: StadiumBorder(),
          textStyle: Theme.of(context).textTheme.button,
          elevation: 6.0,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(left: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.add,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("New Message")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(right: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.more_vert,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("More")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
      body: Container(),
    );
  }
}

Flutter - 一排按钮，第一个和最后一个具有圆形端部形状

Flutter - Row of buttons with first and last having rounded end shape

flutter-layout