How to Flutter Background Image Positioning

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(),
                      ),
                    ),
                  )
                ])),
          )),
    );
  }