When typing on textfield, keyboard is block the view on flutter

Question

I have a textbox on the bottom of the screen and when I tried clicking it, it gets block by the keyboard.

Before pressing the textfield

After pressing the textfield

Here is the Code

import 'package:flutter/material.dart';
import 'package:survey/content/7scontent.dart';
import 'package:survey/content/surveycon.dart';
import 'package:survey/widgets/animations.dart';
import '../widgets/buttonstyle.dart';
import 'package:survey/widgets/widgetlist.dart';

class sevens extends StatelessWidget {
  final listoftitle = [
    "I & II Sweep & Standardize", "III Santize", "IV Save", "V Safety and VI Security", "VII Self Discipline",
  ];

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomPadding: true,
        resizeToAvoidBottomInset: false,
        body: Center(
            child: Padding(
              padding: EdgeInsets.all(5),
              child: Column(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(height: 30),
                      Center(
                        child: SizedBox(
                          height: 50,
                          width: 300,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Image.asset(imgtitle1,width: 100,height: 70,),
                              SizedBox(width: 50,),
                              Image.asset(imgtitle2,width: 100,height: 70,),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 30,
                      ),
                      Text(
                        'COMMITMENT TO CARE (INTENSIFIED 7S)',
                        maxLines: 2,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            color: Colors.orangeAccent,
                            fontWeight: FontWeight.bold,
                            fontSize: 25.0),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 2.0),
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.width/ 1.2,
                        child: ListView.builder(
                          itemCount: listoftitle.length,
                          physics: NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index){
                            return ListTile(
                              title: Text(listoftitle[index],textAlign: TextAlign.center,),
                            );
                          },
                        ),
                      ),
                      Container(
                        width: 300,
                        child: TextFormField(
                          decoration: InputDecoration(
                              labelText: 'ENTER YOUR EMPLOYEE ID HERE!',
                            border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Center(
                        child: InkWell(
                          onTap: (){
                            Navigator.push(context, SlideRightRoute(page: sevenscontent()));
                          },
                          child: roundedRectButton("PROCEED", signInGradients),),
                      )
                    ],
                  ),
                ],
              ),
            )
        ),
      ),
    );
  }
}

Anyone who can help please? I tried experimenting a little bit with SingleScrollView but no success.

Classes should start with a capital letter `Seven` – jamesblasco Feb 27 '20 at 23:23 — jamesblasco, Feb 27 '20 at 23:23
Wrap your center widget in SingleChildScrollView widget. – Amit Jangid Feb 28 '20 at 07:23 — Amit Jangid, Feb 28 '20 at 07:23

score 1 · Answer 1 · answered Feb 27 '20 at 23:30

SingleScrollView or any scroll views are a good solution for this problem.

First we want the Scaffold to resize when the keyboard appears so we don't hide anything behind. For that you should remove:

resizeToAvoidBottomPadding: true, (Deprecated, not use) resizeToAvoidBottomInset: false, (default: true)

Then add a SingleScrollView between Center and Padding and that should do the trick

score 0 · Answer 2 · answered Feb 27 '20 at 23:27

0

I'd suggest giving this a look. This plugin is also useful for checking if keyboard is open or not.

answered Feb 27 '20 at 23:27

whla

739
1
12
26

score 0 · Answer 3 · answered Nov 04 '20 at 08:17

It's a little late, but hope this can still help you:

Scaffold(
  body: LayoutBuilder(
    builder: (context, constraint) {
      child: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(minHeight: constraint.maxHeight),
          child: IntrinsicHeight(
            child: Column(
              // your content (Text, Container, TextField, ...)
            )
          )
        )
      )
    }
  )
)

With this, when you focus on the TextField and the keyboard is showed, the TextField will be scrolled to visible position above the keyboard.

When typing on textfield, keyboard is block the view on flutter

3 Answers3