RenderFlex переполнен - ​​флаттер

Question

Привет, я новичок во флаттере и пытаюсь кодировать свое первое приложение, у меня проблема с переполненными пикселями Flutter (Dart) RenderFlex.

Я пробовал несколько разных способов достижения этого, все еще используя a ListView.Builder, но ни один из них не работал. Что может быть лучше для завершения этого?

мои коды здесь, заранее спасибо за ваше руководство

class Register extends StatefulWidget {

final Function toggleView;
Register({ this.toggleView });

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

class _RegisterState extends State<Register> {

final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
String error = '';
bool loading = false;

// text field state
String email = '';
String password = '';
String confirmpwd ='';

@override
Widget build(BuildContext context) {
  return loading ? Loading() : Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
    backgroundColor: Colors.blue[400],
    elevation: 0.0,
    title: Text('Sign up to Tenant App'),
    actions: <Widget>[
      FlatButton.icon(
        icon: Icon(Icons.person),
        label: Text('Sign In'),
        onPressed: () => widget.toggleView(),
      ),
    ],
  ),
  body: Container(
    padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
    child: Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'email'),
            validator: (val) => val.isEmpty ? 'Enter an email' : null,
            onChanged: (val) {
              setState(() => email = val);
            },
          ),
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'password'),
            obscureText: true,
            validator: (val) => val.length < 6 ? 'Enter a password 6+ chars long' : null,
            onChanged: (val) {
              setState(() => password = val);
            },
          ),
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'password'),
            obscureText: true,
            validator: (val) => val != password ? 'Password \'t match' : null,
          ),
          SizedBox(height: 20.0),
          RaisedButton(
            color: Colors.pink[400],
            child: Text(
              'Register',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () async {
              if(_formKey.currentState.validate()){
                setState(() => loading = true);
                dynamic result = await _auth.registerWithEmailAndPassword(email, password);
                if(result == null) {
                  setState(() {
                    loading = false;
                    error = 'Please supply a valid email';
                  });
                }
              }
            }
          ),
          SizedBox(height: 12.0),
          Text(
            error,
            style: TextStyle(color: Colors.red, fontSize: 14.0),
          )
         ],
       ),
     ),
   ),
 );
}
}

Answer 1

Сначала столбец получает неограниченную высоту. Это означает, что он не знает, насколько велика его основная ось, и не знает, где визуализировать его дочерние элементы.

Если вы не хотите устанавливать размер для родительского контейнера, Вы можете использовать свойство mainAxisSize : MainAxisSize.min.

Это свойство заставляет ваш столбец занимать минимально необходимое пространство, поэтому не имеет значения, какие ограничения вы передаете заранее.

Во-вторых, поскольку это Form вам нужно будет обернуть ваш контейнер в SingleChildScrollView , чтобы клавиатура не скрывала ваш TextFormField

Надеюсь, это решит ваш вопрос!

Answer 2

Вы должны просто обернуть свой столбец с помощью SingleChildScrollView, поэтому, когда появится клавиатура, вы также можете прокрутить.

 child: Form(
      key: _formKey,
      child: SingleChildScrollView( //added widget
          child: Column(
              children: <Widget>[
                  SizedBox(height: 20.0),