Примечание. Этому очень помог ответ Уильяма Террилла и Жостева Адеканби
Вот мой окончательный код после компиляции из разных мест:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset('assets/ic_launcher_round.png', fit: BoxFit.contain, width: 100, height: 100),
Builder(
builder: (BuildContext context) {
return
IconButton(
icon: Icon(MyFlutterApp.settings),
color: Colors.black,
onPressed: () {
navigateToSettings(context);
},
);
}
)
],
),
SizedBox(
height: 10,
),
Text(
"Highlands Latin School",
style: TextStyle(fontSize: 25, color: Color(0xFF012B5C), fontWeight: FontWeight.w700),
),
SizedBox(
height: 10,
),
Text(
"Canvas Grades",
style: TextStyle(color: Color(0xFF827250), fontSize: 18,),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: <Widget>[
TextField(
controller: myController1,
decoration: InputDecoration(
labelText: "Email",
border: OutlineInputBorder()
),
),
SizedBox(height: 10,),
Visibility(
visible: _isVisible,
child: TextField(
obscureText: _obscureText,
controller: myController2,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
suffixIcon: IconButton(
icon: Icon(_obscureText ? Icons.visibility_off: Icons.visibility),
onPressed: (){
setState(() {
_obscureText = !_obscureText;
});
},
)
),
),
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Visibility(
visible: _isVisible,
maintainSize: true,
maintainState: true,
maintainAnimation: true,
child: Checkbox(
value: _isChecked,
activeColor: Color(0xFF827250),
onChanged: (bool value){
setState(() {
_isChecked = value;
if (_isChecked) {
prefs.setString("email", Email);
prefs.setString("pass", Password);
prefs.setBool("remember", true);
} else {
prefs.setString("email", "");
prefs.setString("pass", "");
prefs.setBool("remember", false);
}
});
},
),
),
Visibility(
maintainSize: true,
maintainState: true,
maintainAnimation: true,
visible: _isVisible,
child: Text(
"SAVE LOGIN?", style: TextStyle(color: Color(0xFF827250)),
)
),
],
),
GestureDetector(
onTap: (){
setState(() {
if (_forgotPassText == "FORGOT PASSWORD?") {
_forgotPassText = "Back to Login";
_loginText = "Request Password";
_isVisible = false;
} else {
_forgotPassText = "FORGOT PASSWORD?";
_loginText = "Login";
_isVisible = true;
}});
},
child: Text(_forgotPassText, style: TextStyle(color: Color(0xFF827250))
),
),
],
)
],
),
],
),
Column(
children: <Widget>[
ProgressButton(
child: Text(
_loginText,
style: TextStyle(
color: Colors.white,
fontSize: 18
),
),
backgroundColor: Color(0xFF012B5C),
buttonState: _buttonState,
progressColor: Colors.white,
onPressed: () async {
//custom login method, edit _buttonState to make the button become spinner
}
},
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(15.0),
child: Text(error, style: TextStyle(color: _errorColor),
),
),
]
)
],
),
),
),
);
}
Я добавил Visibility и переменные в setStates, чтобы меняйте цвета, тексты и т. д. c на лету разными способами. Кроме того, я поместил текст в самом низу под кнопкой, которая не была показана на исходном рисунке.