TextFormField hide behind keyboard.

[kuldeep13990]

I have single screen and i divided that screen in 2 different Widget and return that 2 Widget in my main Widget child.

If I write all code in my main Widget then TextFormField showing above keyboard. but when i divide in 2 different widget then TextFormField goes behind keyboard.

Normal Screen

Second Screen where TextFormField behind keyboard

contact_screen.dart (Main Widget)

class ContactScreen extends StatelessWidget {
  static const routeName = "ContactScreen";

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text(
          "Contact",
        ),
      ),
      body: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: SingleChildScrollView(
            child: Theme(
                data: Theme.of(context).copyWith(
                  disabledColor: Colors.grey,
                  iconTheme: IconTheme.of(context).copyWith(
                    color: Colors.red,
                    size: 28,
                  ),
                ),
                child: ContactUs()),
          ),
        ),
      ),
    );
  }
}

contact_us.dart

class ContactUs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("CONTACT SCREEN WIDGET CALLED");
    final mediaQuery = MediaQuery.of(context);
    return Column(
      children: <Widget>[
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(16),
              decoration:
                  BoxDecoration(borderRadius: BorderRadius.circular(12)),
              // margin: EdgeInsets.all(16),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.0),
                child: Image.asset(
                  "assets/images/ic_contact.png",
                  height: mediaQuery.size.height * 0.22,
                  fit: BoxFit.cover,
                  width: double.infinity,
                ),
              ),
            ),
            Positioned(
              left: 16,
              right: 16,
              child: Container(
                padding: EdgeInsets.symmetric(
                  vertical: 10,
                  horizontal: 10,
                ),
                child: Text(
                  "Contact us",
                  textAlign: TextAlign.left,
                  softWrap: true,
                  overflow: TextOverflow.fade,
                ),
              ),
            ),
          ],
        ),
        Container(
          margin: EdgeInsets.only(left: 16, top: 10, right: 16, bottom: 10),
          // padding: EdgeInsets.only(top: 25, bottom: 10),
          child: Text(
            "HAVE A PRODUCT IDEA IN MIND? TALK TO US ABOUT IT!",
            style: TextStyle(
              fontSize: 17,
              color: Colors.black,
              fontWeight: FontWeight.w600,
            ),
            textAlign: TextAlign.left,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 16, right: 16, bottom: 25),
          child: Text(
            "Get a professional consultation about your dream concept from our expert team!",
            style: TextStyle(
              fontSize: 15,
              color: Color(0xFF585858),
            ),
            textAlign: TextAlign.left,
          ),
        ),
        ContactUsForm(),
      ],
    );
  }
}

contact_form.dart

class ContactUsForm extends StatefulWidget {
  @override
  _ContactUsFormState createState() => _ContactUsFormState();
}

class _ContactUsFormState extends State<ContactUsForm> {
  final fullNameController = TextEditingController();
  final emailController = TextEditingController();
  final subjectController = TextEditingController();
  final messageController = TextEditingController();

  final FocusNode _nodeText1 = FocusNode();
  final FocusNode _nodeText2 = FocusNode();
  final FocusNode _nodeText3 = FocusNode();
  final FocusNode _nodeText4 = FocusNode();

  /// Creates the [KeyboardActionsConfig] to hook up the fields
  /// and their focus nodes to our [FormKeyboardActions].
  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      // keyboardBarColor: AppColors.sideMenuBGColor,
      // keyboardSeparatorColor: AppColors.sideMenuBGColor,
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText2,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText3,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText4,
        ),
      ],
    );
  }

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  clearTextInputs() {
    fullNameController.clear();
    emailController.clear();
    subjectController.clear();
    messageController.clear();
  }

  void _submitContactRequest() {
    FocusScope.of(context).unfocus();
    if (!_formKey.currentState.validate()) {
      print("FORM IS NOT VALIDATE");
      return;
    }

    _formKey.currentState.save();
  }

  InputDecoration setTextFieldDecoration(String hintText) {
    return InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
        hintText: hintText,
        hintStyle: TextStyle(color: Color(0xFF585858)));
  }

  @override
  Widget build(BuildContext context) {
    final spaceBetweenLabelText = SizedBox(
      height: 6,
    );

    print("CONTACT FORM WIDGET REBUILD");
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Color(0xFFF6F5F9),
      ),
      child: Form(
        key: _formKey,
        child: KeyboardActions(
          config: _buildConfig(context),
          overscroll: 50,
          disableScroll: true,
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Full name",
                      textAlign: TextAlign.left,
                    ),
                    spaceBetweenLabelText,
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white,
                      ),
                      child: TextFormField(
                        autocorrect: false,
                        enableSuggestions: false,
                        focusNode: _nodeText1,
                        controller: fullNameController,
                        cursorColor: Colors.black,
                        decoration: setTextFieldDecoration("Enter full name"),
                        validator: (value) {
                          if (value.trim().isEmpty) {
                            return "Please enter full name.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Email",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          fontSize: 17,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    ),
                    spaceBetweenLabelText,
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white,
                      ),
                      child: TextFormField(
                        autocorrect: false,
                        enableSuggestions: false,
                        focusNode: _nodeText2,
                        controller: emailController,
                        cursorColor: Colors.black,
                        keyboardType: TextInputType.emailAddress,
                        decoration: setTextFieldDecoration("Enter email"),
                        validator: (value) {
                          if (value.trim().isEmpty) {
                            return "Please enter email.";
                          } else if (!value.isValidEmail()) {
                            return "Please enter valid email.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Subject",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          fontSize: 17,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    ),
                    spaceBetweenLabelText,
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white,
                      ),
                      child: TextFormField(
                        autocorrect: false,
                        enableSuggestions: false,
                        focusNode: _nodeText3,
                        controller: subjectController,
                        cursorColor: Colors.black,
                        decoration: setTextFieldDecoration("Enter subject"),
                        validator: (value) {
                          if (value.trim().isEmpty) {
                            return "Please enter subject.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Message",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          fontSize: 17,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    ),
                    spaceBetweenLabelText,
                    Container(
                      // height: 150,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white,
                      ),
                      child: TextFormField(
                        autocorrect: false,
                        enableSuggestions: false,
                        focusNode: _nodeText4,
                        controller: messageController,
                        textInputAction: TextInputAction.newline,
                        keyboardType: TextInputType.multiline,
                        maxLines: 5,
                        // expands: true,
                        cursorColor: Colors.black,
                        decoration: setTextFieldDecoration("Enter message"),
                        validator: (value) {
                          if (value.trim().isEmpty) {
                            return "Please enter message.";
                          }
                          return null;
                        },
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      margin: EdgeInsets.only(top: 35, bottom: 20),
                      child: ElevatedButton(
                        child: Text(
                          "Submit",
                          style: TextStyle(
                            fontSize: 17,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        style: ElevatedButton.styleFrom(
                          primary: Color(0xFF4B368A),
                          padding: EdgeInsets.symmetric(vertical: 12),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12.0),
                          ),
                        ),
                        onPressed: _submitContactRequest,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Demo Link: https://drive.google.com/file/d/1LjGLSjQ7nxI1hwmvOg33Oj3pVzzwqUpm/view?usp=sharing
It will be very helpful if you guys let me help with this.

[buraktabn]

Maybe this question on StackOverflow can help.

[Shayan-Aslani]

Use scroll padding property of TextField.