0

Below is the screenshot of the current situation/problem. I have a dialog that has a blurred background. I want to show a snackbar when the user clicks the "copy referral link" button. However, since I put a blurred background on the dialog, snackbar also remains behind the background.

What I want is to display the snackbar without blurring it when the user clicks the button. How can I achieve this result? The background should be blurred always but I just need to show the snackbar on top of that blurriness when the user clicks the button.

Here's the image url that shows the current problem

Bahrican Yesil
  • 33
  • 1
  • 3

1 Answers1

0

you can bring up the dialog by creating a custom one, like my code below

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isShow = false;
  void _incrementCounter() {
    setState(() {
      isShow = !isShow;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            child: const FlutterLogo(),
          ),
          isShow
              ? GestureDetector(
                  onTap: _incrementCounter,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: Colors.black38,
                    alignment: Alignment.center,
                    child: GestureDetector(
                      onTap: () {},
                      child: AlertDialog(
                        content: const Text("dsd"),
                        actions: [
                          ElevatedButton(
                            onPressed: () {
                              ScaffoldMessenger.of(context).showSnackBar(
                                SnackBar(
                                  content: const Text('Awesome Snackbar!'),
                                  action: SnackBarAction(
                                    label: 'Action',
                                    onPressed: () {
                                      // Code to execute.
                                    },
                                  ),
                                ),
                              );
                            },
                            child: const Text("Show Snackbar"),
                          )
                        ],
                      ),
                    ),
                  ),
                )
              : const SizedBox()
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.notifications),
      ),
    );
  }
}

screenshot : https://i.stack.imgur.com/inX4I.png

I can't display the image due to lack of reputation points

Mee Mihoyo
  • 71
  • 1
  • 6
  • Thank you for the answer, extracting a widget for the dialog and dealing with the snackbar in that way seems to be a good workaround. However, it is hard to scale this thing in a big project that we manage the dialogs apart from the widgets that have the ancestor scaffold. Also I was using BackdropFilter at some places to extra blur the background. Finding a way to totally escape from the blurriness would be better and intended one since we will also continue to use dialogs just as expected. Thank you for the suggestion. – Bahrican Yesil Mar 17 '22 at 07:54