如何将我的小部件与 Flutter 中所有设备的 MediaQuery 对齐？

Question

我有三个小部件，我试图在我的屏幕上对齐以相互参考。

我有一个金色边框，我想设置为我的背景，中心的轮子和轮子的中心，这也是一个单独的资产。

我已经使用 MediaQuery 对齐了资产，但是每次我在不同的设备上调试它时，MediaQuery 都会有所不同，并且 alignmnet 不正确。 这就是我调用我的小部件的方式：

    Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
//this is for the GOLDEN BORDER
              Positioned(
                  top: MediaQuery.of(context).size.height * 0.082,
                  child: Image.asset(
                    'assets/app/border3.png',
                    height: MediaQuery.of(context).size.width,
                  )),

//This is the WHEEL
              Column(
          children: <Widget>[
            SizedBox(height: MediaQuery.of(context).size.height * 0.344),
            Container(
              //color: Theme.of(context).primaryColor.withAlpha(180),
              child: Center(
                child: Winwheel(
                  handleCallback: ((handler) {
                    ctrl = handler;
                  }),
                  textFontFamily: 'Netflix',
                  controller: ctrl,
                  numSegments: 3,
                  outerRadius: MediaQuery.of(context).size.height * 0.41 / 2,
                  innerRadius: 28,
                  strokeStyle: Colors.white,
                  textFontSize: 20.0,
                  textFillStyle: Colors.white,
                  textFontWeight: FontWeight.bold,
                  textAlignment: WinwheelTextAlignment.center,
                  textOrientation: WinwheelTextOrientation.horizontal,
                  wheelImage: 'assets/app/spin2.png',
                  drawMode: WinwheelDrawMode.code,
                  drawText: true,
                  imageOverlay: false,
                  textMargin: 0,
                  pointerAngle: 0,
                  pointerGuide: PointerGuide(
                    display: true,
                  ),
                  segments: <Segment>[
                    Segment(
                        textFontFamily: 'Netflix',
                        fillStyle: Color(0xff9b57fc),
                        textFillStyle: Colors.white,
                        text: '400',
                        strokeStyle: Colors.transparent),
                    Segment(
                      textFontFamily: 'Netflix',
                      fillStyle: Color(0xff17a8f9),
                      textFillStyle: Colors.white,
                      text: '400',
                      strokeStyle: Colors.transparent,
                    ),
                    Segment(
                      textFontFamily: 'Netflix',
                      fillStyle: Colors.pink,
                      textFillStyle: Colors.white,
                      text: '900',
                      strokeStyle: Colors.transparent,
                    ),
                    Segment(
                      textFontFamily: 'Netflix',
                      fillStyle: Color(0xffef225b),
                      textFillStyle: Colors.white,
                      text: '500',
                      strokeStyle: Colors.transparent,
                    ),
                  ],
                  pins: Pin(
                    visible: false,
                    number: 16,
                    margin: 6,
                    // outerRadius: 5,
                    fillStyle: Colors.transparent,
                  ),
                  animation: WinwheelAnimation(
                    type: WinwheelAnimationType.spinToStop,
                    spins: 4,
                    duration: const Duration(
                      seconds: 15,
                    ),
                    callbackFinished: (int segment) {
                      setState(() {
                        isPlaying = false;
                      });
    
                      print('animation finished');
                      print(segment);
                    },
                    callbackBefore: () {
                      setState(() {
                        isPlaying = true;
                      });
                    },
                  ),
                ),
              ),
            ),
          ],
        ),

//This is the GOLDEN CENTER

              Positioned(
                  top: MediaQuery.of(context).size.height * 0.285,
                  left: MediaQuery.of(context).size.width * 0.359,
                  child: Image.asset('assets/app/center.png',
                      height: MediaQuery.of(context).size.height * 0.16)),
            ],
          ),
        );
      }

我正在使用winwheel依赖于 Spinning wheel。 这就是最终的 output 的样子。 即使在图像中看起来不错，它也没有在所有设备中正确对齐

.

Answer 1

也许您可以尝试使用 aspectRatio 为 1.0 的 AspectRatio Widget 以保持宽度和高度相同（作为一个圆圈）并将堆栈对齐在中心

Scaffold(
  body: Center(
    child: Padding(
      padding: EdgeInsets.all(8),
        child: AspectRatio(
          aspectRatio: 1.0, //Give it an aspectRatio of 1
          child: MyWidget()
        ),
      )
  ),
),

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center, //align the Widgets to the Center of the Stack
      children: [
        //this is for the WHEEL
        Container(
          decoration: BoxDecoration(
            color: Colors.orange[800],
            shape: BoxShape.circle,
          ),
        ),
        //This is the GOLDEN BORDER
        Container(
          decoration: BoxDecoration(
            border: Border.all(width: 20, color: Colors.yellow),
            color: Colors.transparent,
            shape: BoxShape.circle,
          ),
        ),
        //This is the GOLDEN CENTER
        Container(
          width: MediaQuery.of(context).size.width / 12,
          decoration: BoxDecoration(
            color: Colors.yellow[200],
            shape: BoxShape.circle,
          ),
        ),
      ]
    );
  }
}

我没有资产，所以我用 colors 制作了一些容器，但它应该看起来像这样

因此，您可以在没有定位小部件的情况下尝试它（堆栈现在居中，因此不需要）

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center, //align the Widgets to the Center of the Stack
      children: [
        //This is the WHEEL
        Winwheel(
         ....
        ),
        //this is for the GOLDEN BORDER
        Image.asset('assets/app/border3.png', fit: BoxFit.contain), //or try BoxFit.scaledown if that doesn't work
        //This is the GOLDEN CENTER
        Image.asset('assets/app/center.png', width: MediaQuery.of(context).size.width / 12, fit: BoxFit.scaleDown)
      ]
    );
  }
}