how to add a fullscreen image in flutter - flutter

Question

here's my code and i want a fullscreen image with a centerd button but i won't get that result , screenshot of app in below the code
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kings of Iran',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WelcomePage(),
);
}
}
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"),
fit: BoxFit.cover,
alignment: Alignment.center)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
)
],
),
),
);
}
}
and this is the result
How can I make this image fullscreen and button centered?

Answer 1

You can use Stack for display image and display button at center of the screen.
Stack : https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the center.
Example :
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"), fit: BoxFit.cover, alignment: Alignment.center))),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
Center(child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
))
],
),
],
)
}
}

Answer 2

Just add width: MediaQuery.of(context).size.width in Container