Row's children must not contain any null values, but a null value was found at index 2

Question

I have the below screen image

I have a Apple login in the ui so I need to use this Apple login in IOS only, so I create the below code:

Platform.isIOS
                                ? IPetCustomCircleBtn(
                                    constraintWidth:
                                        constraints.maxWidth * 0.13,
                                    constraintHeight:
                                        constraints.maxHeight * 0.13,
                                    iPetShapeBorder: CircleBorder(
                                      side: BorderSide(
                                        width: 2,
                                        color: Colors.black,
                                        style: BorderStyle.solid,
                                      ),
                                    ),
                                    iPetChildCard: IPetCustomIcon(
                                      ipFontIc: FontAwesomeIcons.apple,
                                      colour: Colors.black,
                                    ),
                                    iPetIconColor: Colors.black,
                                    iPetFillColor: Colors.white,
                                  )
                                : null

I found this error:

Row's children must not contain any null values, but a null value was found at index 2

I tried to handle the problem by add an empty widget as the below code

Platform.isIOS
                                ? IPetCustomCircleBtn(
                                    constraintWidth:
                                        constraints.maxWidth * 0.13,
                                    constraintHeight:
                                        constraints.maxHeight * 0.13,
                                    iPetShapeBorder: CircleBorder(
                                      side: BorderSide(
                                        width: 2,
                                        color: Colors.black,
                                        style: BorderStyle.solid,
                                      ),
                                    ),
                                    iPetChildCard: IPetCustomIcon(
                                      ipFontIc: FontAwesomeIcons.apple,
                                      colour: Colors.black,
                                    ),
                                    iPetIconColor: Colors.black,
                                    iPetFillColor: Colors.white,
                                  )
                                : SizedBox()

but the problem the the look is not good as I need the rest of the buttons to be in the center of the row and this is my Full Row:

Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            IPetCustomCircleBtn(
                              constraintWidth: constraints.maxWidth * 0.13,
                              constraintHeight: constraints.maxHeight * 0.13,
                              iPetShapeBorder: CircleBorder(),
                              iPetChildCard: IPetCustomIcon(
                                ipFontIc: FontAwesomeIcons.google,
                                colour: Colors.white,
                              ),
                              iPetIconColor: Colors.white,
                              iPetFillColor: Colors.red,
                            ),
                            IPetCustomCircleBtn(
                              constraintWidth: constraints.maxWidth * 0.13,
                              constraintHeight: constraints.maxHeight * 0.13,
                              iPetShapeBorder: CircleBorder(),
                              iPetChildCard: IPetCustomIcon(
                                ipFontIc: FontAwesomeIcons.facebook,
                                colour: Colors.white,
                              ),
                              iPetIconColor: AppConst.kPrimaryWhiteBgColor,
                              iPetFillColor: AppConst.kBlueColor,
                            ),
                            Platform.isIOS
                                ? IPetCustomCircleBtn(
                                    constraintWidth:
                                        constraints.maxWidth * 0.13,
                                    constraintHeight:
                                        constraints.maxHeight * 0.13,
                                    iPetShapeBorder: CircleBorder(
                                      side: BorderSide(
                                        width: 2,
                                        color: Colors.black,
                                        style: BorderStyle.solid,
                                      ),
                                    ),
                                    iPetChildCard: IPetCustomIcon(
                                      ipFontIc: FontAwesomeIcons.apple,
                                      colour: Colors.black,
                                    ),
                                    iPetIconColor: Colors.black,
                                    iPetFillColor: Colors.white,
                                  )
                                : SizedBox()
                          ],
                        ),

So there's any nice trick for this case:D..

I hope this could be clear enough..

Answer 1

I recomend you build two rows, 1 with apple login and other without, then call Platform.isIOS? rowWithIos: rowWithoutIos Platform.isIOS? rowWithIos: rowWithoutIos and if you build widgets for all login types you reduce the repeat code in this two rows.

Answer 2

There are two ways I can think of:

1. Try adding a height & width to your sizedBox

    SizedBox(height: 0, width: 0,)

2. Experiment with

    Row( mainAxisAlignment: Platform.isIOS? MainAxisAlignment.spaceAround: MainAxisAlignment.spaceBetween....

You can replace mainAxisAlignment as your needs

Answer 3

I found the better solution for this just make as the below code:

if (Platform.isIOS)
                              IPetCustomCircleBtn(
                                constraintWidth: constraints.maxWidth * 0.13,
                                constraintHeight: constraints.maxHeight * 0.13,
                                iPetShapeBorder: CircleBorder(
                                  side: BorderSide(
                                    width: 2,
                                    color: Colors.black,
                                    style: BorderStyle.solid,
                                  ),
                                ),
                                iPetChildCard: IPetCustomIcon(
                                  ipFontIc: FontAwesomeIcons.apple,
                                  colour: Colors.black,
                                ),
                                iPetIconColor: Colors.black,
                                iPetFillColor: Colors.white,
                              ),