Bottom Overflowed using SingleChildScrollView - flutter

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.

Answer 2

Column(
children: <Widget>[
replace that with:
Stack(
children: <Widget>[
You are seeing that error because your SingleChildScrollView is inside a Column.
Another solution is to wrap your Parent Column with SingleChildScrollView instead of second one. But that will scroll your image too.
Or, if your image is a fixed one, you can add that to AppBar bottom:
AppBar(
//...
bottom: PreferredSize(
preferredSize: Size.fromHeight(129.0),
child: Image.asset(
"images/360Tecnologia.jpg",
fit: BoxFit.fitWidth,
),
),
),
Of course in this case if your snapshot.hasError or when connection is waiting, you will see this image(You can have a condition like isDataAvailable and make it true when connection state done and check it in bottom).
Another way is wrap parent Column with another SingleChildScrollView but that will make two scroll views. So to avoid image (Outher scroll view) to not to scroll add scrollPysics: NeverScrollPhysics()(But I dont recommend unnecessary wrap with extra widget).