Is there a way to remove a container from a row if the container is empty, so that it isn't bei-CodePudding

In my example, I have a row with three columns. These columns are built by taking values from a json file and showing that value on the screen. I have six cards built using this same method of construction.

Issue I am running into is on one of my cards, I only have two values. The third value is null, but I cannot assign the column to null in my ternary operator. I have to assign it to a widget like Container() or Visibility(). Is there a way to restructure my if/else statement so if third value is null, container won't even be built?

Code Example:

Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Column(
                        children: [
                          Container(
                            height:
                            MediaQuery.of(context).size.height * 0.10,
                            width:
                            MediaQuery.of(context).size.width * 0.20,
                            decoration: BoxDecoration(
                                color: headfoot_color,
                                shape: BoxShape.circle),
                            child: Center(
                              child: Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.center,
                                mainAxisAlignment:
                                MainAxisAlignment.center,
                                children: [
                                  Container(
                                      child: gettextvalue_first(
                                        context,
                                        item,
                                        item['title'],
                                        '1',
                                      )),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 2,
                          ),
                          Container(
                              margin: EdgeInsets.only(top: 0.0),
                              child: Text(item['subtitle_one'],
                                  maxLines: 2,
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: headfoot_color,
                                      fontSize: 10.0,
                                      fontWeight: FontWeight.bold)))
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height:
                            MediaQuery.of(context).size.height * 0.10,
                            width:
                            MediaQuery.of(context).size.width * 0.20,
                            decoration: BoxDecoration(
                                color: headfoot_color,
                                shape: BoxShape.circle),
                            child: Center(
                              child: Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.center,
                                mainAxisAlignment:
                                MainAxisAlignment.center,
                                children: [
                                  Center(
                                      child: gettextvalue_first(context,
                                          item, item['title'], '2')),
                                ],
                              ),
                            ),
                          ),
                          Container(
                              margin: EdgeInsets.only(top: 0.0),
                              child: Text(item['subtitle_two'],
                                  maxLines: 2,
                                  style: TextStyle(
                                      color: headfoot_color,
                                      fontSize: 10.0,
                                      fontWeight: FontWeight.bold)))
                        ],
                      ),
                      item['subtitle_three'] != '' // Error is occurring here
                          ? Column(
                        children: [
                          Container(
                            height:
                            MediaQuery.of(context).size.height *
                                0.10,
                            width:
                            MediaQuery.of(context).size.width *
                                0.20,
                            decoration: BoxDecoration(
                                color: headfoot_color,
                                shape:
                                BoxShape.circle),
                            child: Center(
                              child: Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.center,
                                mainAxisAlignment:
                                MainAxisAlignment.center,
                                children: [
                                  Container(
                                      child: gettextvalue_first(
                                          context,
                                          item,
                                          item['title'],
                                          '3')),
                                ],
                              ),
                            ),
                          ),
                          Container(
                              margin: EdgeInsets.only(top: 0.0),
                              child: Text(item['subtitle_three'],
                                  style: TextStyle(
                                      color: headfoot_color,
                                      fontSize: 10.0,
                                      fontWeight: FontWeight.bold)))
                        ],
                      )
                          : Container(),
                    ],
                  ),

Picture with 2 elements (spaced unevenly)

Picture with 3 elements

CodePudding user response：

Don't use ternary operator, use if:

 if (true) showMeTheWidget(),

So at you:

 if (item['subtitle_three'] != '') Column(...),

CodePudding user response：

The issue is it is rendering on null case not empty.

It will be

 item['subtitle_three'] != null?

Also, you can include empty string and null case both like

item['subtitle_three'] != null &&
        item['subtitle_three']!.isNotEmpty  
    ? Column( // on having value

Lastly you need to provide string on Text widget, it doesn't accept null value but reading map can provide null value, for this use ! only when you are done with null check else provide default value.

Text(item['subtitle_three'] ?? "null",)