Adding an image background to home page - flutter

Question

I am trying to add a background to my home page, however, it does not seem to be working. Any thoughts? I know how to add it per se, but unsure of how to structure it. I had received some advice to use a Stack, but I am unfamiliar with this method and the resources online are not clear.
Any advice on how to structure this would be appreciated.
Here is the background image code:
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
and here is the page code itself.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style:
TextStyle(color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}

Answer 1

It's confusing, but we don't actually need a DecoratedBox, rather a BoxDecoration (inside your container, for the decoration: argument).
:P
Here's an example:
class BackgroundImagePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orangeAccent, // this has been moved up into BoxDeco
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
height: double.infinity,
width: double.infinity,
... <snip> ...

Answer 2

If the Scaffold is a child of the background image code, than I guess the Scaffold background color is hiding the image.
Set transparent background color for the Scaffold:
Scaffold(
backgroundColor: Color.transparent,
...

Answer 3

This ended up working. See below.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Image.asset(
"assets/startbackground.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
body: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60,fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style: TextStyle(
color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
)
]);
}
}