How to Set Background Image in Flutter

CodeWithFlutter
2 Min Read

In Flutter, you can set a background image for a widget by using the Container widget and specifying the decoration property. The decoration property allows you to specify a BoxDecoration object, which can be used to add borders, background colors, gradients, and images.

Here’s an example of setting a background image for a widget:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(
        'https://example.com/image.jpg',
      ),
      fit: BoxFit.cover,
    ),
  ),
  child: YourWidgetHere(),
)

In this example, we wrap the YourWidgetHere widget in a Container, and specify the decoration property with a BoxDecoration object. The DecorationImage class is used to specify the background image, and it takes an image property, which is set to a NetworkImage object created with a URL to the image. The fit property is set to BoxFit.cover, which will scale the image to cover the entire area of the container, preserving its aspect ratio.

You can also use an image from your local assets by using the AssetImage class instead of the NetworkImage class, like this:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage(
        'assets/images/background.jpg',
      ),
      fit: BoxFit.cover,
    ),
  ),
  child: YourWidgetHere(),
)

In this example, the image property is set to an AssetImage object created with a path to the image in your local assets.

Share this Article
Leave a comment