flutter - how to get effects like css flex display none

user_3337364 0
Viewed 1321

in html css, whether #gone have display: none; browser will have different display 

    .main {
        display: flex;
        justify-content:space-between;
    }
    #gone {
        visibility: hidden;
        /* display: none; */
    }
    <div class="main">
        <div>text 1</div>
        <div id="gone">text 1</div>
        <div>text 1</div>
        <div>text 1</div>
    </div>

With display:none

Without display:none

In flutter, using Visibility with visible: false will get effect like Without display:none 

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Visibility(
          visible: false,
          child: Text("test1",
            style: TextStyle(fontSize: 10),
          ),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
      ],
    );

How to get effects like With display:none in flutter? English is poor :-(

flexbox flutter
2 Answers

You'd have to remove the mainAxisAlignment property from your Row and handle the spacing yourself:

return Row(
  children: <Widget>[
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
    Spacer(),
    Visibility(
      visible: false,
      child: Flexible(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              "test1",
              style: TextStyle(fontSize: 10),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
    Spacer(),
    Text(
      "test1",
      style: TextStyle(fontSize: 10),
    ),
  ],
);
user_56086610

Instead of just visually hiding the widget, you can show an empty container with size of 0 like this:

bool hide = true;
return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        hide==true?Container():Visibility(
          visible: false,
          child: Text("test1",
            style: TextStyle(fontSize: 10),
          ),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
        Text("test1",
          style: TextStyle(fontSize: 10),
        ),
      ],
    );

In this example, if the variable "hide" is true, it will show an empty container, and when the variable "hide" is false, it will show your invisible text.

user_54589130
Related