Question 76802 in Flutter Question posted in
The official Flutter documentation can be found here.

how can I change the surface tint color when I open a dialog in flutter

When I open a dialog in flutter I want the background to become a light blue with opacity as shown in the image below:

enter image description here

I’ve set the surfaceTintColor of my Dialog widget to the color I want, but it is not being applied. Instead I see the default elevation of the dialog. here is my code:

class PickImageDialog extends StatelessWidget {
  const PickImageDialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 16, 10, 22),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                IconButton(
                  onPressed: () {
                    context.router.pop();
                  },
                  icon: Icon(Icons.clear),
                ),
                Expanded(
                  child: Text(
                    AppStrings.pickImage,
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 26,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.camera,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ), Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.gallery,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    If you want to show a dialog you can use barrierColor property, like this:

    InkWell(
  child: Text('click'),
  onTap: () {
    showDialog(
      context: context,
      builder: (_) => PickImageDialog(),
      barrierColor: Colors.red.withOpacity(0.4), // <--- add this
    );
  },
),

    And if you want to blur the background you can wrap your Dialog with BackdropFilter in your PickImageDialog class:

    BackdropFilter( // <--- add this
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),// <--- add this
  child: Dialog(
    shape: RoundedRectangleBorder(
    ...
)

    enter image description here

    Login or Signup to reply.
  2. 0

    Salaam, For having a blur background first of all edit your PickImageDialog to this:

    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Dialog(
        // surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 16, 10, 22),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.clear),
                  ),
                  Expanded(
                    child: Text(
                      'AppStrings.pickImage',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 26,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    height: 60,
                    width: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(16)),
                        border: Border.all(
                            width: 2, color: Theme.of(context).primaryColor),
                        color: Theme.of(context).colorScheme.surfaceTint),
                    child: Container(color: Colors.red,),
                  ), Container(
                    height: 60,
                    width: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(16)),
                        border: Border.all(
                            width: 2, color: Theme.of(context).primaryColor),
                        color: Theme.of(context).colorScheme.surfaceTint),
                    child: Container(color: Colors.amber,),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );

    by the way i didn’t see any codes to show your dialog if you haven’t implemented it before here is the code you need:

    /// put it in your CTA(call to action) of showing dialog
                        showDialog(
                        context: context,
                        builder: (_) => PickImageDialog(),
                      );

    happy coding after Polytechnic!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search