I am trying to build a multi-page registration screen with each page having a Form
displayed within a PageView
for each and smooth sliding effect. My only trouble is when the keyboard is displayed, the Form
doesn't scroll up and other fields get hidden behind the keyboard. Have a look at the screenshot.
The main registration page has Scaffold
which has a Stack
as body. PageView
is a child of the Stack
with a few other widgets, header back button and footer next button.
Below is the main registration page scaffold.
return Scaffold(
body: SafeArea(
child: Stack(
children: [
// Back Button
// Form Pages
Padding(
padding: const EdgeInsets.only(top: 40),
child: PageView.builder(
controller: _formsPageViewController,
itemBuilder: (BuildContext context, int index) {
return _forms[index];
},
),
),
// Form Button
],
),
),
);
Below is the build method of the PageView Form1 page.
Widget build(BuildContext context) {
return ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height / 2),
child: SingleChildScrollView(
physics: null,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Page Title
//... code removed for title text
// Image Avatar
// ... code removed for Avatar image
// Form
Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: [
// Name
// ... Code removed for textbox
// Govt. Registration No
// ... Code removed for textbox
// Establishment Year and Month
Row(
children: [
// Established Month
Flexible(
child: // ... Code removed for dropdown
),
// Established Year
Flexible(
child: // .. Code removed for dropdown
)
],
),
// ... code removed for next button
],
),
),
),
],
),
),
);
} // Build
you disabled the
SingleChildScrollView's physics
inside the form, change it to this: