我想重新创建这个 UI，但我不知道如何塑造这个按钮 (Flutter)

Question

我正在尝试使用 Flutter 重新创建 iOS 的秒表 UI，我需要创建这两个按钮，但我不知道如何塑造它们。

我已经尝试过使用标准 CupertinoButton，但没有与圆形按钮相关的选项。

这是类，我想我应该把这两个按钮放在一行中。

class _StopWatchState extends State<StopWatch> {


@override
  Widget build(BuildContext context) {
    return CupertinoTabView(
      builder: (context) {
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('Stopwatch'),
          ),
          child: Column(
            children: <Widget>[
              Expanded(
                child: Center(
                  child: Text('00:00,000'),
                ),
              ),
              Expanded(
                child: Row(
                  children: <Widget>[
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Answer 1

您创建一个用于创建自定义按钮的函数，如下所示：

Widget createButton({Function onTap, Color buttonColor, Color borderColor}) {
  return GestureDetector(
      onTap: onTapAction,
      child: Container(
          height: 200,
          width: 200,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  color: buttonColor,
                  borderRadius: BorderRadius.circular(50.0),
                ),
              ),
              Container(
                child: Center(
                  child: actionTitle,
                ),
                height: 90,
                width: 90,
                decoration: BoxDecoration(
                  color: buttonColor,
                  borderRadius: BorderRadius.circular(45),
                  border: Border.all(width: 2.0, color: Colors.black),
                ),
              ),
            ],
          ),
        ),
    );

在此之后，您将它们添加到您的行小部件中：

Row(
  children: <Widget>[
    createButton(onTap: () {}, buttonColor: Colors.grey, borderColor: Colors.black),
    createButton(onTap: () {}, buttonColor: Colors.green, borderColor: Colors.black),
  ]
)