1

I am trying to add a frosted glass effect over an image and based on my research, the below seems to be one way to go about it. However, while there is no linting, it is giving me runtime error: "cannot provide both a color and a decoration". Is there a better way to blur the image in the background with an orange frosted effect?

 return Consumer<UserModel>(
  builder: (context, model, _) => Scaffold(
    body: Container(
      color: Colors.orange.withOpacity(0.75),
        decoration: BoxDecoration(
          image: DecorationImage(
            alignment: Alignment.bottomCenter,
            image: AssetImage("assets/images/pngguru.com-id-bnwsh.png"),
            fit: BoxFit.cover,
          ),
        ),
dave agalia
  • 27
  • 2

1 Answers1

0

Thats mean, if you have a BoxDecoration property in your container, you need to move color to inside BoxDecoration

Like that

Container(
    decoration: BoxDecoration(
      color: Colors.orange.withOpacity(0.75), // <-------------
      image: DecorationImage(
        alignment: Alignment.bottomCenter,
        image: AssetImage("assets/images/pngguru.com-id-bnwsh.png"),
        fit: BoxFit.cover,
      ),
    )
ibrahimkarahan
  • 2,697
  • 1
  • 9
  • 20
  • thank you! this works! is there a way i can fade out the image too so that it shows up less? – dave agalia Oct 06 '19 at 08:47
  • Take a look [How do I do the “frosted glass” effect in Flutter?](https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter) – ibrahimkarahan Oct 06 '19 at 08:51