Flutter中如何修改CupertinoActionSheet标题的背景色？

The built-in title parameter of CupertinoActionSheet doesn’t support custom background colors directly—it inherits the sheet’s default background styling. Wrapping it in a Container fails because the title widget is constrained by the sheet’s internal padding, so the background won’t fill the full width. Changing the showModalBottomSheet background affects the entire sheet, including the cancel button, breaking its intended separation.

To fix this, replace the built-in title and message parameters with a custom widget inserted at the top of the actions list. This lets you control the title section’s background color while preserving the rest of the sheet’s styling:

return CupertinoActionSheet(
  actions: [
    // Custom title/message section with white background
    Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            widget.title ?? "",
            style: const TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.bold,
              color: CupertinoColors.label,
            ),
          ),
          if (widget.description != null) ...[
            const SizedBox(height: 8.0),
            Text(
              widget.description!,
              style: const TextStyle(
                fontSize: 13.0,
                color: CupertinoColors.secondaryLabel,
              ),
            ),
          ],
        ],
      ),
    ),
    ...widget.actionWidgets,
  ],
  cancelButton: CupertinoActionSheetAction(
    onPressed: () {
      Navigator.pop(context);
    },
    child: Text(
      AppLocalizations.of(context)!.translate('cancel')!,
      style: const TextStyle(
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

Key Changes: #

• Removed title and message parameters: Replaced with a custom container in the actions list to gain background control.
• Custom title container: Uses color: Colors.white and padding matching the original title’s spacing to maintain visual consistency.
• Matched default text styles: Replicated the original CupertinoActionSheet title/message text styles to avoid visual discrepancies.
• Preserved action and cancel button styling: The rest of the actions and cancel button retain their default appearance, including the separate cancel button section.

This approach ensures only the title (and message, if present) has a white background, while the rest of the sheet behaves as expected.

内容的提问来源于stack exchange，提问作者Beyza