Depois de agrupar meu widget Column com o widget SingleChildScrollView, minha tela foi cortada assim:
Não consegui encontrar a altura máxima de preenchimento ou algo assim como parâmetro para o SingleChildScrolledView. A razão para adicionar o SingleChild é porque quando abro o toque no widget TextField e o teclado aparece, o último TextField diz que está 'transbordado' e como solução, descobri que TextField deveria ser adicionado. Desde já, obrigado :)
class _RegisterScreenState extends State<RegisterScreen> {
// TextFields controllers
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
width: double.infinity,
color: const Color(0xFF26243C),
child: SingleChildScrollView(
reverse: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 72),
const Text("Get Started",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Chalet',
fontSize: 48,
fontWeight: FontWeight.w100,
color: Color(0xFFDF862D),
height: 1.0
),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Already have an account?',
textAlign: TextAlign.center,
style: TextStyle(color: Color(0xFFF6F9F8))),
TextButton(
onPressed: () {
// take you to login page
Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterScreen()));
},
child: const Text(
'Sign In!',
style: TextStyle(
color: Color(0xFFF6F9F8), fontWeight: FontWeight.bold)
))
],
),
const SizedBox(height: 65),
const Text("Your e-mail",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// email textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _emailController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your e-mail',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _passwordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Confirm your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// confirm password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _confirmPasswordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Confirm your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
],
),
),
),
);
}
}
depois de adicionar BoxConstrains.expand() às minhas restrições de contêiner, isso aconteceu:
Scaffold(
body: Container(
// ...
constraints: BoxConstraints.expand(), // Added this
child: SingleChildScrollView(
// ...
),
),
)
O
Container
que envolve oSingleChildScrollView
é restrito para corresponder à altura solicitada do filho. Para fazerContainer
com que seu filho se expanda para o corpo deScaffold
, useconstraints: BoxConstraints.expand()
.Veja também: Compreendendo as restrições
EDIT: Você também
reverse: true
definiu, o que inverte a direção de rolagem e faz com que o espaço restante seja preenchido na parte superior. Remova essa linha.