CODEWITHSUNDEEP
dartflutter
user6274128
user6274128

Reputation:

Flutter showDialog, AlertDialog background gradient.

For color, I can use dialogBackgroundColor property to give AlertDialog background my own color.

I was looking to use Gradient as my background. How can I use that? DecoratedBox is something that will be needed, but I don't know what to wrap in what. Can anyone give me idea or link for the same?

Upvotes: 4

Views: 5683

Answers (2)

Valentina Konyukhova
Valentina Konyukhova

Reputation: 5334

You can add a Container inside which will be decorated with gradient. For example:

class GradientDialog extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _GradientDialogState();
  }
}

class _GradientDialogState extends State<GradientDialog> {

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Container(
        constraints: const BoxConstraints(),
        padding: const EdgeInsets.all(8.0),
        decoration: new BoxDecoration(
            gradient: new LinearGradient(
                colors: AppColors.BG_GRADIENT,
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter)),
        child: YourContentInside(),

      ),
      contentPadding: EdgeInsets.all(0.0),
    );
  }
}

Open it with

showDialog(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return GradientDialog();
    });

Upvotes: 6

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29468

In build method of AlertDialog there is return Dialog(child: dialogChild, shape: shape);. In Dialog.build() - it returns Material(color: _getColor(context), .... There is no way to set gradient background for AlertDialog without customization.

I can add example if it'll be needed.

P.S. Or you can call showDialog and send another widget instead of AlertDialog.

Upvotes: 4

Related Questions