Keyboard Crushing TextFields - flutter

Question

I'm learning to code in Flutter and and redoing one of my Android/iOS apps. This is roughly what the UI looks like so far:
When I tap a field to open the keyboard, it smashes all of the fields together.
I'm trying to decide what the best way of handling this is. The only way I can think of to fix it is to somehow not have all of the fields and the button pushed up when the keyboard opens. But if I do that, then the fields lower on the screen will not be visible when data is being entered into them. Is there a good way to handle this?
This is the code for this view:
class _CarbCalcState extends State<CarbCalc> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Carb Calculator'),
backgroundColor: Colors.purple.shade700,
leading: IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.library_books),
onPressed: () {},
)
],
),
body: Container(
margin: EdgeInsets.only(top: 40.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
NutrientValue(
nutrientName: 'Protein',
onChanged: (value) {
print('Protein Changed');
},
),
NutrientValue(
nutrientName: 'Fat',
onChanged: (value) {},
),
NutrientValue(
nutrientName: 'Fiber',
onChanged: (value) {},
),
NutrientValue(
nutrientName: 'Moisture',
onChanged: (value) {},
),
NutrientValue(
nutrientName: 'Ash',
onChanged: (value) {},
),
SizedBox(
height: 30.0,
),
ButtonTheme(
minWidth: double.infinity,
height: 50,
child: FlatButton(
onPressed: () {},
color: Colors.blue.shade700,
child: Text(
'Calculate Carbs',
style: TextStyle(
fontSize: 20,
),
),
),
),
],
),
),
);
}
}
class NutrientValue extends StatelessWidget {
NutrientValue({#required this.nutrientName, #required this.onChanged});
final String nutrientName;
final Function onChanged;
#override
Widget build(BuildContext context) {
return Expanded(
child: Row(
children: <Widget>[
Container(
width: 90,
child: Text(
nutrientName,
style: TextStyle(fontSize: 18.0),
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.numberWithOptions(
signed: false,
decimal: true,
),
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
onChanged: this.onChanged,
decoration: InputDecoration(
hintText: 'Enter $nutrientName',
hintStyle: TextStyle(
color: Colors.grey,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Colors.white,
),
),
),
],
));
}
}

Answer 1

You are having a Column with several Expanded inside which take care that the space is evenly distributed. When the space shrinks by the keyboard, they move together. Basically it is a good idea to put input fields into a Scrollview because of the Keyboard. You can use SingleChildScrollView with your Column but you need to replace the Expanded widgets with a Container for example or just use the plain TextFields.