flutter 定制设计形状

Question

i have this design(shown in the photo) which I want to code, I tried making the shape as an svg pic and put it in a container but I don't think that's the best way and also there is a margin on the sides that won't go even when I remove the padding(shown in the picture on the right)

my code is:

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

The margin propably stems from the SafeArea. Since you are in the body of a Scaffold, you probably do not need it there. Try to remove the SafeArea first, before you try sommething like a custom painter.

Also, you could use a package like flutter_svg to embed the SVG shape into your app. This allows you to use the usual fitting parameters to position the shape.

To position the logo according to your mockup, you have to stack it over the SVG background. Use the stack widget for that.

Answer 2

Your options are:

1. Clipping using CustomClipper class

2. Drawing using CustomPainter class

3. Drawing using RenderBox class

4. Stacking clipped containers with Stack class

5. Using images

It's unclear what the best option is because I am not sure what you will do after this is drawn (gesture detect, position, etc). But I would say option 2 is generally the most common.