Quick Tip – How to use Image in BoxDecoration in Flutter

How to use DecorationImage in BoxDecoration in Flutter

To use the image with the BoxDecoration class in Flutter, you can specify the image parameter of the BoxDecoration class. The DecorationImage class allows you to customize the appearance of the image, such as how it is aligned within the container and how it is resized to fit the container.

Here’s an example of how you can use the BoxDecoration with an image as the background for a container:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(networkImageUrl),
      fit: BoxFit.cover,
    ),
  ),
)

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/image.png'),
      fit: BoxFit.cover,
    ),
  ),
)

This will create a container with a width and height of 200 pixels, and the image will be used as the background for the container. You can customize the appearance of the container further by using the other parameters of the BoxDecoration class, such as color, border, and borderRadius.

full-screen width of the image in the container in Flutter

To use the full-screen width for the container in Flutter, you can use the MediaQuery class to get the screen width and use it to set the width of the container. Here’s an example of how you can do this:

Container(
  width: screenWidth,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(networkImageUrl),
      fit: BoxFit.cover,
    ),
  ),
)

This will create a container with a height of 200 pixels and a width that is equal to the width of the screen. The image will be used as the background for the container.

Here’s an example of how you can use the DecorationImage class with the BoxDecoration class:

The example below shows the two images inside the Containers.

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(10.0),
              width: MediaQuery.of(context).size.width,
              height: 150,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 5.0,),
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: Colors.red.withOpacity(0.5),
                    spreadRadius: 7,
                    blurRadius: 10,
                    offset: Offset(4, 4), // changes position of shadow
                  ),
                ],
                image: DecorationImage(
                    fit: BoxFit.fitHeight,
                    image: AssetImage('assets/FlutterAssets_logo_BG.jpg')
                ),
              ),
            ),

            Container(
              margin: const EdgeInsets.all(10.0),
              width: MediaQuery.of(context).size.width,
              height: 150,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 5.0,),
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: Colors.blue.withOpacity(0.5),
                    spreadRadius: 7,
                    blurRadius: 10,
                    offset: Offset(4, 4), // changes position of shadow
                  ),
                ],
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage('assets/FlutterAssets_logo_BG.jpg')
                ),
              ),
            ),

          ],
        ),

You can read more about Images in Flutter in this post:

Flutter Basics – How to use an image in Flutter

More info about Containers can be found here:

Flutter Basics – What is a Container in Flutter

You can find more info about BoxDecoration in this post:

Flutter Basics – How to use a Container BoxDecoration in Flutter