Flutter showing error on show/hide widget

Question

Flutter i just need to hide my component on button pressed so i have set the boolean value and use if condition but problem is its showing error Columns children must not contain null value.

Here is my code

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

          ],
        ),
      ),
    );
  }
}

I am just hiding my input widget on click and after click need to show other input and button. But getting error Columns children must not contain any null values

Answer 1

Use a SizedBox() or an empty Container() instead of 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();
                    },
                  ),
                );
              },
            ),

          ],
        ),
      ),
    );
  }
}

Answer 2

You need to return Container() if the first & second variable is null Column widget does not know how to render null you must tell Column widget to render empty content if it's null.

Eg:

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

              },
            ) : Container(),

Answer 3

Flutter does not accepts null values as a Widget. You must provide at least an empty Widget if don't want to show nothing inside another widget. Usually you can use Container(width: 0, height:0) or even Text('') .

Answer 4

All the answers are valid, you can however use Visibility to show or hide a widget, it looks like this

Visibility(
 visible: YOUR_BOOLEAN_VALUE,
 child: YOUR_WIDGET,
)