Flutter keyboard hides input

Question

I am using Flutter for a mobile application. I have a TextField rather low in the screen. When I tap on it the phone keyboard appears but the layout doesn't change so my TextField is now hidden by the keyboard.

Do you have any ideas how to fix this?

My view:

  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    return Scaffold(
        body: Container(
        child: Column(
          children: [
            SizedBox(height: 770),
            Input(label: 'Password', type: TextInputType.text)
          ],
        )
    ));
  }

My Input:

class Input extends StatelessWidget {
  final String label;
  final bool password;
  final bool email;
  final TextInputType type;

  const Input({Key? key, required this.label, this.password = false, this.email = false, required this.type}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height < 900 ? 45 : 60,
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        border: Border.all(color: const Color.fromRGBO(197, 197, 197, 1.0), width: 1.5),
        borderRadius: BorderRadius.circular(7.0),
      ),
      child: TextField(
        autocorrect: password || email ? false : true,
        obscureText: password ? true : false,
        keyboardType: type,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: label,
          hintStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontFamily: 'Lora')
        ),
      ),
    );
  }
}

I am aware that you can fix this by working with ListView and SingleChildScrollView, however since my page is a login page I don't want it to be scrollable.

Does this answer your question? [Flutter Keyboard makes textfield hide](https://stackoverflow.com/questions/51335483/flutter-keyboard-makes-textfield-hide) — MrOrhan, May 25 '23 at 13:44

score 0 · Answer 1 · answered May 25 '23 at 13:50

0

Change this:

 Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    return Scaffold(
        body: Container(
        child: Column(
          children: [
            SizedBox(height: 770),
            Input(label: 'Password', type: TextInputType.text)
          ],
        )
    ));
  }

to this:

 Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    return Scaffold(
      resizeToAvoidBottomInset: true,
        body: Container(
        child: Column(
          children: [
            SizedBox(height: 770),
            Input(label: 'Password', type: TextInputType.text)
          ],
        )
    ));
  }

answered May 25 '23 at 13:50

MrOrhan

877
6
21

Thanks for the reply. It doesn't seem to work. The input doesn't go up. – mromaric May 25 '23 at 13:55
Wrap your widget with following Padding( child: Input(label: 'Password', type: TextInputType.text), padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom)); – MrOrhan May 25 '23 at 14:15
and still doesnt help look up here: https://stackoverflow.com/questions/51335483/flutter-keyboard-makes-textfield-hide – MrOrhan May 25 '23 at 14:15

Flutter keyboard hides input

1 Answers1