Background Image for Scaffold
Setting the backgroundColor:Colors.transparent
is the key you are missing.
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(),
),);
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"))
],
);
}