Flutter - Form inside PageView not scrolling

385 views Asked by At

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.

enter image description here

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

1

There are 1 answers

1
eamirho3ein On

you disabled the SingleChildScrollView's physics inside the form, change it to this:

ConstrainedBox(
        constraints:
            BoxConstraints(maxHeight: MediaQuery.of(context).size.height / 2),
        child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(), // <--- change to this
      ....
)