Bottom Overflowed using SingleChildScrollView

Issue

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

enter image description here

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?

Solution

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).

Answered By – Blasanka

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *