flutterdartuser-interface

How to blur some part of a image from bottom in flutter?


I have an illustration below, let's ignore the other details and focus on the bottom of the image. It has a faint white streak that I don't know how to achieve. It can be image blur or it can be color gradient. It's great that you guys can help me create that white blur.

enter image description here


Solution

  • Hope you got the solution!

    Scaffold(
          body: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: Image(
                  fit: BoxFit.fill,
                  image: AssetImage("assets/robot.jpg"),
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  gradient: LinearGradient(
                    begin: Alignment.center,
                    end: Alignment.bottomCenter,
                    colors: [
                      const Color(0x00000000),
                      const Color(0xFFFFFFFF),
                    ],
                  ),
                ),
              ),
            ],
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.red,
            child: Icon(Icons.arrow_forward_ios),
          ),
        ); 
    

    enter image description here