Bottom overflowed by 217 pixels

Question

I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels

I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels

    Scaffold(
      appBar: AppBar(
        leading: SizedBox(
          width: 16,
          child: IconButton(
              icon: const Icon(Icons.arrow_back, color: Colors.black),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Splash()),
                );
              }),
        ),
        title: const Text(
          "Upload KYC",
          style: TextStyles.header4,
        ),
        backgroundColor: ColorPalette.grey2,
        elevation: 0,
      ),
      backgroundColor: ColorPalette.grey2,
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(
                top: 45.h(), left: 20.w(), right: 20.w(), bottom: 20.h()),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    // crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      const Center(
                        child: Text(
                          "Personal Details",
                          style: TextStyles.subtitle04,
                        ),
                      ),
                      Divider(
                        thickness: 4.h(),
                        color: ColorPalette.azure,
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      const Center(
                        child: Text(
                          "ID Proof",
                          style: TextStyles.subtitle004,
                        ),
                      ),
                      Divider(
                        thickness: 4.h(),
                        color: ColorPalette.grey3,
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      const Center(
                        child: Text(
                          "Bank Details",
                          style: TextStyles.subtitle004,
                        ),
                      ),
                      Divider(
                        thickness: 4.h(),
                        color: ColorPalette.grey3,
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: 30.h(),
                  ),
                  const Text(
                    "Enter Your Details",
                    style: TextStyles.header002,
                  ),
                  SizedBox(height: 50.h()),

                  // KYC form
                  Form(
                      key: formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Align(
                            alignment: Alignment.topLeft,
                            child: Text(
                              'First Name',
                              style: TextStyles.subtitle4,
                            ),
                          ),
                          SizedBox(
                            height: 20.h(),
                          ),
                          TextFormField(
                            keyboardType: TextInputType.name,
                            textInputAction: TextInputAction.next,
                            decoration: const InputDecoration(
                              hintText: 'Enter Your First Name',
                              hintStyle: TextStyles.subtitle1,
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(16))),
                              contentPadding:
                                  EdgeInsets.fromLTRB(24, 24, 12, 16),
                            ),
                            toolbarOptions:
                                const ToolbarOptions(copy: true, paste: true),
                            validator: (val) {
                              if (val!.isEmpty) {
                                return 'Please fill in your name';
                              }
                              firstName = val;
                            },
                          ),
                          SizedBox(
                            height: 50.h(),
                          ),
                          const Align(
                            alignment: Alignment.topLeft,
                            child: Text(
                              'Last Name',
                              style: TextStyles.subtitle4,
                            ),
                          ),
                          SizedBox(
                            height: 20.h(),
                          ),
                          TextFormField(
                            keyboardType: TextInputType.name,
                            textInputAction: TextInputAction.next,
                            decoration: const InputDecoration(
                              hintText: 'Enter Your Last Name',
                              hintStyle: TextStyles.subtitle1,
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(16))),
                              contentPadding:
                                  EdgeInsets.fromLTRB(24, 24, 12, 16),
                            ),
                            toolbarOptions:
                                const ToolbarOptions(copy: true, paste: true),
                            validator: (val) {
                              if (val!.isEmpty) {
                                return 'Please complete your name';
                              }
                              lastName = val;
                            },
                          ),
                          SizedBox(
                            height: 50.h(),
                          ),
                          const Align(
                            alignment: Alignment.topLeft,
                            child: Text(
                              'Email',
                              style: TextStyles.subtitle4,
                            ),
                          ),
                          SizedBox(
                            height: 20.h(),
                          ),
                          TextFormField(
                            keyboardType: TextInputType.emailAddress,
                            textInputAction: TextInputAction.next,
                            decoration: const InputDecoration(
                              hintText: 'Enter Your Email Address',
                              hintStyle: TextStyles.subtitle1,
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(16))),
                              contentPadding:
                                  EdgeInsets.fromLTRB(24, 24, 12, 16),
                            ),
                            toolbarOptions:
                                const ToolbarOptions(copy: true, paste: true),
                            onChanged: (_) {
                              emailExists = false;
                            },
                            validator: (val) {
                              if (val == null || val.isEmpty) {
                                return 'Please enter an email address';
                              }
                              if (!Constants().emailFilter.hasMatch(val)) {
                                return 'Please enter a valid email';
                              }
                              if (emailExists) {
                                return 'A user with this email already exists';
                              }
                              email = val;
                            },
                          ),
                          SizedBox(
                            height: 50.h(),
                          ),
                          const Align(
                            alignment: Alignment.topLeft,
                            child: Text(
                              'Phone Email',
                              style: TextStyles.subtitle4,
                            ),
                          ),
                          SizedBox(
                            height: 20.h(),
                          ),
                          TextFormField(
                            keyboardType: TextInputType.phone,
                            textInputAction: TextInputAction.done,
                            decoration: const InputDecoration(
                              hintText: 'Enter Your Phone Number',
                              hintStyle: TextStyles.subtitle1,
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(16))),
                              contentPadding:
                                  EdgeInsets.fromLTRB(24, 24, 12, 16),
                            ),
                            validator: (val) {
                              if (val!.length < 11 || val.length > 11) {
                                return 'Phone Number should be 11';
                              }
                              phoneNumber = val;
                            },
                          ),
                        ],
                      )),

                  const Spacer(),

                  Padding(
                    padding: const EdgeInsets.only(bottom: 50),
                    child: ConstrainedBox(
                      constraints: const BoxConstraints.expand(height: 54),
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: RoundedLoadingButton(
                          color: ColorPalette.blue1,
                          width: (MediaQuery.of(context).size.width - 40),
                          controller: _btnController,
                          borderRadius: 12,
                          elevation: 0,
                          animateOnTap: false,
                          onPressed: () => Navigator.of(context)
                              .pushReplacementNamed(KYCIDProofScreen.routeName),
                          child: const Text('Next'),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

Column wrap with SingleChildScrollView it will solve the overflow issue