Tab is shifting when widget is not visible - flutter

Question

I am new in Flutter so maybe my question will be basic for someone.
The problem is that in my app I want to hide TextField when CheckBox is unchecked. Next to a TextField is a button which should be static. My issue is that when I want to hide this TextField, button is shifting to the left side. I think that the best option is to show it to you
Before:
After:
This is the code I am using:
bool secondLayer = false;
void _secondLayer(bool value) => setState(() => secondLayer = value);
#override
Widget build(BuildContext context) {
return new Scaffold(
/*appBar: new AppBar(
title: new Text('Name Here'),
),*/
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
child: new Container(
padding: new EdgeInsets.all(32.0),
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
child: new Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'First Hidden Layer',
hintText: '25',
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.number,
),
],
),
),
Expanded(
child: Column(
children: <Widget>[
new SizedBox(
width: 100,
child: new RaisedButton(onPressed: null, child: new Text('ADD DATA'),)
)
],
),
)
],
),
),
Container(
child: new CheckboxListTile(
value: secondLayer,
onChanged: _secondLayer,
title: new Text(
'Use Second Hidden Layer',
style: new TextStyle(
fontSize: 12
),
),
controlAffinity: ListTileControlAffinity.leading,
),
),
Container(
child: new Row(
children: <Widget>[
Visibility(
visible: secondLayer,
child: new Expanded(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'Second Hidden Layer',
hintText: '25',
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.number,
),
],
),
),
),
Expanded(
child: Column(
children: <Widget>[
new SizedBox(
width: 100,
child: new RaisedButton(onPressed: null, child: new Text('OPTIONS'),)
)
],
),
)
],
),
),
Container(
child: new TextField(
decoration: InputDecoration(
labelText: 'Epochs',
hintText: '5000',
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.number,
),
),
Container(
child: new TextField(
decoration: InputDecoration(
labelText: 'Learning Rate',
hintText: '0.00333',
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.number,
),
),
Container(
padding: EdgeInsets.only(top: 20),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width/3,
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border.all(color: Color.fromRGBO(0, 0, 0, 100)),
),
child: new Text('data')
),
Container(
width: MediaQuery.of(context).size.width/3,
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border.all(color: Color.fromRGBO(0, 0, 0, 100)),
),
child: new Text('data')
)
],
)
)
],
),
)
)
)
);

Answer 1

It is because you didn't add any replacement property to your Visibility Widget.
Visibility(
visible: secondLayer,
child: Expanded(
child: Column(
children: <Widget>[
// your text field here
]
),
),
replacement: Expanded(child: Container()), // the widget which will fill the space when hiddden
)
Something like this should work as you replace your TextField with an empty Container inside an Expanded to fill your empty space.

Answer 2

You need to set the maintainSize property of the Visibility widget to true, it is used to decide "whether to maintain space for where the widget would have been." Source
You also need to set maintainAnimation and maintainState to true for maintainSize to work. Source
So your code will go from:
Visibility(
visible: secondLayer,
child: yourChildWidget
),
to:
Visibility(
visible: secondLayer,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: yourChildWidget
),