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
>Solution :
Don’t use ternary operator, use if:
if (true) showMeTheWidget(),
So at you:
if (item['subtitle_three'] != '') Column(...),