Dart 颤振画弧布局

有没有人能引导我朝着正确的方向去构建类似下图的东西

---

感谢@pskink的帮助

class ButtonData {
  String text;
  Rect rect;
  double leftRadius;
  double rightRadius;

  ButtonData(this.text, this.rect, this.leftRadius, this.rightRadius);
}

Widget buildStack() {
  return LayoutBuilder(builder: (ctx, constraints) {
    var fs = applyBoxFit(BoxFit.contain, Size(32.0, 32.0), constraints.biggest);
    double scale = fs.destination.width / fs.source.width;
    print("sclae $scale");
    List<Widget> children = [
      SvgPicture.asset(
        "assets/drawing.svg",
        width: fs.destination.width,
        height: fs.destination.height,
      )
    ];
    var buttons = [
      ButtonData("button 1", Rect.fromLTWH(9.75, 4.75, 14.5, 4.5), 0, 1),
      ButtonData("button 2", Rect.fromLTWH(7.25, 10.75, 14.5, 4.5), 1, 0),
      ButtonData("button 3", Rect.fromLTWH(9.75, 16.75, 14.5, 4.5), 0, 1),
      ButtonData("button 4", Rect.fromLTWH(7.25, 22.75, 14.5, 4.5), 1, 0),
    ];
    children += buttons.map((buttonData) {
      return Positioned(
        left: buttonData.rect.left * scale,
        top: buttonData.rect.top * scale,
        width: buttonData.rect.width * scale,
        height: buttonData.rect.height * scale,
        child: OutlineButton(
          highlightColor: Colors.deepOrange,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.horizontal(
              left: Radius.circular(4.5 * scale * buttonData.leftRadius),
              right: Radius.circular(4.5 * scale * buttonData.rightRadius),
            ),
          ),
          onPressed: () {
            print("onPressed ${buttonData.text}");
          },
          child: Text(
            buttonData.text,
            textScaleFactor: 0.225 * scale,
          ),
        ),
      );
    }).toList();

    return Stack(children: children);
  });
}

/*
assets/drawing.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32"
   height="32"
   id="svg3352"
   version="1.1"
   inkscape:version="0.91 r"
   viewBox="0 0 32 32"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs3354" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="16.75"
     inkscape:cx="16"
     inkscape:cy="16"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:grid-bbox="true"
     inkscape:document-units="px"
     objecttolerance="10000"
     guidetolerance="10000"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:window-width="1366"
     inkscape:window-height="717"
     inkscape:window-x="0"
     inkscape:window-y="25"
     inkscape:window-maximized="1">
    <inkscape:grid
       type="xygrid"
       id="grid3360" />
  </sodipodi:namedview>
  <metadata
     id="metadata3357">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer">
    <path
       id="path4184"
       style="fill:none;fill-rule:evenodd;stroke:#000075;stroke-width:1.0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 6,4 5,0 0,0 11,0.034947 c 1.637555,2e-7 2.965056,1.3275011 2.965056,2.9650564 0,1.6375553 -1.327501,2.9650563 -2.965056,2.9650565 L 9.4650564,10.034947 c -1.6375557,0 -2.9650567,1.327501 -2.9650564,2.965057 2e-7,1.637555 1.3275011,2.965056 2.9650563,2.965056 L 22,16.034947 c 1.637556,0 2.965056,1.327501 2.965056,2.965057 0,1.637555 -1.327501,2.965056 -2.965056,2.965056 L 9.4650564,22.03495 c -1.6375557,0 -2.9650567,1.327501 -2.9650564,2.965057 2e-7,1.637555 1.3275011,2.965056 2.9650563,2.965056 L 20,28 l 5,0 0,0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccsccsccsccscccc" />
  </g>
</svg>

 */

class按钮数据{
字符串文本；
Rect-Rect；
双左半径；
双右半径；
ButtonData（this.text、this.rect、this.leftRadius、this.righradius）；
}
Widget buildStack（）{
返回布局生成器（生成器：（ctx，约束）{
var fs=applyBoxFit（BoxFit.contain，Size（32.0,32.0），constraints.max）；
双刻度=fs.destination.width/fs.source.width；
打印（“sclae$量表”）；
列出子项=[
SvgPicture.asset(
“assets/drawing.svg”，
宽度：fs.destination.width，
高度：fs.destination.height，
)
];
变量按钮=[
按钮数据（“按钮1”，直接从LTWH（9.75,4.75,14.5,4.5），0,1），
按钮数据（“按钮2”，从LTWH（7.25,10.75,14.5,4.5），1,0）开始的矩形，
按钮数据（“按钮3”，直接从LTWH（9.75,16.75,14.5,4.5），0,1），
按钮数据（“按钮4”，从LTWH（7.25,22.75,14.5,4.5），1,0）开始的矩形，
];
子项+=按钮.map（（buttonData）{
返回定位(
左：buttonData.rect.left*比例，
顶部：buttonData.rect.top*比例，
宽度：buttonData.rect.width*比例，
高度：buttonData.rect.height*比例，
孩子：大纲按钮(
highlightColor:Colors.deepOrange，
形状：圆形矩形边框(
borderRadius:borderRadius.horizontal(
左：半径。圆形（4.5*比例*按钮数据。左半径），
右：半径。圆形（4.5*比例*按钮大。右半径），
),
),
已按下：（）{
打印（“onPressed${buttonData.text}”）；
},
子：文本(
buttonData.text，
textScaleFactor:0.225*比例，
),
),
);
}).toList（）；
返回堆栈（子对象：子对象）；
});
}
/*
assets/drawing.svg：
image/svg+xml
*/

如果我使用SVG，请参见@pskink如何使菜单按钮可点击？？对于example@pskink按钮的位置