Flutter 在显示/隐藏小部件上显示错误答案

【问题标题】：Flutter showing error on show/hide widgetFlutter 在显示/隐藏小部件上显示错误
【发布时间】：2020-10-17 23:35:33
【问题描述】：

Flutter 我只需要在按下按钮时隐藏我的组件，因此我设置了布尔值并使用 if 条件，但问题是它显示错误列子项不得包含空值。

这是我的代码

 Widget build(BuildContext context) {
    var first = true;
    var second = false;
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "SIGNUP",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: size.height * 0.03),
            SvgPicture.asset(
              "assets/icons/signup.svg",
              height: size.height * 0.35,
            ),
            first ? RoundedInputField(
              hintText: "Your Name",
              icon: Icons.person,
              onChanged: (value) {},
            ) : null ,
            first ? RoundedInputField(
              hintText: "Your Email",
              icon: Icons.mail,
              onChanged: (value) {
                print(value);
              },
            ) : null ,

            first ? RoundedPasswordField(
              onChanged: (value) {},
            ) : null ,

            second ? RoundedInputField(
              hintText: "Your Number",
              icon: Icons.phone,
              onChanged: (value) {
                print(value);
              },
            ) : null ,

            first ? RoundedButton(
              text: "NEXT",
              press: () {
                first = false;
                second = true;
              },
            ) : null ,
            second ? RoundedButton(
              text: "REGISTER",
              press: () {

              },
            ) : null ,
            SizedBox(height: size.height * 0.03),
            AlreadyHaveAnAccountCheck(
              login: false,
              press: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return LoginScreen();
                    },
                  ),
                );
              },
            ),

          ],
        ),
      ),
    );
  }
}

我只是在点击时隐藏我的输入小部件，点击后需要显示其他输入和按钮。但是得到错误列子级不能包含任何空值

【问题讨论】：

标签： flutter

【解决方案1】：

使用SizedBox() 或空的Container() 代替null

Widget build(BuildContext context) {
    var first = true;
    var second = false;
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "SIGNUP",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: size.height * 0.03),
            SvgPicture.asset(
              "assets/icons/signup.svg",
              height: size.height * 0.35,
            ),
            first ? RoundedInputField(
              hintText: "Your Name",
              icon: Icons.person,
              onChanged: (value) {},
            ) : SizedBox() ,
            first ? RoundedInputField(
              hintText: "Your Email",
              icon: Icons.mail,
              onChanged: (value) {
                print(value);
              },
            ) : SizedBox() ,

            first ? RoundedPasswordField(
              onChanged: (value) {},
            ) : SizedBox() ,

            second ? RoundedInputField(
              hintText: "Your Number",
              icon: Icons.phone,
              onChanged: (value) {
                print(value);
              },
            ) : SizedBox() ,

            first ? RoundedButton(
              text: "NEXT",
              press: () {
                first = false;
                second = true;
              },
            ) : SizedBox() ,
            second ? RoundedButton(
              text: "REGISTER",
              press: () {

              },
            ) : SizedBox() ,
            SizedBox(height: size.height * 0.03),
            AlreadyHaveAnAccountCheck(
              login: false,
              press: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return LoginScreen();
                    },
                  ),
                );
              },
            ),

          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

如果第一个和第二个变量为空，则需要返回 Container() 列小部件不知道如何呈现 null 如果它为空，您必须告诉 Column 小部件呈现空内容。

例如：

first ? RoundedButton(
              text: "NEXT",
              press: () {
                first = false;
                second = true;
              },
            ) : Container(),
            second ? RoundedButton(
              text: "REGISTER",
              press: () {

              },
            ) : Container(),

【讨论】：

【解决方案3】：

Flutter 不接受 null 值作为 Widget。如果不想在另一个小部件中显示任何内容，您必须至少提供一个空的小部件。通常你可以使用Container(width: 0, height:0) 甚至Text('')。

【讨论】：

【解决方案4】：

所有答案都是有效的，但是您可以使用Visibility 来显示或隐藏一个小部件，它看起来像这样

Visibility(
 visible: YOUR_BOOLEAN_VALUE,
 child: YOUR_WIDGET,
)

【讨论】：