How do I add a background image to flutter app?

Question

I am trying to add a Background image to my Flutter App, and I have gone through all similar questions on SO. The app m runs fine but the image does not appear.

here is my widget code:

  @override   Widget build(BuildContext context) {     return MaterialApp(         home: Scaffold(       appBar: AppBar(         // Here we take the value from the MyHomePage object that was created by         // the App.build method, and use it to set our appbar title.         title: Text(widget.title),         actions: <Widget>[           new IconButton(icon: const Icon(Icons.list), onPressed: _loadWeb)         ],       ),       body: new Stack(         children: <Widget>[           Container(             child: new DecoratedBox(               decoration: new BoxDecoration(                 image: new DecorationImage(                   image: new AssetImage("images/logo.png"),                   fit: BoxFit.fill,                 ),               ),             ),           ),           Center(             child: _authList(),           )         ],       ),        floatingActionButton: FloatingActionButton(         onPressed: getFile,         tooltip: 'Select file',         child: Icon(Icons.sd_storage),       ), // This trailing comma makes auto-formatting nicer for build methods.     ));   } 

The app runs fine and the second widget on the stack, which is a listView works normally but the image does not show up.

Any ideas?

Answer 1

Scaffold doesn't support any concept of a background image. What you can do is give the Scaffold a transparent color and put it in a Container and use the decoration property to pull in the required background image. The app bar is also transparent.

Widget build(BuildContext context) {     return MaterialApp(       title: 'Welcome to Flutter',       home: Container(         decoration: BoxDecoration(             image: DecorationImage(                 image: AssetImage("images/logo.png"), fit: BoxFit.cover)),         child: Scaffold(           backgroundColor: Colors.transparent,           appBar: AppBar(             elevation: 0,             backgroundColor: Colors.transparent,             title: Text('My App'),             centerTitle: true,             leading: IconButton(                 icon: Icon(                   Icons.list,                   color: Colors.white,                 ),                 onPressed: () {}),           ),         ),       ),     );   }