Alignment top center pulls dialogs up

[SpencerLindemuth]

I'm using a very narrow testing scope so this may have some severe unintended consequences, but in ResponsiveWrapper, is there a reason the Stack that wraps the resized widget aligns top center and not center? If you use the showDialog method with a SimpleDialog child, it floats to the top when used with a ResponsiveWrapper instead of the native center float. Changing the stack alignment fixes the issue and I don't see any other consequences but again I have a pretty narrow scope.

Here's the code in question in responsive_wrapper.dart starting on line 457

  @override
  Widget build(BuildContext context) {
    return (screenWidth ==
            0) // Initialization check. Window measurements not available until postFrameCallback.
        ? (widget.backgroundColor ??
            Container(
                color: Color(
                    0xFFFFFFFF))) // First frame empty background color or default white.
        : InheritedResponsiveWrapper(
            data: ResponsiveWrapperData.fromResponsiveWrapper(this),
            child: Stack(
             ***alignment: Alignment.topCenter,***
              children: [
                widget.background ?? SizedBox.shrink(),
                MediaQuery(
                  data: calculateMediaQueryData(),
                  child: SizedBox(
                    width: screenWidth,
                    child: FittedBox(
                      fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                      child: Container(
                        width: scaledWidth,
                        height: (widget.shrinkWrap == true &&
                                widget.mediaQueryData == null)
                            ? null
                            : scaledHeight,
                        // Shrink wrap height if no MediaQueryData is passed.
                        alignment: Alignment.center,
                        child: widget.child,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
  }

Changing to Alignment.center works like expected. Let me know if you have any feedback on this!

[rayliverified]

Alignment.topCenter is used to position content that does not fill the page at the top of the screen.
This is useful for when the UI is shorter than the screen. You would want content to start at the top.

The solution here is to add the ability to customize which widget is returned between the InheritedResponsiveWrapper and the MediaQuery. This will also enable users to add custom backgrounds or remove the Stack altogether.

I will try adding in the customization option tomorrow.

[rayliverified]

Out of curiosity Spencer, what are you building? I just saw that you contributed to flutter_linkify too

[SpencerLindemuth]

I'm the mobile dev at Off The Record. We're on the playstore and app store if you want to check it out. I've been working with flutter long enough now I'm trying to be more involved in the open source community and close some gaps I've found too.

[rayliverified]

I've added an Alignment parameter. Can you test and let me know if it solves your issue?

[SpencerLindemuth]

Yes! This keeps the Dialog centered as expected, thank you! There's another problem where, if the builder in showDialog() returns a ResponsiveWrapper, it loses the ability to scroll but that's a separate issue I can look into.

[rayliverified]

Fixed with alignment parameter in v0.0.12