How do I Align my widgets with MediaQuery for all devices in Flutter?

Question

I have three widgets that I am trying to align on my screen in refernce to each other.

I have a golden border that I want to set as my background, the wheel in the center and the center of the wheel which is also a seperate asset.

I have aligned the assets using MediaQuery however every time I debug it on a different device the MediaQuery has some difference and the alignmnet isn't proper. This is how Im calling my widgets:

    Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: [
//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: [
            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(
                        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)),
            ],
          ),
        );
      }

I am using the winwheel dependency for the Spinning wheel. This is what the final output looks like. It isn't properly aligned in all devices even though it looks fine in the image

.

user_3547212 · Answer

Maybe you can try usign AspectRatio Widget with an aspectRatio of 1.0 to keep the width and height the same (as a circle) and align the stack in the center

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

I don't have the assets so I make some Containers with colors but it should look like that

So for you try it without the positioned widgets (the Stack is now centered so there is no need)

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

How do I Align my widgets with MediaQuery for all devices in Flutter?

1 Answers