Bottom Overflowed using SingleChildScrollView

Question

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Color(0xff003859),
  appBar: AppBar(
    title: Text(
      "Conversor de moedas 360",
      style: TextStyle(
        color: Color(0xff003859)
      )
    ),
    backgroundColor: Color(0xffffa300),
  ),
  body: FutureBuilder<Map>(
    future: getData(),
    builder: (context, snapshot) {
      switch(snapshot.connectionState){
        case ConnectionState.none:
        case ConnectionState.waiting:
        return Center(
          child: Text(
            "Carregando Dados...",
            style: TextStyle(
              color: Color(0xffffa300),
              fontSize: 25.0
            ),
            textAlign: TextAlign.center,
          )
        );
        default:
        if (snapshot.hasError){
          return Center(
              child: Text(
                "Erro ao carregar dados...",
                style: TextStyle(
                    color: Color(0xffffa300),
                    fontSize: 25.0
                ),
                textAlign: TextAlign.center,
              )
          );  
        } else {
          dolar = snapshot.data["results"]["currencies"]["USD"]["buy"];
          euro = snapshot.data["results"]["currencies"]["EUR"]["buy"];
          return Column(
            children: <Widget>[
              Image.asset(
              "images/360Tecnologia.jpg",
                fit: BoxFit.fitWidth,
              ),
              SingleChildScrollView(
                padding: EdgeInsets.all(10.0),
                child: Column(
                  children: <Widget>[
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Reais",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "R\$ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Dólares",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "U\$ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Euros",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "€ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Libra",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "£\$ "
                      ),
                      style: TextStyle(
                        color: Color(0xffffa300),
                        fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Bitcoin",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "BTC "
                      ),
                      style: TextStyle(
                        color: Color(0xffffa300),
                        fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                        decoration: InputDecoration(
                            labelText: "Bitcoin",
                            labelStyle: TextStyle(
                              color: Color(0xffffa300),
                            ),
                            border: OutlineInputBorder(),
                            prefixText: "BTC "
                        ),
                        style: TextStyle(
                            color: Color(0xffffa300),
                            fontSize: 25.0
                        )
                    ),
                  ],
                )
              )
            ],
          );
        }
      }
    }
  )
);
}
}

I want to show an image on top below the top bar. The image is fixed.

Below the top bar I have any text field inside the SingleChildScrollView widget, but this not work when I try to scroll the elements.

The text field can't rolling when I roll the screen to up or to down.

The stackoverflow want I type more text because I put many code, but my doubt is explained on text up...

Any help?

Answer 1

To address the singleChildScrollView issue, you can wrap that in an Expanded widget and that will solve that problem. Though, you may want to look into using a SliverList for what you're doing if you want the image to be up top and fixed in the app bar.