Flutter : How can I show no widget with no space taking when there's no link?

Question

description of code : I check if there's a link to youtube then show the icon of youtube else don't show nothing.

the problem : But in my code below, I add an empty container() but this container take a place inside my row.

Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Row(
                          children: [
                            
                            Text("Social Media : "),
                          ],
                        ),
                      ),
                      _youtubelink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(
                                FontAwesome5.youtube,
                                color: red,
                              ),
                              onTap: () {
                                _launchURL(_youtubelink);
                              },
                            ),
                      _istagramlink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(
                                FontAwesome5.instagram,
                                color: red,
                              ),
                              onTap: () {
                                _launchURL(_istagramlink);
                              },
                            ),
                      _facebooklink == null
                          ? Container()
                          : GestureDetector(
                              child:
                                  Icon(FontAwesome5.facebook, color: blue),
                              onTap: () {
                                _launchURL(_facebooklink);
                              },
                            ),
                      _twitterlink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(FontAwesome5.twitter,
                                  color: lightyellow),
                              onTap: () {
                                _launchURL(_twitterlink);
                              },
                            ),
                      Container(), // to let a space between edge and icons
                    ],
                  )

image when there's a link

image when there's a link

How can I show no widget with no space taking when there's no link ? Thanks

Answer 1

If I get your question right, instead of using the ternary operator to either show the link of an empty container, you can simply put the if in your list (collection if):

Basically, your code would become something like this:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      child: Row(
        children: [
          
          Text("Social Media : "),
        ],
      ),
    ),
    if(_youtubelink != null)
          GestureDetector(
            child: Icon(
              FontAwesome5.youtube,
              color: red,
            ),
            onTap: () {
              _launchURL(_youtubelink);
            },
          ),
    if(_istagramlink != null)
          GestureDetector(
            child: Icon(
              FontAwesome5.instagram,
              color: red,
            ),
            onTap: () {
              _launchURL(_istagramlink);
            },
          ),
    if(_facebooklink != null)
          GestureDetector(
            child:
                Icon(FontAwesome5.facebook, color: blue),
            onTap: () {
              _launchURL(_facebooklink);
            },
          ),
    if(_twitterlink != null)
          GestureDetector(
            child: Icon(FontAwesome5.twitter,
                color: lightyellow),
            onTap: () {
              _launchURL(_twitterlink);
            },
          ),
    Container(), // to let a space between edge and icons
  ],
)

You can learn more about this in https://dart.dev/guides/language/language-tour#lists.