How to make a Form scrollable inside Column

Question

I have split my screen into three Expanded widgets, the middle one is a Row of two TextFormField, when I run the app and try to write some text, the input field doesnt show: Here is a picture explaining the situation, the input field is not showing.

So I wanted to make it scrollable, I used SingleChildScrollview but it didnt work ( or I did not used it in the right place ) so here is my code:

import 'package:flutter/material.dart';
import 'package:tabibi/components/default_button.dart';
import 'package:tabibi/size_config.dart';

import '../../../constants.dart';
class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  // Logic
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: SizedBox(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal:  getProportionateScreenWidth(20)),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  flex: 1,
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: getProportionateScreenHeight(20)),
                        Text("Se Connecter",
                          textAlign: TextAlign.right,
                          style: TextStyle(fontSize: getProportionateScreenWidth(20),
                            color: kTextColor,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: getProportionateScreenHeight(10)),
                        //contenu
                        Text("Enter votre numéro de telephone ci-dessous",textAlign: TextAlign.left,),
                        SizedBox(height: getProportionateScreenHeight(10)),
                        Text("Vous recevrez un SMS avec un code vérification pour vérifier votre numéro",
                          textAlign: TextAlign.left,),
                      ]
                  ),
                ),
                //end expended 1 *************************
                Expanded(
                  flex: 2,
                    child: SigninForm()
                ),

                // end expended 2 **********
                Expanded(
                  flex: 1,
                  child: Container(
                    width: double.infinity,
                    margin: EdgeInsets.only( top:getProportionateScreenHeight(15),
                        bottom: getProportionateScreenHeight(95)),
                    padding: EdgeInsets.only(left:getProportionateScreenHeight(20) ,
                        right:getProportionateScreenHeight(20) ),
                    //padding: ,
                    child: DefaultButton(
                      text: "Suivant",
                      press: (){
                        //Navigator.pushNamed(context, SignInScreen.routeName);
                      },
                    ),
                  ),
                ),

                // end expended 3 *******************
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SigninForm extends StatefulWidget {
  @override
  _SigninFormState createState() => _SigninFormState();
}

class _SigninFormState extends State<SigninForm> {
  @override
  Widget build(BuildContext context) {
    return Form(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(
            width: getProportionateScreenWidth(100),
            child: Flexible(
              child: TextFormField(
                decoration: InputDecoration(
                  icon: Icon(Icons.flag),
                  hintText: "+213",
                ),
              ),
            ),
          ),
          SizedBox(width: getProportionateScreenWidth(10),),

          Flexible(
            child: TextFormField(
              decoration: InputDecoration(
                hintText: "saisir votre numéro",
              ),
            ),
          ),
        ],
      ),
    );
  }
}

In order to understand correctly, what are you expecting ? Do you want the layout to be pushed upward in order to have the SigninForm widget fully vsible above the device's keyboard ? — FDuhen, Mar 29 '21 at 17:22
If i have understood you correctly, yes. I want to see the input field while wrinting in the keyboards, if you have seen the second picture that I have provided, the input field is not fully shown. — Ishak Hari, Mar 29 '21 at 17:35

score 0 · Accepted Answer · answered Mar 29 '21 at 18:53

It works to me, use this code as your textfield padding:

Padding(
             padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom));

Here is an alternative with a full example: Flutter TextFormField hidden by keyboard

How to make a Form scrollable inside Column

1 Answers1