CODEWITHSUNDEEP
flutter
Zebrastian
Zebrastian

Reputation: 491

Fade in background image in flutter

I'm trying to fade in a background image (such as the image of a BoxDecoration), but I find no solution in the docs.

I need to be able to draw widgets on top of the image, and I need it to fade in since it's a NetworkImage.

FadeInImage does not work as background for DecorationImage since it requires an ImageProvider.

Is there a solution to my problem?

Upvotes: 2

Views: 2995

Answers (2)

ThunderBird
ThunderBird

Reputation: 303

After placing the background image below your actual content, and using AnimatedOpacity() to fade in or out just like @DanielSzy mentioned, you can equally use an image as a decoration image as follows for images hosted within the app's assets:

decoration: BoxDecoration(
    image: DecorationImage(
        image: AssetImage('images/drawer.jpg')
    ),
),

Where 'images/drawer.jpg' is the path to your image in question.

Also make sure to configure your pubspec.yaml file:

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/

Upvotes: 0

Daniel Eberl
Daniel Eberl

Reputation: 1424

You can use a Stack() and place the background image below your actual content, then use AnimatedOpacity() to fade in or out. You can then use the image either as a decoration image with 

Container(
    decoration: BoxDecoration(
      image: DecorationImage(image: NetworkImage('test'))

    ),
  ),

Also, there are factory constructors for images, i.e.

Image.network(), Image.asset(),FadeInImage.assetNetwork

Upvotes: 1

Related Questions