Flutter render overflow bottom issue on smaller devices

Question

I have a alertdialog in my application which has come form elements init. The form is wrapped with a column widget. How ever when the keyboard opens up it throw bottom overflow issue. To solve that i have wrapped the column using singlechildScrollview. This solved the issue. But when i opened the same in a smaller device it throws the bottom overflow error even wrapped with singlechildScrollview. Currently the issue exists on smaller devices. The Code is given below

Get.defaultDialog(
      title: 'Have any Issues?',
      titleStyle: Theme.of(Get.context!).textTheme.headline5,
      content: SafeArea(
        child: SingleChildScrollView(
          reverse: true,
          scrollDirection: Axis.vertical,
          physics: const ClampingScrollPhysics(),
          child: Column(
            children: [
              Padding(
                padding:  EdgeInsets.only(bottom:bottom),
                child: Text(
                  paymentIssueMessage,
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              TextFormField(),
              TextFormField()    // Fields in form
              ]
             )
            )
           )

How can I solve this issue on smaller screen devices??

Answer 1

Add a Flexible widget or Expanded widget like below.

Column(
        children: [
          Padding(
            padding:  EdgeInsets.only(bottom:bottom),
            child: Text(
              paymentIssueMessage,
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          TextFormField(),
          TextFormField()
        ].map((e) => Flexible(child: e)).toList(),
      )