Search code examples
flutterflutter-layoutflutter-dependenciesflutter-webflutter-animation

TextFormField resizes the widgets and causes RenderFlex overflow


The TextFormField whenever clicked on causes the widgets to be resized. In the process the app suffers from a RenderFlex Overflow.

Note: Looking for a solution besides the disabling of resizeToAvoidBottomInset.

        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  const Padding(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Text(
                        'Enter contacts here',
                        textScaleFactor: 1.5,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: InternationalPhoneNumberInput(onInputChanged: (value) {}),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: InternationalPhoneNumberInput(onInputChanged: (value) {}),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: InternationalPhoneNumberInput(onInputChanged: (value) {}),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: InternationalPhoneNumberInput(onInputChanged: (value) {}),
                    ),
                     Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        autofocus: false,
                        initialValue: "Help! This is an emergency text sent as a call for help. Call the sender or police for assistance.",
                        minLines: 2,
                        maxLines: 5,
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                ],
              )
            ),
          ],
        ),
      ),```

Solution

  •   just change the Column to ListView .please use below code. if you find this code helpful .mark this answer as accepted to help other.
    
    
    SingleChildScrollView(
      child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ListView(
                        shrinkWrap:true,
                        children: [
                       
                          const Padding(
                              padding: EdgeInsets.symmetric(vertical: 10),
                              child: Text(
                                'Enter contacts here',
                                textScaleFactor: 1.5,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextInputWithIcon(onChanged: (value) {},textName: "",width:300),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextInputWithIcon(onChanged: (value) {},textName: "",width:300),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                       child: TextInputWithIcon(onChanged: (value) {},textName: "",width:300),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                            child: TextInputWithIcon(onChanged: (value) {},textName: "",width:300),
                            ),
                             Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextFormField(
                                autofocus: false,
                                initialValue: "Help! This is an emergency text sent as a call for help. Call the sender or police for assistance.",
                                minLines: 2,
                                maxLines: 5,
                                decoration: const InputDecoration(
                                  border: OutlineInputBorder(),
                                ),
                              ),
                            ),
                        ],
      )
                    
                    ],
                  ),
    ),