颤振定制设计形状

时间:2021-01-15 17:26:02

标签: flutter widget margin shapes

我有我想要编码的这个设计(如图所示),我尝试将形状制作为 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'),
                  ),

enter image description here

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

您的选择是:

  1. 使用 CustomClipper class

    剪裁
  2. 使用 CustomPainter class

    绘图
  3. 使用 RenderBox class

    绘图
  4. 使用 Stack class

    堆叠剪下的容器
  5. 使用图片

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