How to Flutter Background Image Positioning - flutter

Question

When I write the Background Image codes in the main.dart file that I shared with you below, the data I want to use remains under Image. How can I solve this problem? I am aware that I wrote the part about Background in the wrong place, but I didn't know where to write it. Thank you for your help.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Weather App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.tealAccent,
appBar: AppBar(
title: Text('Flutter Weather App'),
),
body: Center(
child: Column(children: <Widget>[
//WEATHER DATA
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: weatherData != null
? Weather(weather: weatherData)
: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: isLoading
? CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
new AlwaysStoppedAnimation(Colors.black),
)
: IconButton(
icon: new Icon(Icons.refresh),
tooltip: 'Refresh',
onPressed: () async {
await loadWeather();
},
color: Colors.black,
),
),
],
),
),
//BACKGROUND IMAGE
Container(
height: 501.7,
width: 420.0,
decoration: BoxDecoration(
image: DecorationImage(
image: isweatherDataLoaded //this
? HandleError()
: images["clear"],
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
//FUTURE FORECAST WEATHER DATA
SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200.0,
child: forecastData != null
? ListView.builder(
itemCount: forecastData.list.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => WeatherItem(
weather: forecastData.list.elementAt(index)))
: Container(),
),
),
)
]))),
);
}
Wherever I write, it just didn't work. I want you to show me a way. If you want, I can share the rest of my codes with you. Happy Codding! Thanks..

Answer 1

I'd suggest moving the container with the background image up in the hierarchy, like this:
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Weather App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.tealAccent,
appBar: AppBar(
title: Text('Flutter Weather App'),
),
body: Container(
height: 501.7,
width: 420.0,
decoration: BoxDecoration(
image: DecorationImage(
image: isweatherDataLoaded //this
? HandleError()
: images["clear"],
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
child: Center(
child: Column(children: <Widget>[
//WEATHER DATA
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: weatherData != null
? Weather(weather: weatherData)
: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: isLoading
? CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
new AlwaysStoppedAnimation(Colors.black),
)
: IconButton(
icon: new Icon(Icons.refresh),
tooltip: 'Refresh',
onPressed: () async {
await loadWeather();
},
color: Colors.black,
),
),
],
),
),
//FUTURE FORECAST WEATHER DATA
SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200.0,
child: forecastData != null
? ListView.builder(
itemCount: forecastData.list.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => WeatherItem(
weather: forecastData.list.elementAt(index)))
: Container(),
),
),
)
])),
)),
);
}