颤振自定义设计形状

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。由于您在脚手架的主体中，因此您可能在那里不需要它。先尝试移除 SafeArea，然后再尝试自定义画家之类的东西。

此外，您可以使用 flutter_svg to embed the SVG shape into your app. This allows you to use the usual fitting 参数之类的包来定位形状。

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

Answer 2

您的选择是：

剪辑使用 CustomClipper class
绘图使用 CustomPainter class
绘图使用 RenderBox class
使用 Stack class
堆叠剪裁的容器
使用图像

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

颤振自定义设计形状

flutter custom design shape

margin

widget

shapes

flutter