Flutter - SingleChildScrollView interfering in columns

Question

I created a screen that works well with the columns, but I needed to scroll because of the keyboard.

When you insert the SingleChildScrollView or the ListView attribute the MainAxisAlignment.spaceBetween, it no longer works.

Was there any solution for that?

Gif without the SingleChildScrollView the screen does not roll and the FloatingActionButton is at the bottom of the screen

Gif with SingleChildScrollView the screen roll and he FloatingActionButton is not in bottom of the screen

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(      
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),        
      body: new SingleChildScrollView(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Container(
                child: new Column(
                  children: <Widget>[
                    new TextField(
                      decoration: const InputDecoration(
                        labelText: "Description",
                      ),
                      style: Theme.of(context).textTheme.title,
                      ),
                    new TextField(
                      decoration: const InputDecoration(
                        labelText: "Description",
                      ),
                      style: Theme.of(context).textTheme.title,
                    ),
                    new TextField(
                      decoration: const InputDecoration(
                        labelText: "Description",
                      ),
                      style: Theme.of(context).textTheme.title,
                    ),
                  ],
                )
              ),
              new Container(
                margin: new EdgeInsets.only(bottom: 16.0),
                child: new FloatingActionButton(
                  backgroundColor: new Color(0xFFE57373),
                  child: new Icon(Icons.check),
                  onPressed: (){}
                ),                    
              )
            ],
        ),
      )            
    );
  }
}

Answer 1

I would recommend against using FloatingActionButton in the way you are doing here. FloatingActionButton should be used for actions that always need to always be on screen at all times. See the Material guidelines on button usage for suggestions on other button types that can be scrolled, like RaisedButton and FlatButton. You could use a RaisedButton here, but I think it would be better to make your screen a dialog and put the save action in the AppBar as I suggested in your other question.

If you do decide to use a RaisedButton or FlatButton, keep in mind that scrollables don't normally change their item spacing based on the size of their container. Instead of using MainAxisAlignment.spaceBetween, you could put some Padding around your RaisedButton to separate it from the TextField elements. This will ensure that they are spaced the same distance apart regardless of rotation, screen size, and regardless of whether the keyboard is up.