Reputation: 23
I'm working on a Flutter app where I want to detect if the keyboard is visible to adjust the UI accordingly. I'm using the following logic to check if the keyboard is visible:
bool isKeyboardVisible = MediaQuery.of(context).viewInsets.bottom > 0;
This works fine for most text fields, but I'm facing an issue with a secure TextFormField (used for password input). The keyboard does not seem to trigger the isKeyboardVisible condition when it is opened for the password input. Here is the code for my password TextFormField:
TextFormField inputPassword() {
return TextFormField(
controller: controllerPassword,
obscureText: isPasswordHidden,
autofillHints: const [AutofillHints.password],
focusNode: passwordFocusNode,
textInputAction: TextInputAction.done,
validator: (value) =>
value == "" ? 'You must enter a username and password' : null,
decoration: InputDecoration(
isDense: true,
filled: true,
fillColor: const Color(0xFFF1F1F1),
contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
hintText: "Password",
hintStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: const Color(0xFF7A7A7A),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: const BorderSide(color: Colors.blue),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
isPasswordHidden = !isPasswordHidden;
});
},
child: Icon(
isPasswordHidden
? Icons.visibility_off
: Icons.visibility,
color: const Color(0xFFAEAECF),
),
),
),
);
}
Is there any reason why the secure keyboard (when the password field is focused) might not trigger the MediaQuery.of(context).viewInsets.bottom > 0
condition? How can I reliably detect when the secure keyboard is shown for this password field? Any suggestions or alternative approaches would be greatly appreciated!
I expected the condition MediaQuery.of(context).viewInsets.bottom > 0
to return true whenever the keyboard, including the secure keyboard for password input, is visible. This would allow me to adjust the UI accordingly.
Upvotes: 0
Views: 34