showCupertinoSheet keep rounded corners after closing

Steps to reproduce

Show a showCupertinoSheet on iPhone SE (real or simulated) or any Android phone.

Expected results

The app should be in the state where it was before the call.

Actual results

This is the page before calling showCupertinoSheet:

This is the sheet being displayed (ok):

This is the page after I drag the sheet down (closing it). ** Notice how the borders are rounded ** (where it should be the same as the first screenshot). This happens on both Android and iOS.

This image is from the iPhone SE simulator (iPhone SE have a square corner screen, same as some Androids, so, this bug possibly is not properly visualized in "normal" iPhones, iPads or Androids with rounded corners.

Code sample

Future<T?> showModalSheet<T>({required WidgetBuilder builder}) async {
  if (defaultTargetPlatform == TargetPlatform.iOS) {
    return await showCupertinoSheet<T>(
      context: this,
      pageBuilder: (context) => Material(child: Builder(builder: builder)),
    );
  }

  return showModalBottomSheet<T>(
    context: this,
    useSafeArea: true,
    showDragHandle: true,
    builder: builder,
  );
}

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.29.0, on macOS 15.1 24B83 darwin-x64, locale en-BR) [799ms]
    • Flutter version 3.29.0 on channel stable at /Users/jckodel/fvm/versions/3.29.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (4 days ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.7s]
    • Android SDK at /Users/jckodel/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2) [1,229ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [17ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1) [17ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.97.2) [16ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.104.0

[✓] Connected device (4 available) [6.3s]
    • Júlio’s iPhone (mobile)             • 00008030-00092DD92168C02E            • ios            • iOS 18.1.1 22B91
    • iPhone SE (3rd generation) (mobile) • 45842E71-D9F0-4938-BDCD-65FD975B282B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
    • macOS (desktop)                     • macos                                • darwin-x64     • macOS 15.1 24B83 darwin-x64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 132.0.6834.160
    ! Error: Browsing on the local area network for iPad de -STUPID APPLE-. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources [328ms]
    • All expected network resources are available.

• No issues found!

I ran into this issue too, it ruins the way the sheet looks when using packages that use the native iOS sheet like revenue cat paywalls or file picker packages.

I'm able to reproduce this issue using the complete & minimal sample code below:

Sample code

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

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text(' Sample')),
        body: Center(
            child: NewWidget()),
      ),
    );
  }
}

class NewWidget extends StatelessWidget {
  const NewWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          showCupertinoSheet(
              context: context,
              pageBuilder: (context) {
                return CupertinoActionSheet(
                  title: Text('Title'),
                  message: Text('Message'),
                  actions: [
                    CupertinoActionSheetAction(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('Action 1'),
                    ),
                    CupertinoActionSheetAction(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('Action 2'),
                    ),
                  ],
                  cancelButton: CupertinoActionSheetAction(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('Cancel'),
                  ),
                );
              });
        },
        child: Text('Tap me'));
  }
}

Demo screenshot/video

before	after

RPReplay_Final1739779747.mp4

Flutter versions (stable and master)

[✓] Flutter (Channel stable, 3.29.0, on macOS 15.3.1 24D70 darwin-x64, locale en-VN) [701ms]
    • Flutter version 3.29.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (2 days ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[!] Flutter (Channel master, 3.30.0-1.0.pre.191, on macOS 15.3.1 24D70 darwin-x64, locale en-VN) [1,988ms]
    • Flutter version 3.30.0-1.0.pre.191 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c7047d33c4 (24 hours ago), 2025-02-15 21:56:27 -0500
    • Engine revision c7047d33c4
    • Dart version 3.8.0 (build 3.8.0-91.0.dev)
    • DevTools version 2.43.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

Looks like on the phones mentioned the top padding from the MediaQuery are pretty inconsistent. I have a brute force fix in mind that would work, but might make the rounded corner animation jumpy on these phones. Still looking into it.

Looks like on the phones mentioned the top padding from the MediaQuery are pretty inconsistent.

Since we can (and mostly) use Material for iPhones, we should be able also to use Cupertino widgets on Android (that effect is nice, the Cupertino bottom sheets are way nicer than Material). Don't you think making a UI decision - or whatever this is - for a single device manufacturer would be against this nice Flutter feature (to be able to use whatever widget I want, even if I want to put a youtube video inside a dropdown menu item =P))?

Don't you think making a UI decision - or whatever this is - for a single device manufacturer would be against this nice Flutter feature (to be able to use whatever widget I want, even if I want to put a youtube video inside a dropdown menu item =P))?

You are completely right, and the intention was for this to work on Android as well. While I mostly tested this on iPhones for the purpose of comparing against the native widget, I did test on many devices, including android phones. It's just that all of them had rounded corners 😢

Fix: Update CupertinoSheetRoute transition rounded corner (#163700)

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.

Navigation Menu

Repository navigation

showCupertinoSheet keep rounded corners after closing #163334

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

showCupertinoSheet keep rounded corners after closing #163334

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

MaherSafadii commented on Feb 14, 2025

huycozy commented on Feb 17, 2025

MitchellGoodwin commented on Feb 20, 2025

JCKodel commented on Feb 20, 2025

MitchellGoodwin commented on Feb 20, 2025

github-actions commented on Mar 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions