how do i fix vertical flutter overflow?

Question

I'm trying to fix vertical overflow using the SingleChildScrollView but it gives me the error:

FlutterError (RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint.

I have tried using Expanded and MainAxisSize.min to no avail.

This is my code:

Widget build(BuildContext context) {
    double altezza = MediaQuery.of(context).size.height;
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              altezza > 750 && valoreCheckAbbuonoOre == false
                  ? SizedBox(height: altezza / 9)
                  : altezza > 750 && valoreCheckAbbuonoOre == true
                      ? SizedBox(height: altezza / 11)
                      : SizedBox(height: altezza / 15),
              Text("Rapporto di $meseAttuale $annoAttuale",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21)),
              SizedBox(height: 20),
              GestureDetector(
                onTap: () {
                  click(1);
                },
                child: Text("Visualizza rapporto precedente",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.blue[900])),
              ),
              SizedBox(height: 20),
              TabellaStatica(visualizzaRapporto, "attuale"),
              SizedBox(height: 20),
              obiettivo != 0 && obiettivo != null
                  ? Text("$testoObiettivo",
                      style: plus != null
                          ? TextStyle(
                              color: Colors.green,
                              fontSize: 15,
                              fontWeight: FontWeight.bold)
                          : deficit != null
                              ? TextStyle(
                                  color: Colors.red,
                                  fontSize: 15,
                                  fontWeight: FontWeight.bold)
                              : TextStyle(
                                  color: Colors.green,
                                  fontSize: 15,
                                  fontWeight: FontWeight.bold))
                  : SizedBox(),
              SizedBox(height: 10),
              IconButton(
                icon: new Icon(
                  Icons.whatsapp,
                  color: Colors.green,
                  size: 30,
                ),
                onPressed: () async {
                  inviaWhatsapp();
                },
              ),
            ],
          ),
          Spacer(),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              MaterialButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            AggiungiServizio(visualizzaRapporto)),
                  );
                },
                shape: CircleBorder(),
                color: Colors.blue[900],
                padding: EdgeInsets.all(10),
                child: const Icon(
                  Icons.add,
                  size: 30,
                  color: Colors.white,
                ),
              ),
            ],
          ),
          SizedBox(height: 20),
        ],
      ),
    );
  }
}

Answer 1

Remove Spacer and try again, Spacer can't be used with SingleChildScrollView

To place Button in the bottom:

Column(
  children: [ 
   Expanded( 
    child: SingleChildScrollView( 
        child: Column( 
          children: [
             // your widgets ], ), ), ),///This will take the whole  
         ElevatedButton(onPressed: onPressed, child: child)// Your button will be at bottom 

], )