Правый виджет полностью виден во флаттере

Question

Я хочу иметь два виджета рядом друг с другом, тогда как правильный виджет всегда полностью виден. В этом случае две иконки не видны полностью.

Это мой подход с исходным кодом, но он не работает с overflow: TextOverflow.ellipsis. Мое намерение виджетов состояло бы в том, что тексты на левой стороне заканчиваются на

...

если они слишком длинные. Как сделать виджет 2 всегда полностью видимым?

new Row(children: <Widget>[
        // ### Widget 1 ###
        new Column(children: <Widget>[
            new Text("A very long strings sassaasasasasasasssss", overflow: TextOverflow.ellipsis),
            new Text("Another very long string skaskajsakaskjsa", overflow: TextOverflow.ellipsis),
        ]),

          // ### Widget 2 ###
          /* should be visible in full size on the right in every situation */
          new Expanded(child:
            new Row(
                children: <Widget>[
                  new Container(
                    child: new IconButton(icon: new Icon(Icons.check, color: Colors.green, size: 35.0), onPressed: () async {
                    }),
                    margin: new EdgeInsets.only(right: 10.0),
                  ),
                  new IconButton(icon: new Icon(Icons.remove, color: Colors.red, size: 35.0), onPressed: () async {
                  }),
                ],
                mainAxisSize: MainAxisSize.min
            )
          ),
        ]
      ),

Answer 1

Дело в том, что ваши Text виджеты находятся внутри Column виджета, размер которого изменяется в соответствии с его дочерними элементами (в данном случае Text виджеты). Таким образом, overflow: TextOverflow.ellipsis не будет ничего делать, пока вы не заключите текстовые виджеты в Column widget.

Один из способов исправить это - обернуть виджет Column с помощью виджета Flexible и использовать свойство flex, как вы хотите.

Фиксированный код должен выглядеть следующим образом:

new Row(children: <Widget>[
  // ### Widget 1 ###
  new Flexible(  // newly added
    flex: 2,  // newly added
    child: new Column(
      mainAxisSize: MainAxisSize.min, // newly added
      crossAxisAlignment: CrossAxisAlignment.start,  // newly added
      children: <Widget>[
        new Text("A very long strings sassaasasasasasasssss",
            overflow: TextOverflow.ellipsis),
        new Text("Another very long string skaskajsakaskjsa",
            overflow: TextOverflow.ellipsis),
      ],
    ),
  ),

  // ### Widget 2 ###
  /* should be visible in full size on the right in every situation */
  new Expanded(
    child: new Row(
    //mainAxisSize: MainAxisSize.min, // coomented because will not do anything here
    children: <Widget>[
      new Container(
        child: new IconButton(
            icon: new Icon(Icons.check,
                color: Colors.green, size: 35.0),
            onPressed: () async {}),
        margin: new EdgeInsets.only(right: 10.0),
      ),
      new IconButton(
          icon: new Icon(Icons.remove, color: Colors.red, size: 35.0),
          onPressed: () async {}),
    ],
  )),
]),

Answer 2

Вы можете использовать ListTile с его реализованным trailing, который просто добавляет виджет в конце строки:

ListTile(
    title: Widget1,
    trailing: new Row(
        children: <Widget> [
            IconButton, 
            IconButton
        ]
    ),
)