Flutter.如何在容器中绘制这些设计

Question

在此处输入图像描述

请告诉我如何在容器中绘制这些环绕的几何线。

绘制容器小部件后，我应该如何在容器中绘制这些自定义几何设计

Answer 1

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Square'),
      ),
      body: Center(
        child: Column(
          children: [
            SquarePercentIndicator(
              width: 140,
              height: 140,
              startAngle: StartAngle.bottomRight,
              reverse: true,
              borderRadius: 10,
              shadowWidth: 1.5,
              progressWidth: 5,
              shadowColor: Colors.grey,
            ),
          ],
        ),
      )
    );
  }

}

Answer 2

我建议你使用figma来设计这些类型的线条和形状，并将其导出为png图像。

如果要对整个图进行编码，不推荐，但可以实现，使用圆角容器，但会有很多限制