颤振定制设计形状

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

您的选择是：

1. 使用CustomClipperclass进行剪辑

2. 使用CustomPainterclass绘图

3. 使用RenderBoxclass绘图

4. 用Stackclass堆叠裁剪的容器

5. 使用图片

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

Answer 2

边距可能来自安全区域。由于您位于 Scaffold 的主体中，因此您可能不需要它。先尝试删除 SafeArea，然后再尝试自定义画家之类的操作。

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

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