How to set background image in Flutter?

Every Mobile Application has a different Background Color, Background Image based on the end user’s requirement. So in today’s article, We will be going through how to set background image in Flutter?

How to Set Background Image in Flutter? If users want the image to fill the entire screen you can use a DecorationImage with a fit of BoxFit.cover.

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: null /* add child content here */,
      ),
    );
  }
}

Users can also read our Container Widget article.

Users can also make use of the DecoratedBox Widget to achieve the same. consider a code snippet like below:

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

We will get output like below:

Background Image in Flutter Users can use Stack Widget to make the image stretch to the full screen.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

We can use Container Widget and mark its height as infinity.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Background Image"),
          ),
          body: SizedBox(
            height: double.infinity,
            width: double.infinity,
            child: FittedBox(
              fit: BoxFit.cover,
              child: Image.network(
                'https://images.unsplash.com/photo-1547721064-da6cfb341d50',
              ),
            ),
          )),
    );
  }

We will get output like below:

Conclusion:

In this article, we have been through How to Set Background Image in Flutter?

Thanks for Reading. Keep Fluttering.

Do let us know if you need any assistance with Flutter Design & Flutter Development?

We would love to assist you with the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.