[web] Wrapping CupertinoSegmentedControl with a ClipRRect on Flutter Web (1.19) renders children incorrectly

[paulpopiel]

Steps to Reproduce

Wrapping a CupertinoSegmentedControl in a ClipRRect on Flutter Web causes the children widgets to be incorrectly rendered.

Build the following widget tree in Flutter Web on the 1.19 beta channel:

    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: CupertinoSegmentedControl<TestEnum>(
        children: {
          TestEnum.one: Text('One'),
          TestEnum.two: Text('Two'),
          TestEnum.three: Text('Three'),
        },
        onValueChanged: (value) {},
      ),
    );

Expected results:

https://imgur.com/a/PdLQlaB

Actual results:

https://imgur.com/a/bqIEbpK

NOTE: This used to work on the 1.18 beta channel on Web.

Logs

[✓] Flutter (Channel beta, 1.19.0-4.1.pre, on Mac OS X 10.15.4 19E287, locale en-AU)
    • Flutter version 1.19.0-4.1.pre at /Users/paulpopiel/Developer/flutter
    • Framework revision f994b76974 (13 days ago), 2020-06-09 15:53:13 -0700
    • Engine revision 9a28c3bcf4
    • Dart version 2.9.0 (build 2.9.0-14.1.beta)

[iapicca]

Hi @paulpopiel
testing the code below

code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: CupertinoSegmentedControl<String>(
              children: const {
                'One': Text('One'),
                'Two': Text('Two'),
                'Three': Text('Three'),
              },
              onValueChanged: (_) {},
            ),
          ),
        ),
      ),
    ),
  );
}

with the latest master

screenshot

doctor

[✓] Flutter (Channel master, 1.20.0-1.0.pre.184, on Linux, locale en_US.UTF-8)
    • Flutter version 1.20.0-1.0.pre.184 at /home/francesco/development/flutter_master
    • Framework revision 61b93d25bb (5 hours ago), 2020-06-24 01:53:01 -0400
    • Engine revision 2a9fed87a7
    • Dart version 2.9.0 (build 2.9.0-18.0.dev 6b630c3719)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /usr/lib/Android
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /usr/lib/Android
    • ANDROID_SDK_ROOT = /usr/lib/Android
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_252-8u252-b09-1~18.04-b09)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✗] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] VS Code (version 1.46.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.11.0

[✓] Connected device (3 available)
    • Linux desktop • linux      • linux-x64      • Linux
    • Web Server    • web-server • web-javascript • Flutter Tools
    • Chrome        • chrome     • web-javascript • Google Chrome 83.0.4103.106

! Doctor found issues in 2 categories.

with the latest beta

screenshot

doctor

[✓] Flutter (Channel beta, 1.19.0-4.1.pre, on Linux, locale en_US.UTF-8)
    • Flutter version 1.19.0-4.1.pre at /home/francesco/development/flutter_beta
    • Framework revision f994b76974 (2 weeks ago), 2020-06-09 15:53:13 -0700
    • Engine revision 9a28c3bcf4
    • Dart version 2.9.0 (build 2.9.0-14.1.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /usr/lib/Android
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /usr/lib/Android
    • ANDROID_SDK_ROOT = /usr/lib/Android
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_252-8u252-b09-1~18.04-b09)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] VS Code (version 1.46.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.11.0

[✓] Connected device (2 available)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.106

! Doctor found issues in 1 category.

I cannot reproduce the behavior you are describing,
does the code I tested represent the issue you are describing?
Thank you

[TahaTesser]

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.

[Henrik-glt]

@TahaTesser I'm experiencing the same issue. Tried current beta version 1.21.0-9.2.pre and current dev version 1.22.0-9.0.pre.
Works just fine when running on iOS and Android.

Edit: This seems to only affect Text widgets, where the text gets a top offset. Same "top offset" no matter the corner radius of the ClipRRect.
Workaround wrap all texts in a Materal widget.
Should not be necessary since the ClipRRect and Text widget is inside a MaterialApp widget.

[TahaTesser]

Could everyone who still has this problem please file a new issue with the exact description of what happens, logs, and the output of flutter doctor -v.
All system setups can be slightly different, so it's always better to open new issues and reference related issues.

[github-actions]

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.