Background Image for Scaffold

I want to set the image as the background color for Scaffold. When setting an AppBar and bottom bar, using the decoration of the Container as the body of the scaffold doesn't cover the complete screen.

I want to show background for full screen. Below is my Scaffold code:

Scaffold(
      backgroundColor: Image.asset('images/background.png').color,
      body: Container(
        decoration: defaultAppBoxDecoration(),
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text('Title here', style: TextStyle(color: Colors.teal),),
        leading: IconButton(
          icon: Image.asset('images/star.png'),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(icon: Image.asset('images/star.png')),
                  //  IconButton(icon: Image.asset('images/grid.png')),

        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child:           IconButton(icon: Image.asset('images/star.png')),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(left: 4.0, right: 4.0),
        height: 44.0 + MediaQuery.of(context).padding.bottom,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
                      IconButton(icon: Image.asset('images/star.png')),
          IconButton(icon: Image.asset('images/star.png')),

          ],
        ),
      ),
    );

Solution 1: diegoveloper

Try using Stack check the following sample:

  @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Image.asset(
            "resources/background.png",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0.0,
              ),
              bottomNavigationBar: Container(
                padding: EdgeInsets.only(left: 4.0, right: 4.0),
                height: 44.0 + MediaQuery.of(context).padding.bottom,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.star)),
                    IconButton(icon: Icon(Icons.star)),
                  ],
                ),
              ),
              body: Text("Hello world"))
        ],
      );
    }

Solution 2: Valentina Konyukhova

You can place your Scaffold inside Container with background image and use transparent color for Scaffold's body like this:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/bg.jpg"),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    backgroundColor: Colors.transparent,
    body: Container(),
),);