android - 如何为小部件 Flutter 添加垂直间距

Question

我这里有一段代码，它构成了登录和注册屏幕的主体。一切都在我想要的位置，但我想把它们隔开一点。两个输入字段，标题、副标题、按钮和文本按钮在垂直方向上靠得太近。我尝试使用 mainaxisalignment.spacebetween 但我收到一个约束错误，然后我在屏幕上的所有内容都消失了，除了背景。

注册和登录屏幕使用的正文：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomLeft,
            colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
          ),
          image: DecorationImage(
            image: AssetImage("lib/assets/images/register.png"),
            alignment: Alignment.topCenter,
          ),
        ),
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/assets/images/bottomleft.png'),
                  alignment: Alignment.bottomLeft,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/assets/images/toptop.png'),
                  alignment: Alignment.topRight,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('lib/assets/images/topbig.png'),
                    alignment: Alignment.topCenter,
                    repeat: ImageRepeat.repeat),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('lib/assets/images/top.png'),
                    alignment: Alignment.topCenter,
                    repeat: ImageRepeat.repeatX),
              ),
            ),
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
              child: ListView(
                children: [
                  if (onBackPressed == null) verticalSpaceLarge,
                  if (onBackPressed != null) verticalSpaceRegular,
                  if (onBackPressed != null)
                    IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: onBackPressed,
                      alignment: Alignment.centerLeft,
                      icon: Icon(
                        Icons.arrow_back_ios,
                        color: Colors.black,
                      ),
                    ),
                  Center(
                    child: Text(
                      title!,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.0,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Montserrat',
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      child: Center(
                        child: Text(
                          subtitle!,
                          style: ktsMediumGreyBodyText,
                        ),
                      ),
                    ),
                  ),
                  form!,
                  if (onForgotPassword != null)
                    Align(
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        onTap: onForgotPassword,
                        child: Center(
                          child: Text(
                            'Forgot Password?',
                            style: ktsMediumGreyBodyText.copyWith(),
                          ),
                        ),
                      ),
                    ),
                  if (validationMessage != null)
                    Center(
                      child: Text(
                        validationMessage!,
                        style: TextStyle(
                            color: Colors.red, fontSize: kBodyTextSize),
                      ),
                    ),
                  if (validationMessage != null) verticalSpaceRegular,
                  GestureDetector(
                    onTap: onMainButtonTapped,
                    child: Container(
                      width: double.infinity,
                      height: 50,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: kcPrimaryColor,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: busy!
                          ? CircularProgressIndicator(
                              valueColor: AlwaysStoppedAnimation(Colors.white),
                            )
                          : Text(
                              mainButtonTitle!,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 14),
                            ),
                    ),
                  ),
                  if (onCreateAccountTapped != null)
                    GestureDetector(
                      onTap: onCreateAccountTapped,
                      child: Center(
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "Don\'t have an account?",
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  "SIGN UP",
                                  style: TextStyle(color: kcPrimaryColor),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "OR SIGN IN WITH",
                                  style: TextStyle(color: kcMediumGreyColor),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  if (showTermsText!)
                    Center(
                      child: Text(
                        "By signing up you agree to our terms, conditions and privacy policy",
                        style: ktsMediumGreyBodyText,
                        textAlign: TextAlign.center,
                      ),
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

登录屏幕：

Widget build(BuildContext context) {
    return ViewModelBuilder<LoginScreenModel>.reactive(
      builder: (context, model, child) => Scaffold(
        body: AuthenticationLayout(
          busy: model.isBusy,
          onCreateAccountTapped: () {},
          //validationMessage: model.validationMessage,
          title: 'SIGN IN',
          subtitle: 'please fill the form below',
          mainButtonTitle: 'SIGN IN',
          form: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  hintText: 'Username',
                  hintStyle: TextStyle(color: Colors.white),
                  prefixIcon: const Icon(
                    Icons.person,
                    color: Colors.white,
                  ),
                ),
              ),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Password',
                  hintStyle: TextStyle(color: Colors.white),
                  prefixIcon: const Icon(
                    Icons.lock,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
          onForgotPassword: () {},
        ),
      ),
      viewModelBuilder: () => LoginScreenModel(),
    );
  }
}

标签： androidiosflutterdart

Answer 1

     Column(
      children: <Widget>[
      FirstWidget(),
      SizedBox(height: 100),
       SecondWidget(),
      ],
     ),