是否可以使用 Flutter 创建类似的东西？ #设计挑战

Question

我想知道是否有人可以帮助我使用 Flutter 设计这样的东西：

到目前为止，我已经尝试在彼此之上创建两个容器，但我不知道如何在卡片中间制作那个半圆。

另外，如果我们能把这张图片分成相等的两半，分别为两半编写代码，那就太好了。原因是，我需要将数据放入两半，我希望高度是动态的（不固定）。

我想使用最好的设计方法来创建它。非常感谢任何帮助。

Answer 1

使用 CustomPaint，了解更多 here, and fluttershapemaker 可以帮助您轻松完成绘制或将此 SVG 转换为 CustomPaint 代码。

Answer 2

有几种方法可以做到这一点

您可以使用普通的矩形容器，并在左侧给 topRight 和 bottomRight 高 borderRadius，而在右侧给容器 topLeft 和 bottomLeft 高边界半径，而不是制作圆容器。代码看起来像

Container(height:MediaQuery.of(context).size.height,aligment:Alignment.center, child:Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(100),
            bottomRight: Radius.circular(100),
          ),
        ),
      ),
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(100),
            bottomLeft: Radius.circular(100),
          ),
        ),
      )
    ]),),

如果您想坚持创建一个圆圈，您可以将圆圈添加到堆栈中并将它们放置在负值左右。导致你想怎么切圆就怎么切。

希望对您有所帮助

Answer 3

我是这样做的:

用两个 children.
创建第一个容器child。
创建堆栈作为第二个 child。

现在，由于我们有堆栈作为第二个 child，我们可以在其中包含三个 children。

第一个 child 是左 circle/semi 圆，位于 left:0 和 top:0。
第二个 child 是右 circle/semi 圆，位于 right:0 和 top:0
第三个 child 是一个没有位置限制的容器。放置 left:0 和 right:0 以使其一直拉伸并适合屏幕。

这将为我们提供所需的结果，而无需使用任何其他复杂的方法。

是否可以使用 Flutter 创建类似的东西？ #设计挑战

Is it possible to create something like this using Flutter ? #DesignChallenge

responsive-design

flutter

flutter-layout