Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to decorate Image.file

Tags:

flutter

dart

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?

like image 687
Yeahia2508 Avatar asked Oct 03 '18 07:10

Yeahia2508


People also ask

How do I decorate a picture in a project file?

You don't have to use ribbon or washi tape to create a border; you can draw your own designs. Use pens, markers, paint, or even glitter glue to create a border for the project file. Ideas for the border design include swirls, shapes, letters, and flowers.


2 Answers

Instead of Image.File widget use FileImage image provider

new DecorationImage(
  image: new FileImage(yourFile),
  fit: BoxFit.cover,
);
like image 160
Rémi Rousselet Avatar answered Oct 05 '22 03:10

Rémi Rousselet


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
   ),
),
like image 30
key Avatar answered Oct 05 '22 02:10

key