How to display a background image that fits screen sizes in Flutter?

user_19324806 0
Viewed 50

I have a similar background image below, when I resize it to a larger screen the details in the 4 corners of the image get distorted. How can the 4 corners and surrounding borders scale to the size of the screen? Please tell me the solution. Thanks!

enter image description here

dart flutter mobile android ios
2 Answers

Make sure the parent widget is taking up then entire space first by using container, or other. Then use BoxFit.fill.

Image.network(
   pictureUrl,
   fit: BoxFit.fill,
)
user_143298860

Add this in your main Container

decoration: BoxDecoration(
            image: DecorationImage(
                colorFilter: new ColorFilter.mode(
                    Colors.green.withOpacity(0.8), BlendMode.dstATop),
                image: AssetImage(Utils().homebg),
                fit: BoxFit.fill))
user_79057870
Related