Home > Software design >  TextFormField resizes the widgets and causes RenderFlex overflow
TextFormField resizes the widgets and causes RenderFlex overflow

Time:10-22

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(),
                        ),
                      ),
                    ),
                ],
              )
            ),
          ],
        ),
      ),```

CodePudding user response:

Please place all childrens in to the Listview. and remove unnessary widgets.

ListView(
  shrinkWrap:true,
  children: [
    const Padding(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: Center(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(),
        ),
      ),
    ),
  ],
);

CodePudding user response:

  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(),
                            ),
                          ),
                        ),
                    ],
  )
                
                ],
              ),
),
  • Related