颤振定制设计形状

Question

我有我想要编码的这个设计（如图所示），我尝试将形状制作为 svg 图片并将其放入容器中，但我认为这不是最好的方法，而且还有一个边距在即使我去除填充物也不会消失的侧面（如右图所示）

我的代码是：

Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Align(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [

                  Padding(
                    padding: EdgeInsets.all(SizeConfig.blockSizeHorizontal * 2),
                    child: buildLocalImage('assets/images/shape.svg'),
                  ),

Answer 1

边距可能来自 SafeArea。由于您在 Scaffold 的主体中，因此您可能不需要它。在尝试使用自定义画家之类的东西之前，请先尝试移除 SafeArea。

此外，您可以使用 flutter_svg 之类的包将 SVG 形状嵌入到您的应用中。这允许您使用常用的 fitting 参数来定位形状。

要根据您的模型定位徽标，您必须将其堆叠在 SVG 背景上。为此使用 stack 小部件。

Answer 2

您的选择是：

1. 使用 CustomClipper class

   剪裁

2. 使用 CustomPainter class

   绘图

3. 使用 RenderBox class

   绘图

4. 使用 Stack class

   堆叠剪下的容器

5. 使用图片

目前还不清楚最好的选择是什么，因为我不确定在绘制后你会做什么（手势检测、位置等）。但我会说选项 2 通常是最常见的。