How to change title's background color in CupertinoActionSheet flutter

Question

i am using CupertinoActionSheet for bottomsheet. But i have problem with title's background color, i need title's background to be white. I searched but couldn't find a solution for this. Can you help? is there a way?

This is my action sheet but i want like this;

My DSActionSheet code: `

return CupertinoActionSheet(
      title: Text(
        widget.title ?? "",
      ),
      message: widget.description != null ? Text(
        widget.description!,
      ) : null,
      actions: widget.actionWidgets,
      cancelButton: CupertinoActionSheetAction(
        onPressed: (){
          Navigator.pop(context);
        }, 
        child: Text(
          AppLocalizations.of(context)!.translate('cancel')!,
          style: const TextStyle(
            fontWeight: FontWeight.bold
          ),
        )
      ),
    );`

I tried wrap title with container and i gived white color to container, but this isnt work. Displayed like this:

I tried giving background color to showModalBottomSheet but then the cancel button doesn't stay separate, it didn't work either.

As per Flutter doc, there is not much customization option available for the `CupertinoActionSheet`. https://api.flutter.dev/flutter/cupertino/CupertinoActionSheet-class.html — Sujan Gainju, Jul 12 '23 at 07:47
If nothing helps: You can also copy the Flutter code and create your own widget with the customizations for the background color — Ozan Taskiran, Jul 12 '23 at 08:33
i solved problem like this: i moved title property to 'CupertinoActionSheet'. and i gave title as a actionWidget (CupertinoActionSheetAction) with onPressed=(){}. and it worked ! ^.^ — Beyza, Jul 12 '23 at 08:48

score 1 · Answer 1 · answered Jul 12 '23 at 08:52

I solved the problem. I gave title as an actionwidget and wrap with container and color is white:

DSActionSheet(
  actionWidgets: <Widget> [
    Container(
      height: 51,
      color: Colors.white,
      child: CupertinoActionSheetAction(
        child: Text(
          AppLocalizations.of(context)!.translate("update_profile_photo")!,
          style: ThemeConstants().getActionSheetTitleTextStyle(context)
        ),
        onPressed: (){},
      ),
    ),
    Container(
      color: Colors.white,
      child: CupertinoActionSheetAction(
        onPressed: () {
          updateProfilePhoto(fromCamera: true);
        }, 
        child: Text(
          AppLocalizations.of(context)!.translate("select_from_camera")!,
        )
      ),
    ),
    Container(
      color: Colors.white,
      child: CupertinoActionSheetAction(
        onPressed: () {
          updateProfilePhoto(fromCamera: false);
        }, 
        child: Text(
          AppLocalizations.of(context)!.translate("select_from_gallery")!,
        )
      ),
    ),
    Container(
      color: Colors.white,
      child: CupertinoActionSheetAction(
        isDestructiveAction: true,
        onPressed: () {
          deleteProfilePhoto();
        }, 
        child: Text(
          AppLocalizations.of(context)!.translate("delete_profile_photo")!,
        )
      ),
    ),
  ]
)

Hope it helps someone!

That is one way to do it. – Sujan Gainju Jul 12 '23 at 11:22 — Sujan Gainju, Jul 12 '23 at 11:22

How to change title's background color in CupertinoActionSheet flutter

1 Answers1