I have a register view that goes through several views as steps to fill out registration information. In this setup I have trouble ensuring the content of each step is placed at the top of the screen while avoiding a “bottom overflowed” error when keyboard is active and shown.
Here is my code:
class RegisterView extends StatefulWidget {
const RegisterView({super.key});
@override
State<RegisterView> createState() => _RegisterViewState();
}
class _RegisterViewState extends State<RegisterView> {
String? _firstName;
String? _lastName;
String? _password;
String? _email;
void _onNameNext(String firstName, String lastName) {
setState(() {
_firstName = firstName;
_lastName = lastName;
});
}
void _onPasswordNext(String password) {
setState(() {
_password = password;
});
}
void _onAccountCreated() {
Navigator.of(context).pushNamedAndRemoveUntil(
verifyEmailRoute,
(route) => false,
);
}
void _onEmailEntered(String email) {
setState(() {
_email = email;
});
}
String _getTitle() {
if (_firstName == null || _lastName == null) {
return 'Hvad hedder du?';
} else if (_password == null) {
return 'Opret en adgangskode';
} else {
return 'Hvad er din email?';
}
}
void _goBack() {
if (_password != null) {
setState(() {
_password = null;
});
} else if (_firstName != null && _lastName != null) {
setState(() {
_firstName = null;
_lastName = null;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_getTitle()),
leading: (_firstName != null || _lastName != null)
? IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: _goBack,
)
: null,
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_firstName == null || _lastName == null)
RegisterNameStep(
onNext: _onNameNext,
initialFirstName: _firstName,
initialLastName: _lastName,
)
else if (_password == null)
RegisterPasswordStep(
onNext: _onPasswordNext,
initialPassword: _password,
)
else
RegisterEmailStep(
firstName: _firstName!,
lastName: _lastName!,
password: _password!,
initialEmail: _email,
onAccountCreated: _onAccountCreated,
),
const SizedBox(height: 16),
],
),
),
),
);
}
}
And this is the code for one of the steps. The password and email steps are structured similarly.
class RegisterNameStep extends StatefulWidget {
final Function(String, String) onNext;
final String? initialFirstName;
final String? initialLastName;
const RegisterNameStep({
required this.onNext,
this.initialFirstName,
this.initialLastName,
super.key,
});
@override
State<RegisterNameStep> createState() => _RegisterNameStepState();
}
class _RegisterNameStepState extends State<RegisterNameStep> {
late final TextEditingController _firstNameController;
late final TextEditingController _lastNameController;
late final FocusNode _firstNameFocusNode;
late final FocusNode _lastNameFocusNode;
bool _isFirstNameValid = false;
bool _isLastNameValid = false;
bool _isFirstNameFocused = false;
bool _isLastNameFocused = false;
@override
void initState() {
_firstNameController = TextEditingController(text: widget.initialFirstName);
_lastNameController = TextEditingController(text: widget.initialLastName);
_firstNameFocusNode = FocusNode();
_lastNameFocusNode = FocusNode();
_firstNameFocusNode.addListener(() {
setState(() {
_isFirstNameFocused = _firstNameFocusNode.hasFocus;
});
});
_lastNameFocusNode.addListener(() {
setState(() {
_isLastNameFocused = _lastNameFocusNode.hasFocus;
});
});
_isFirstNameValid = _firstNameController.text.isNotEmpty;
_isLastNameValid = _lastNameController.text.isNotEmpty;
super.initState();
}
@override
void dispose() {
_firstNameController.dispose();
_lastNameController.dispose();
_firstNameFocusNode.dispose();
_lastNameFocusNode.dispose();
super.dispose();
}
void _validateFirstName() {
if (!_firstNameFocusNode.hasFocus) {
setState(() {
_isFirstNameValid = _firstNameController.text.isNotEmpty;
});
} else if (_firstNameController.text.isEmpty) {
setState(() {
_isFirstNameValid = false;
});
}
}
void _validateLastName() {
if (!_lastNameFocusNode.hasFocus) {
setState(() {
_isLastNameValid = _lastNameController.text.isNotEmpty;
});
} else if (_lastNameController.text.isEmpty) {
setState(() {
_isLastNameValid = false;
});
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(bottom: 16.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Lots of text for why name is needed. yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada - approximately this long, but the length should be irrelevant and the view should be adaptable.',
style: TextStyle(fontSize: 12),
),
),
),
TextField(
controller: _firstNameController,
focusNode: _firstNameFocusNode,
decoration: InputDecoration(
border: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
labelText: 'Fornavn',
suffixIcon: _firstNameController.text.isNotEmpty &&
_isFirstNameFocused
? GestureDetector(
onTap: () {
_firstNameController.clear();
setState(() {
_isFirstNameValid = false;
});
},
child: const Icon(Icons.cancel,
color: Colors.grey, size: 20),
)
: null,
),
onChanged: (_) {
setState(() {
_isFirstNameValid = _firstNameController.text.isNotEmpty;
});
},
),
const SizedBox(height: 16),
TextField(
controller: _lastNameController,
focusNode: _lastNameFocusNode,
decoration: InputDecoration(
border: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
labelText: 'Efternavn',
suffixIcon:
_lastNameController.text.isNotEmpty && _isLastNameFocused
? GestureDetector(
onTap: () {
_lastNameController.clear();
setState(() {
_isLastNameValid = false;
});
},
child: const Icon(Icons.cancel,
color: Colors.grey, size: 20),
)
: null,
),
onChanged: (_) {
setState(() {
_isLastNameValid = _lastNameController.text.isNotEmpty;
});
},
),
const SizedBox(height: 8),
if (!_isFirstNameValid || !_isLastNameValid)
const Padding(
padding: EdgeInsets.only(top: 8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Både fornavn og efternavn skal udfyldes',
style: TextStyle(color: Colors.grey, fontSize: 12),
),
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _isFirstNameValid && _isLastNameValid
? () => widget.onNext(
_firstNameController.text, _lastNameController.text)
: null,
child: const Text('Næste'),
),
TextButton(
onPressed: () {
Navigator.of(context).pushNamedAndRemoveUntil(
loginRoute,
(route) => false,
);
},
child: const Text('Har du allerede en profil?'),
),
],
),
));
}
}
How can I make sure the content is placed at the top of the page and avoid getting overflow errors? I am testing this on an old Android device (Samsung j7) where the screen is small enough and the entire content of the page can’t be shown together with the keyboard within the view frame.