флаттер - как получить такие эффекты, как css flex display

Question

в html css, у #gone есть display: none; браузер будет иметь другое отображение

    .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>

С дисплеем: нет

Без дисплея: нет

В флаттере, используя Visibility with visible: false, вы получите эффект, подобный Без дисплея: нет

    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),
        ),
      ],
    );

Как получить эффекты вроде С дисплеем: нет в флаттере? Английский плохой: - (

Answer 1

Вы должны удалить свойство mainAxisAlignment из вашего Row и обработать интервал самостоятельно:

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),
    ),
  ],
);

Answer 2

Вместо того, чтобы просто визуально скрыть виджет, вы можете показать пустой контейнер размером 0, например:

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),
        ),
      ],
    );

В этом примере, если переменная "hide" имеет значение true, он будет показывать пустой контейнер, а когда переменная "hide" - false, он будет отображать ваш невидимый текст.