Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - keyboard over TextFormField

I have a some kind of login page in an app. However, when I focus to TextFormField, keyboard overlay the fields and nothing is seen. As Android dev,

I normally fix it by adding android:windowSoftInputMode="adjustResize|stateHidden to manifest.

How to solve it in Flutter?

CODE:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        children: <Widget>[
          Center(child: Image(image: AssetImage("images/uhk.jpg"))),
          Form(
            key: formKey,
            child: Padding(
              padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
              child: Column(
                children: <Widget>[
                  TextFormField(
                      decoration:
                          new InputDecoration(labelText: "Přihlašovací jméno"),
                      maxLines: 1,
                      keyboardType: TextInputType.emailAddress,
                      onSaved: (String value) => ""),
                  TextFormField(
                      decoration: new InputDecoration(labelText: "Heslo"),
                      maxLines: 1,
                      obscureText: true,
                      onSaved: (String value) => ""),
                ],
              ),
            ),
          ),
          Padding(
              padding: EdgeInsets.only(top: 50.0, left: 30.0, right: 30.0),
              child: RaisedButton(
                  child: Text("Přihlásit se",
                      style: TextStyle(
                          fontSize: 16.0, color: Colors.white, height: 3.0)),
                  color: Colors.lightBlue,
                  onPressed: () => "")),
          Padding(
              padding: EdgeInsets.only(
                top: 20.0,
              ),
              child: Center(
                  child: FlatButton(
                  onPressed: () => "",
                  child: Text("Vytvořit účet",
                    style: TextStyle(fontSize: 14.0, color: Colors.grey)),
              ))),
        ],
      ),
}
like image 998
Stepan Avatar asked Mar 10 '18 08:03

Stepan


People also ask

How to shift the focus between multiple textformfields in flutter?

In Flutter, the user can shift the focus between multiple TextFormFields inside a Form by using the soft keyboard (not by tapping the TextFormFields). This article shows you 2 ways to do so. 1. FocusScope.of (context).nextFocus ()

What is textfield widget in flutter?

The TextField widget is a very important widget in flutter which lets users to give inputs. The input types the user gives can be varied. For example, if you are entering a phone number then you only wants to see numbers in your keyboard.

How to prevent soft keyboard from covering textfield while typing?

To prevent the soft keyboard from covering your TextField while the user is typing, you can wrap your main widget with SingleChildScrollView. In case you place some text fields inside a bottom sheet and want to avoid the soft keyboard overlapping the text fields, see this example: Modal Bottom Sheet with TextFields inside.

How to take input from the user in flutter?

TextFormField widget is used to take input from the user in flutter. This is a simple and easy user input widget in flutter. We can perform any operation on that user input data using TextFormField. You can use that user input, can send and show that input.


1 Answers

 //Add this line "resizeToAvoidBottomInset: true," to your Scaffold and put your main container in ScrollView.

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       resizeToAvoidBottomInset: true,
       key: _scaffoldKey,
       backgroundColor: Colors.white,
       body: SingleChildScrollView(    
          child: Container()
   ),
 );
}
like image 183
ferox147 Avatar answered Oct 07 '22 15:10

ferox147