Flutter/Dart Scrolling textfield above keyboard

Question

I am using textfields, how can I make it so it scrolls up a bit when entering email and password?

Here is a preview of the code

https://pastebin.com/4EngQDV5

blank

Answer 1

There is the solution which gave the expected outcomes in my case. TextField has a property calling scrollPadding. scrollPadding: EdgeInsets.only(bottom:40), By default it is set to EdgeInsets.all(20.0)

You can give a fixed value or use viewInsets. Hope this will help you too. Please find more information on this here.

Answer 2

Ok first, the code you pasted is incomplete, so I'm guessing you are having those textfields insides a Column. You have two options:

1st) In your Scaffold you can set this property to false like resizeToAvoidBottomInset: false,
2o) You can use a SingleChildScrollView that will move up your textfield when the keyboard appears eg.:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyLoginPage(title: 'Flutter Demo Home Page'),
        ),
      ),
    );
  }
}

class MyLoginPage extends StatefulWidget {
  MyLoginPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyLoginPageState createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  String _email;
  String _password;
  TextStyle style = TextStyle(fontSize: 25.0);

  @override
  Widget build(BuildContext context) {
    final emailField = TextField(
      obscureText: false,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.solidEnvelope),
          hintText: "Email",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(97.0))),
      onChanged: (value) {
        setState(() {
          _email = value;
        });
      },
    );
    final passwordField = TextField(
      obscureText: true,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.key),
          hintText: "Password",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(25.0))),
      onChanged: (value) {
        setState(() {
          _password = value;
        });
      },
    );

    return Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.yellow[300],
            height: 300.0,
          ),
          emailField,
          passwordField
        ],
      ),
    );
  }
}

Just copy and paste the code, and see if it's what you want.
Hope this help.

Answer 3

I found a nice solution.
I have added to the TextFormField the scrollPadding property as follows

child: TextFormField(
        scrollPadding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom + fontSize*4),
        validator: _validator,
        cursorColor: cTextRegularColor,
        controller: _controller,
        obscureText: _obscure,
        obscuringCharacter: '*',
        textAlign: _textAlign,
        keyboardType: _input,
        style: const TextStyle(
          color: cTextRegularColor,
          fontSize: fontSize,
        ),

By setting the bottomInset, in my forms, whenever the user taps on a TextField in the form, it does not only scroll down, it also shows the next TextField in the form, so the user does not need to scroll after s/he finished filling the current field.

Obviously, when the user will tap the next field in the form, the screen will scroll again, and again, show the next field,

I figured out that in long forms (more than 5 fields), the user does not need to scroll at all.

Answer 4

I using flutter 2.2.0 and when I add SingleChildScrollView it auto scroll up if keyboard show and overlap the textfield. resizeToAvoidBottomInset default true allow this function (tested on iOS). if you want the Textfield have more space with keyboard let try answer of Varsik Nikoyan

https://stackoverflow.com/a/67088995/12970517

hope can help.

Answer 5

I actually had the same problem. Figured that you need to wrap the TextForms into a ListView to make it work.

import 'package:flutter/material.dart';

class ScrollView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ScrollViewState();
}
}

class _ScrollViewState extends State<ScrollView>{
@override
Widget build(BuildContext context) {
return Scaffold(
    backgroundColor: userInputBackgroundColor,
    body: ListView(
              padding: EdgeInsets.all(0.0),
              shrinkWrap: true,
              children: <Widget>[
               TextForm(),
               TextForm()
              ]
          ),
        )
    }
}

Answer 6

It is new code. I think this one help you. Add this code after the passwordField declaration.

 return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        emailField,
        SizedBox(
          height: 10,
        ),
        passwordField,
      ],
    ),
  ),
);