How do I Set Background image in Flutter

Question

I am trying to set a background image for the home page. I am getting the image place from start of the screen and filling the width but not the height. Am I missing something in my code? Are there image standards for flutter? Do images scale based on each phone's screen resolution?

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return  Scaffold(
      body:  Container(
        child:  Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
             Image.asset("assets/images/bulb.jpg") 
          ]
        )
      )
    );
  }
}

Answer 1

To set a background image in Flutter, you can use the DecorationImage class and the BoxDecoration class.

Here's an example code snippet:

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            // Add other widgets here
          ],
        ),
      ),
    );
  }
}

In this example, the Container widget is used to provide a background image for the Scaffold. The DecorationImage class is used to specify the image to use, and the fit property is set to BoxFit.cover to ensure that the image fills the container and maintains its aspect ratio.

Make sure the image you are using is large enough to look good on all screen sizes. You can also use different image assets for different screen resolutions, by adding different versions of the image with the appropriate suffixes (e.g. @1x, @2x, @3x). Flutter will automatically choose the correct version based on the screen resolution.

To know more, join our Flutter Training today.