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

问题描述

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

这是我所做的

enter image description here

在没有倒数计时器的普通版本中,屏幕内没有空白。它是 %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();
                      },color: color,],);

解决方法

Screenshot

 @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
            ),)
        ],);
  }