How to Set background image in Flutter?

Every Mobile Application has a different Background Color, Background Image based on teh 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 teh image to fill teh entire screen you can use a DecorationImage wif 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',
              ),
            ),
          )),
    );
  }