Reputation: 3391

Flutter Form disappears when keyboard shows

I've created a Form with Flutter but when I focus on a field and the keyboard pops up the content disappears.

import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:greencat/greencat.dart';
import 'package:woody_app/Application.dart';
import 'package:woody_app/actions/AuthAction.dart';
import 'package:woody_app/states/AuthState.dart';

class ProfileScreen extends StatefulWidget {
  @override
  State createState() => new ProfileScreenState();
}


class PersonData {
  String name = '';
  String phoneNumber = '';
  String password = '';
}

class ProfileScreenState extends State<ProfileScreen> {
  final Store<AuthState, AuthAction<dynamic>> _store = Application.get().store;
  StreamSubscription<AuthState> _subscriber;

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  PersonData person = new PersonData();

  void showInSnackBar(String value) {
    _scaffoldKey.currentState.showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }

  bool _autovalidate = false;
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  void _handleSubmitted() {
    final FormState form = _formKey.currentState;
    if (!form.validate()) {
      _autovalidate = true;  // Start validating on every change.
      showInSnackBar('Please fix the errors in red before submitting.');
    } else {
      form.save();
      showInSnackBar('${person.name}\'s phone number is ${person.phoneNumber}');
    }
  }

  String _validateName(String value) {
    if (value.isEmpty)
      return 'Name is required.';
    final RegExp nameExp = new RegExp(r'^[A-za-z ]+$');
    if (!nameExp.hasMatch(value))
      return 'Please enter only alphabetical characters.';
    return null;
  }

  @override
  void initState() {
    super.initState();

    _subscriber = _store.stream.listen((AuthState state) {
      setState(() {});
    });
  }


  @override
  void dispose() {
    _subscriber.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(child: new Form(
        key: _formKey,
        autovalidate: _autovalidate,
        child: new ListView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          children: <Widget>[
            new TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.person),
                hintText: 'What do people call you?',
                labelText: 'Name *',
              ),
              onSaved: (String value) {
                person.name = value;
              },
              validator: _validateName,
            ),
            new Container(
              padding: const EdgeInsets.all(20.0),
              alignment: const FractionalOffset(0.5, 0.5),
              child: new FlatButton(
                child: const Text('SUBMIT'),
                onPressed: _handleSubmitted,
              ),
            ),
            new Container(
              padding: const EdgeInsets.only(top: 20.0),
              child: new Text('* indicates required field', style: Theme
                  .of(context)
                  .textTheme
                  .caption),
            ),
          ],
        )
    ));
  }
}

Upvotes: 2

Answers (3)

Luis Fernando Pazmiño

Reputation: 49

Checkout if you are nesting Scaffolds. Each Scaffold adds an extra space between the keyboard and the UI elements. For checking if this is the case, set the Scaffold's property "resizeToAvoidBottomPadding" to false and see the effect

Upvotes: 2

Jaswant Singh

Reputation: 10699

Wrap your widget tree inside a SingleChildScrollView() and whenever you will select a TextField, you can scroll it up to see it.

Upvotes: 1

Raj008

Reputation: 3917

try this below in your Scafold()

resizeToAvoidBottomPadding: false,

Upvotes: 9

Flutter Form disappears when keyboard shows

Answers (3)

Related Questions