是否有一种方法可以在颤抖的一半中绘制容器的背景

Question

我知道我可以使用梯度，但是两个梯度选项都不适合我，因为我需要填充容器的背景作为进度栏。我可以使用定制器，但是通过设计，容器具有边框半径，我不知道如何使用定制器制作边界半径。有什么想法吗？

Answer 1

一种方法是使用 Stack widget

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Some Stuff"),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              height: 100.0,
              width: 300.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.grey,
              ),
            ),
            Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );

Answer 2

当您构建组件时，可以使用媒体查询访问屏幕宽度和高度，将其除以您想要的任何数字，并将其作为参数传递给您的容器。

Containter(
   width: MediaQuery.of(context).size.width/2,
   height: MediaQuery.of(context).size.height/2,
)

如果您想使其动态化，则可以根据该变量的更改替换数字。