带有居中的小部件上的小部件

Question

我想将一个小部件放到其他人的视图中。

这是我所做的

在没有倒数计时器的普通版本中，屏幕内没有空白。它是 %50 %50 除以颜色（红色和蓝色）。

我想做的是在不创建空格的情况下添加倒数计时器。直接将其添加到中心的那些颜色上。

我看到使用 Stack 可以做到。我试过了，但无法去除白色区域。

这是我的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: [
          Expanded(
            flex: 40,
            child: new Container(
              width: double.infinity,
              child: new Column(
                children: <Widget>[
                  box1 = new Expanded(
                    flex: boxSize1,
                    child: InkWell(
                      onTap: () {
                        clickBox1();
                      }, // Handle your callback
                      child: new Container(
                        alignment: Alignment.topCenter,
                        color: colorRandom,
                      ),
                    ),
                  ),
                  TimeCircularCountdown(
                    unit: CountdownUnit.second,
                    countdownTotal: 3,
                    onUpdated: (unit, remainingTime) => print('Updated'),
                    onFinished: () {
                      setState(() {
                        visibility = false;
                      });
                    },
                  ),
                  box2 = new Expanded(
                    flex: boxSize2,
                    child: InkWell(
                      onTap: () {
                        clickBox2();
                      }, // Handle your callback
                      child: new Container(
                        alignment: Alignment.topCenter,
                        color: color,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                  child: Container(
                color: Colors.blue,
              )),
              Expanded(
                  child: Container(
                color: Colors.red,
              )),
            ],
          ),
          Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: Colors.white,
              ),
              // use your countdown timer widget in child
            ),
          )
        ],
      ),
    );
  }