Flutter - How to use Scrollview correctly when showing the keyboard?

Asked

Viewed 732 times

0

I’ve seen several videos on youtube about it but in my code it doesn’t work like in the video. I’ve looked at some questions and some dirty using the code below, but it doesn’t solve the problem.

Scaffold(
   body: SingleChildScrollView(...),
   ...

I’ve tried to use ListView but I always get the same result. The gif below illustrates what happens: When opening the keyboard the layout does not move up showing the text field.

gif ilustrativo

I tried to use FocusNode in the TextField but it doesn’t work. My code is this.

var itemlBorder = OutlineInputBorder(borderSide: BorderSide(color: MyTheme.tintColor()));

return Scaffold(
   appBar: AppBar(title: Text('PageTitle')),
   body: SingleChildScrollView(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Column(children: [
         //Titulo
         Container(
            height: 50,
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.only(left: 10, right: 10, top: 7),
            decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(5)),
               color: MyTheme.tintColor()
            ),
            child: TextField(
              textInputAction: TextInputAction.next,
              controller: _cTitulo,
              keyboardType: TextInputType.name,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(12, 0, 12, 0),
                enabledBorder: itemlBorder,
                focusedBorder: itemlBorder,
                labelText: 'Titulo'.toUpperCase(),
              ),
            ),
         ),
         //Anexo
         Container(...
      ...
      ]
   )
)
input listview flutter layout keyboard

  • Dude, I don’t know where you’ve been searching but set the properties to FALSE resizeToAvoidBottomPadding | resizeToAvoidBottomInset will do the opposite of what you want... They need to be TRUE for the Scafold "focus" on the component.

  • Thanks, I didn’t know that. But true or false doesn’t solve the problem, I’ve tried several codes and nothing works. I already changed the emulator, installed a release version on my cell phone MI A2 and is always the same.

  • I did a test in the same scheme as your example and it worked correctly. Maybe it’s something else out of the example you gave us... Is this Scafold ai called inside some other widget? Or is it already the BUILD of the POST screen even? When you click on Edit, it displays some error?

  • It is already the screen BUILD. Here is the link of my registration screen code (I have the same problem on several screens). https://drive.google.com/file/d/1idL_-mHTcVAddCB0Hm22h9XlaiVl_xEK/view Screenshot logcat: https://drive.google.com/file/1viodDTOJ89BqiHpkUsp32bHbUyQD2i5z/view?usp=sharing Where is highlighted in red appears when I click on the TextField with the keyboard still hidden. Orange appears when I click on TextField with the keyboard already visible. Marked white is just the name of the app package. On the Login: Navigator.of(context).pushNamed(CadastroPage.tag);

1 answer

0


I managed to solve this problem. The problem is not in the code but in the AndroidManifest.xml. I just added android:windowSoftInputMode="adjustResize" on the tag activity

Browser other questions tagged input listview flutter layout keyboard

You are not signed in. Login or sign up in order to post.