user-interface - 如何在脚手架上对齐背景图像？

Question

我有一个页面，我要在此处在脚手架上的车轮上设置此金色边框。
这是我的代码:

 Widget spinningWheel(context) {
    double realWidth = MediaQuery.of(context).size.width;
    return Container(
      decoration: BoxDecoration(color: Colors.transparent),
      //color: Theme.of(context).primaryColor.withAlpha(180),
      child: Align(
        alignment: Alignment.topCenter,
        child: Spinwheel(
          shouldDrawCenterPiece: true,
          wheelPaint: Paint()..color = Colors.red,
          sectorDividerPaint: Paint()..color = Colors.black,
          centerPiecePaint: Paint()..color = Colors.black,
          items: items,
          size: realWidth * 0.9,
          onChanged: (val) {
            if (this.mounted) setState(() {});
          },
          select: select,
          shouldDrawDividers: true,
          wheelOrientation: pi / 8,
          autoPlay: false,
          hideOthers: false,
          shouldDrawBorder: false,
          shouldHighlight: false,
        ),
      ),
    );
  }

这是我正在使用的依赖项:https://pub.dev/packages/flutter_spinwheel

这就是我的方向盘


这是我要插入的边框:

Answer 1

尝试Stack Widget并相应地设置对齐方式，这是演示，并确保您使用的是透明背景图像:

 @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: new Image.asset(
              'assets/yellow_circle.jpg',
              width: size.width,
              height: size.height/2,
              fit: BoxFit.fill,
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: new Image.asset(
              'assets/red_circle.png',
              width: size.width,
              height: size.height/2,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );
  }
}