0

I have this TextFormFields in a scrollView. The top 2 TextFormFields allow the user to see what they are typing. However, on clicking the third TextFormField, the keyboard appears above the TextFormField and hides it so the user does not see what they are typing. How can I correct this. On clicking the first one.

Img 1.

Clicking the Third One, it is hidden partially

img 2

Clicking the fourth, nothing can be seen at all. Keyboard obscures it Nothing can be seen at all. Keyboard obscures it

The Code I have

Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    child: Column(
      children: <Widget>[
        Container(
          height: 200.0,
          width: double.infinity,
          color: Colors.black,
        ),
        Expanded(
          child: SingleChildScrollView(
            child: Form(
              child: Column(children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration: InputDecoration(
                      labelStyle: Theme.of(context).textTheme.subhead,
                      labelText: 'One',
                      contentPadding: EdgeInsets.all(15.0),
                      isDense: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(4.0),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration: InputDecoration(
                      labelStyle: Theme.of(context).textTheme.subhead,
                      labelText: 'Two',
                      contentPadding: EdgeInsets.all(15.0),
                      isDense: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(4.0),
                      ),
                    ),
                  ),
                ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: InputDecoration(
                  labelStyle: Theme.of(context).textTheme.subhead,
                  labelText: 'Three',
                  contentPadding: EdgeInsets.all(15.0),
                  isDense: true,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4.0),
                  ),
                ),
              ),
            ),

The normal default android keyboard usedenter image description here

Taio
  • 3,152
  • 11
  • 35
  • 59
  • It seems like this is caused by your really strange system keyboard (one that can be moved around). I would say that 99.9% of all users have a normal keyboard that is attached to the bottom of the screen, and in that case everything works correctly – boformer Aug 23 '18 at 11:16
  • I think the keyboard is Gboard, and there are a lot of people that use Gboard. This post https://stackoverflow.com/q/46551268/8954451 has the problem the other way around, so maybe you can get some idea from it. – FoxyError Aug 23 '18 at 11:24
  • You could also try to run it and give me feedback. I have attached the screenshot using the default android keyboard and the problem for me persists – Taio Aug 23 '18 at 11:26
  • I ran it and I have the same problem, I think your structure isn't right. Why do you want to have it 200.0 from the top? – FoxyError Aug 23 '18 at 11:37
  • That is a different Container. From the screenshot it is black in color. It could hold text or something else in future. I dont want it to be part of the scrollView. – Taio Aug 23 '18 at 11:51
  • Actually, I have no problem with it being part of the scrollView. As long as the keyboard issue is gone – Taio Aug 23 '18 at 11:53

0 Answers0