如何使表单在列内滚动

Question

我将我的屏幕分成三个 Expanded 小部件，中间一个是一行两个 TextFormField，当我运行应用程序并尝试写一些文本时，输入字段不显示： Here is a picture explaining the situation, the input field is not showing.

所以我想让它可以滚动，我使用了 SingleChildScrollview 但它不起作用（或者我没有在正确的地方使用它）所以这是我的代码：

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",
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

它对我有用，使用此代码作为您的文本字段填充：

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

这是一个带有完整示例的备选方案：

如何使表单在列内滚动

How to make a Form scrollable inside Column

forms

flutter

singlechildscrollview

如何使表单在​​列内滚动

How to make a Form scrollable inside Column

forms

flutter

singlechildscrollview

如何使表单在列内滚动