8

I want to make a File image blurred and add radius in it.

This is my code:

BackdropFilter(
        filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: new Container(
          width: width * 0.55,
          height: height * 0.70,
          decoration: new BoxDecoration(

            //this is not accepted becuse Image.file is not ImageProvider
            image: new DecorationImage(
                image: new Image.file(new File(messageSnapshot.value['file'])),
                fit: BoxFit.cover
            ),

            borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
          ),
          child: Center(child: new CircularProgressIndicator(backgroundColor: Colors.deepPurpleAccent,)),
        ),
      )

How to achive this using Image.file widget?

2 Answers 2

34

Instead of Image.File widget use FileImage image provider

new DecorationImage(
  image: new FileImage(yourFile),
  fit: BoxFit.cover,
);
4

Also just in case someone wants to use a Condition for the image this could work:

decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(50.0),
    color: Colors.grey,
    image: DecorationImage(
    image: _image == null
    ? AssetImage('A_DEFAULT_IMAGE_PATH')
    : FileImage(YOUR_FILE),
    fit: BoxFit.cover
   ),
),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.