CODEWITHSUNDEEP
flutter
aaronfg
aaronfg

Reputation: 614

CupertinoActionSheet / CupertinoActionSheetAction background color different on-device than in simulator

My Scaffold has a dark background color.

I'm using showCupertinoModalPopup, with the CupertinoActionSheet and using CupertinoActionSheetAction as the children.

In the simulator the actionsheet looks like this:

photo.

When I run the app on my actual iphone, it looks like this:

photo

The actionsheet items look correct in the sim. Very white in appearance.

On-device though, are way more transparent on-device and therefore are harder to see.

Both CupertinoActionSheet and CupertinoActionSheetAction do not have color or transparency level properties

Any ideas on what's going on here?

Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.11.7, on Mac OS X 10.13.6 17G65, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[✓] VS Code (version 1.29.0)
[✓] Connected device (3 available)

Upvotes: 8

Views: 6251

Answers (6)

Merceran
Merceran

Reputation: 11

As written in another answer here, you have to use CupertinoThemeData. But instead of setting a textTheme like written there, you need the brightness parameter.

CupertinoTheme(
        data: const CupertinoThemeData(
            brightness: Brightness.light,
        ),
        child: CupertinoActionSheet(...),
),

Full Example

showCupertinoModalPopup(
      context: context,
      semanticsDismissible: true,
      builder: (context) => CupertinoTheme(
        data: const CupertinoThemeData(
            brightness: Brightness.light,
        ),
        child: CupertinoActionSheet(
          cancelButton: CupertinoActionSheetAction(
            isDefaultAction: true,
            onPressed: () {},
            child: Text('Cancel'),
          ),
          actions: [
            CupertinoActionSheetAction(
              onPressed: () {},
              child: Text('Button 1'),
            ),
            CupertinoActionSheetAction(
              onPressed: () {},
              child: Text('Button 2'),
            ),
            CupertinoActionSheetAction(
              onPressed: () {},
              child: Text('Button 3'),
            ),
          ],
        ),
      ),
    );

If you want to adapt the sheet to systems dark and light mode, you can set it with

brightness: MediaQuery.platformBrightnessOf(context)

Upvotes: 1

Steve Neal
Steve Neal

Reputation: 31

You can wrap the action in a container that sets a sensible background color:

Container(
     color: Theme.of(context).scaffoldBackgroundColor,
     child: CupertinoActionSheetAction(....),
);

Upvotes: 2

Micheal C Wallas
Micheal C Wallas

Reputation: 525

Code snippet for anyone that is having issues with cupertino sheet using your theme's primary colors and you want it to look like iOS (blue).

    await showCupertinoModalPopup(
        context: context,
        builder: (_) {
          return CupertinoTheme(
            data: CupertinoThemeData(
                textTheme:
                    CupertinoTextThemeData(primaryColor: Color(0xFF3E87F5))),
            child: CupertinoActionSheet(
              actions: [...],
              cancelButton: CupertinoActionSheetAction(
                isDefaultAction: true,
                child: Text('Cancel'),
              ),
            ),
          );
        });

Upvotes: 0

Teajayy007
Teajayy007

Reputation: 51

return   showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
    actions: <Widget>[
      Container(
        color: Colors.white,
        child: CupertinoActionSheetAction(
          onPressed: () {},
          child: const Text(
            'Made this my title',
          ),
        ),
      ),
      Container(
        color: Colors.white,
        child: CupertinoActionSheetAction(
          child: const Text(
            'next button',
          ),
          onPressed: () {},
        ),
      ),
      Container(
        color: Colors.white,
        child: CupertinoActionSheetAction(
          child: const Text(
            'next action',
          ),
          onPressed: () {},
        ),
      ),
    ],
    cancelButton: CupertinoActionSheetAction(
      child: const Text(
        'Cancel',
      ),
      isDefaultAction: true,
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ),
);

Upvotes: 4

Teajayy007
Teajayy007

Reputation: 51

just in case anyone still has problems with the CupertinoActionSheet background color, just wrap the desired CupertinoActionSheetAction widget with a container and assign a color property.

Upvotes: 0

Aleksandar
Aleksandar

Reputation: 4144

This is still an issue in:

  • Flutter (Channel stable, v1.12.13+hotfix.8)
  • Mac OS X 10.15.3
  • Xcode 11.2.1

I guess it's a bug in Flutter. Or it might be a feature, which I concluded based on this PR (GitHub link). If You really need to fix it, You will need to modify the code in flutter directly, in the /flutter/packages/flutter/lib/src/cupertino/action_sheet.dart, inside the build method of CupertinoActionSheetAction:


    return GestureDetector(
      // ...
      child: ConstrainedBox(
        // ...
        child: Semantics(
          button: true,
          child: Container(
            // add decoration property
            decoration: BoxDecoration(
              color: CupertinoDynamicColor.resolve(CupertinoColors.secondarySystemGroupedBackground, context),
              borderRadius: BorderRadius.circular(_kCornerRadius),
            ),
            // ...

Note1: This will work in both light and dark mode on iOS.

Note2: I don't advise You to do this. :)

Upvotes: 0

Related Questions