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.
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!