Renders differently on physical device than the iOS Simulator

[ozc]

Display rendered on the physical device (iPhone Max Xs) different that what's drawn on the Simulator.

Margin heights and font heights of the widgets differ on some cases.

I've narrowed the problem to, Stack->Container with no height/width defined effect other widget constraints. Eg. having a Container with no height and with defined with BoxDecoration->gradient:LinearGradient will make other sibling widgets to have different heights, fontsizes, etc.

On below code , if gradient part is uncommented, size and margins of other widgets differ than whats on the Simulator display. Simulator display does not change.
When height and width is defined, it is drawn exactly as the Simulator.

I don't have the device, so I can just make test with remote devices.

I've been on stable channel, then changed to beta. No difference.

Thought this was a notch and safearea problem at first. But as for my tests the problem is not related to them.

PS. SizeConfig is just a custom class to calculate sizes relative to design document.

I'm adding flutter doctor -v output below. As simulator displays correctly, I don't think any logs of it will be useful.

@override
  Widget build(BuildContext context) {
    //SizeConfig().init(context);
    return Scaffold(
      body: Container(
        height: SizeConfig.screenHeight,
        width: SizeConfig.screenWidth,
        child: Stack(
          children: <Widget>[
            // BACKGROUND
            // TODO: Replace with VIDEO/GIF/PNG
            Image.asset(
              'assets/images/background.png',
              alignment: Alignment.topCenter,
              width: SizeConfig.screenWidth,
              fit: BoxFit.cover,
            ),
            // GRADIENT OVER BACKGROUND

//            // GRADIENT OVER BACKGROUND
//
//            Container(
//              alignment: Alignment.topCenter,
//              margin: EdgeInsets.only(
//                bottom: SizeConfig.getHeight(231)
//              ),
//              //height: SizeConfig.screenHeight-SizeConfig.getHeight(231),
//              //width: SizeConfig.screenWidth,
//              decoration: BoxDecoration(
//                gradient: LinearGradient(
//                    begin: Alignment.bottomCenter,
//                    end: Alignment.topCenter,
//                    stops: [0, 1],
//                    colors: [Colors.black, Colors.transparent]),
//              ),
//            ),

            // TEXT LAYER
            Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  // CENTER LOGO
                  Container(
                    width: SizeConfig.screenWidth,
                    alignment: AlignmentDirectional.topCenter,
                    child: Container(
                      alignment: AlignmentDirectional.topCenter,
                      margin: EdgeInsets.only(top: SizeConfig.getHeight(1108)),
                      height: SizeConfig.getHeight(245),
                      width: SizeConfig.getWidth(666),
                      child: Image.asset(
                        'assets/images/logo.png',
                        scale: SizeConfig.devicePixelRatio,
                        fit: BoxFit.fill,
                        alignment: Alignment.topCenter,
                        height: SizeConfig.getHeight(245),
                        width: SizeConfig.getWidth(666),
                      ),
                    ),
                  ),

                  // Carousel
                  Container(
                    alignment: Alignment.topCenter,
                    height: SizeConfig.getHeight(293),
                    margin: EdgeInsets.only(
                        top: SizeConfig.getHeight(260, cal: 16),
                      left: SizeConfig.getWidth(90),
                      right: SizeConfig.getWidth(90),
                    ),
                    child: PageView.builder(
                        controller: _carouselController,
                        itemCount: this._carouselItems.length,
                        onPageChanged: (index) {
                          setState(() {
                            this._carouselSelectedIndex =
                                index % this._carouselItems.length;
                          });
                        },
                        itemBuilder: (BuildContext context, int index) {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            this._carouselItems[index %
                                this._carouselItems.length]['title'],
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontFamily: 'Brandon Grotesque',
                                color: titleColor,
                                fontSize: SizeConfig.getSpW(40),
                                letterSpacing: 1.0),
                          ),
                          Container(
                            margin: EdgeInsets.only(
                              top: SizeConfig.getHeight(65, cal: 41),
                            ),
                            child: Text(
                              this._carouselItems[index %
                                  this._carouselItems.length]['text'],
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontFamily: 'Aktiv Grotesk',
                                  color: Colors.white,
                                  fontSize: SizeConfig.getSpW(44),
                                  fontWeight: FontWeight.w400,
                                  height: 1.64,
                                  letterSpacing: -0.10),
                            ),
                          )
                        ],
                      );
                    }),
                  ),
                  // Carousel dots
                  _buildCarouselDots(),
                ]),

            // BOTTOM BUTTON MENU
            Positioned.fill(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  width: SizeConfig.screenWidth,
                  height: SizeConfig.getHeight(231),
                  color: Colors.black,
                  alignment: Alignment.topCenter,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Expanded(
                        child: GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            _onJoinNowTapped();
                          },
                          child: Container(
                            alignment: Alignment.topCenter,
                            padding: EdgeInsets.only(
                                top: SizeConfig.getHeight(75, cal: 14)),
                            child: Text(
                              Translations.of(context).join_now,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Brandon Grotesque',
                                  fontSize: SizeConfig.getSpW(36),
                                  fontWeight: FontWeight.w500,
                                  letterSpacing: 1.0),
                            ),
                          ),
                        ),
                      ),
                      Container(
                        width: SizeConfig.getWidth(2),
                        decoration: BoxDecoration(color: separatorColor),
                        margin: EdgeInsets.only(
                          top: SizeConfig.getHeight(54),
                          bottom: SizeConfig.getHeight(99),
                        ),
                      ),
                      Expanded(
                        child: GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            _onLoginTapped();
                          },
                          child: Container(
                            alignment: Alignment.topCenter,
                            padding: EdgeInsets.only(
                                top: SizeConfig.getHeight(75, cal: 14)),
                            child: Text(
                              Translations.of(context).log_in,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Brandon Grotesque',
                                  fontSize: SizeConfig.getSpW(36),
                                  fontWeight: FontWeight.w500,
                                  letterSpacing: 1.0),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

ozc$ flutter doctor -v
[✓] Flutter (Channel beta, v1.9.1+hotfix.1, on Mac OS X 10.14.5 18F132, locale en-TR)
    • Flutter version 1.9.1+hotfix.1 at /Users/ozc/Development/flutter
    • Framework revision a1fb3fabec (24 hours ago), 2019-09-03 18:07:52 -0700
    • Engine revision cc88fa45db
    • Dart version 2.5.0


[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/ozc/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Users/ozc/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/191.5791312/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2, Build version 10E125
    • CocoaPods version 1.6.0

[✓] Android Studio (version 3.5)
    • Android Studio at /Users/ozc/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/191.5791312/Android
      Studio.app/Contents
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[!] IntelliJ IDEA Ultimate Edition (version 2019.2.1)
    • IntelliJ at /Users/ozc/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

[✓] VS Code (version 1.35.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.2.0

[✓] Connected device (1 available)
    • iPhone Xs Max • F00AFD63-D26D-438D-8FEE-80908D0DC78C • ios • com.apple.CoreSimulator.SimRuntime.iOS-12-2 (simulator)

! Doctor found issues in 1 category.

[Hixie]

I wonder why the simulator would make a difference? That's so weird.

Would be good to narrow this down further. I'm sure it's possible to further simplify the test case above.

[ozc]

I don't remember the detail for this, there were several weird issues for this project. It does't seem like related but I guess I might have solved this by forcing the font scaling. I'll recheck the code.

[TahaTesser]

Hi @ozc
Are you still experiencing this issue with latest stable?
If so, can you please provide your flutter doctor -v and flutter run --verbose?
Thank you

[TahaTesser]

Hi @ozc
Without additional information, we are unfortunately not sure how to resolve this issue. We are
therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the
bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.