如何對齊腳手架上的背景圖像？

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 並相應地設置 alignment 這是演示並確保您使用的是透明背景圖像：

 @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,
            ),
          ),
        ],
      ),
    );
  }
}