How can I see last widget in Column which is wrapped in SingleChildScrollView even when keyboard is open in flutter?

Question

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  'Discount (%) :',
                  style: TextStyle(fontSize: 14),
                ),
                Container(
                  width: 40,
                  height: 30,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade200,
                      border: const Border.fromBorderSide(BorderSide.none),
                      borderRadius: BorderRadius.circular(10)),
                  child: Center(
                    child: TextField(
                      onChanged: (text) {
                        getDiscountedAmount(text);
                      },
                      cursorHeight: 18,
                      keyboardType: TextInputType.number,
                      controller: discountController,
                      decoration: const InputDecoration(
                        floatingLabelBehavior: FloatingLabelBehavior.never,
                        border: InputBorder.none,
                        contentPadding:
                            EdgeInsets.only(bottom: 12, right: 2),
                        labelText: '    0',
                        labelStyle: TextStyle(
                          fontSize: 14,
                        ),
                      ),
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                  ),
                ),
              ],
            ),

This is how screen looks when keyboard is opened.I have Column wrapped with SingleChildScrollView. Column contains TextField as a last widget. when I click on TextField, my keyboard overlap the textfield by default. I can't see what is the input in the textfield. I want to see the TextField even when the keyboard is opened. How to achieve this in flutter ? Please guide me. Thanks in advance.

I want screen to be scrolled up and textfield should be visible even when the keyboard is opened.

This discount row has a textfield. when i click on it, keyboard appears and textfield goes behind the keyboard. i want to whole screen to slide up to see the textfield even when the keyboard is opened.

Answer 1

Below is the correct solution for your issue.

return Scaffold(
  resizeToAvoidBottomInset : true,
  body: YourWidgets(),
); 

If you read the documentation for "resizeToAvoidBottomInset" it states that,

/// If true the [body] and the scaffold's floating widgets should size
/// themselves to avoid the onscreen keyboard whose height is defined by the
/// ambient [MediaQuery]'s [MediaQueryData.viewInsets] `bottom` property.
///
/// For example, if there is an onscreen keyboard displayed above the
/// scaffold, the body can be resized to avoid overlapping the keyboard, which
/// prevents widgets inside the body from being obscured by the keyboard.
///
/// Defaults to true.
final bool? resizeToAvoidBottomInset;

Thanks me later! Cheers!

Answer 2

the problem i understand is when you tap on textfield the keyboard popsup and it overloop. to solve this issue you can set the

return Scaffold(
resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    ); 

hope this will help