Flutter 在 Textfield 之间的空格中苦苦挣扎

Question

我无法删除 TextField 之间的空格。在我的 TextField 之上添加 Lottie.asset 解决了问题，但用户需要滚动才能看到整个页面。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:lottie/lottie.dart';
import 'package:email_validator/email_validator.dart';

final _emailController = TextEditingController();
bool _isValid = false;

class SignUpPage extends StatelessWidget {
  const SignUpPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: const Icon(
            Icons.arrow_back_ios,
            color: Colors.black,
          ),
        ),
        title: const Text(
          'Inscription',
          style: TextStyle(
            fontSize: 16,
            color: Colors.black,
          ),
          textAlign: TextAlign.center,
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          height: MediaQuery.of(context).size.height - 50,
          width: double.infinity,
          child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround, //ERROR WAS HERE
            children: <Widget>[
              const Text(
                  "Créez un compte gratuitement \net commencez à explorer les \nstudios partenaires.",
                  style: TextStyle(
                      fontSize: 16, color: Color.fromARGB(255, 0, 0, 0)),
                  textAlign: TextAlign.center),
              const TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Nom',
                ),
              ),
              TextField(
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Email',
                ),
              ),
              const TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Mot de passe',
                ),
              ),
              const TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Confirmer le mot de passe',
                ),
              ),
              TextButton(
                child: const Text(
                  'Valider',
                  style: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
                ),
                onPressed: () {
                  _isValid = EmailValidator.validate(_emailController.text);
                  if (_isValid) {
                    Fluttertoast.showToast(
                        msg: "Email ",
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.TOP,
                        timeInSecForIosWeb: 1,
                        fontSize: 16.0);
                  } else if (_emailController.text.isEmpty) {
                    Fluttertoast.showToast(
                        msg: 'Entrez un email',
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.TOP,
                        timeInSecForIosWeb: 1,
                        fontSize: 16.0);
                  } else {
                    Fluttertoast.showToast(
                        msg: 'Veuillez fournir un email valide',
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.TOP,
                        timeInSecForIosWeb: 1,
                        fontSize: 16.0);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

看起来如何：

Answer 1

从 Column 小部件中删除此行并在每个 TextField 之间添加 SizedBox 以控制小部件之间的空格

 mainAxisAlignment: MainAxisAlignment.spaceAround,

Flutter 在 Textfield 之间的空格中苦苦挣扎

Flutter Struggling with spaces between Textfield

dart

flutter

flutter-layout

flutter-animation