Search code examples
flutteruiblureffect

flutter blur effect between two views


I am trying to use blur in a view. One the first view, the user is supposed to tap on a widget so he can preview a pdf in the second view. During the process of getting the pdf file, i want to use blur. When the user has viewed his pdf, the user can come back to the view one. But my problem is that the blur effect is still on. Please, can you advise on how to cancel the blur effect when the user comeback to the view one. I have done research but did not find any information. Thank you.

    return Stack(
      children: [

        blur == false?

        Scaffold(
          appBar: AppBar(
            title: const Text ('DETAILS'),
            leading: InkWell(
                child: const Icon(Icons.close),
                onTap: () {
                  setState(() {
                   
                  });
                  Navigator.of(context).pop();
                }
            ),
            actions: [

              Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 16.0, 0),

                ///saving the modification done to a record
                child: InkWell(
                    child: const Center(
                      child: Text('Preview',
                        textScaleFactor: 1.5,
                        style: TextStyle(
                          fontSize: 12.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),),

                    onTap: () async {
                      Navigator.push(context, MaterialPageRoute(builder: (context) =>
          Display_Image_From_Storage(pathSelectedImage: url,
            imageIndex: 0, //TODO voir comment modifier index
            fileName: currentFile,)));

                      setState(() {
                        blur = true;
                      });

                     

                    }),
              ),
            ],
          ),

Solution

  • Assuming the blur variable controls your blur implementation, you need to set it to false at some point in your code. The most apparent way I see from the snippet you provided can be done in your Preview Inkwell's onTap argument:

    ...
    onTap: () async {
      setState(() => blur = true); // apply the blur
    
      // push the route and wait for their return
      await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => Display_Image_From_Storage(
            pathSelectedImage: url,
            imageIndex: 0, //TODO voir comment modifier index
            fileName: currentFile,
          ),
        ),
      );
    
      setState(() => blur = false);  // remove the blur after returning
    },
    ...