Revision history [back]

To apply a gradient to the barrier color of a flutter showDialog or AlertDialog, you can define a BoxDecoration with a LinearGradient as the background of the AlertDialog. Here's an example:

1. First, define the gradient in a variable:

final gradient = LinearGradient(
  begin: Alignment.topRight,
  end: Alignment.bottomLeft,
  colors: [
    Colors.blue,
    Colors.red,
  ],
);

1. Then, wrap your showDialog or AlertDialog widget with a Container with the BoxDecoration applied:

showDialog(
  context: context,
  builder: (context) => Container(
    decoration: BoxDecoration(
      gradient: gradient,
    ),
    child: AlertDialog(
      title: Text('Title'),
      content: Text('Content'),
    ),
  ),
);

This will apply the gradient as the background of the AlertDialog and show it with the gradiented barrier color.