Как избежать использования фиксированной ширины в контейнере?

Question

Мой оригинальный проблемный код:

Обратите внимание на фиксированную ширину width: 220.0,.

ListView(
  children: <Widget>[
    Padding(padding: EdgeInsets.only(top:0.0),),
    InkWell(
      onTap: () {},
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                CircleAvatar(
                  radius: 28.0,
                  child: Text('1')
                ),
                Container(
                  height: 40.0,
                  width: 220.0, // Must to have, otherwise, it overflows the Text 'AAAAAAAA' container on the right.
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Expanded(child: Text('This is very very very very very'
                        ' very very very long', 
                        style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                      ),
                      Expanded(child: Text('This is very very very very very'
                        ' very very very long', 
                        style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                      )
                    ],
                  ),
                ),
              ],
            ),
            Container(
              height: 40.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

Мое решение:

ListView(
  children: <Widget>[
    Padding(padding: EdgeInsets.only(top:0.0),),
    InkWell(
      onTap: () {},
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CircleAvatar(
              radius: 28.0,
              child: Text('1')
            ),
            Expanded(
              child: Container(
                height: 40.0,
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('This is very very very very very'
                    ' very very very long', 
                    style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                    Text('This is very very very very very'
                    ' very very very long', 
                    style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis)
                  ],
                ),
              ),
            ),
            Container(
              height: 40.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

Answer 1

Если вы не дадите width для Container, тогда оно автоматически заполнит любое доступное пространство:

Container(
    height: 40.0,
    child: Column(
        children: <Widget>[
        Expanded(
            child: Text(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                      overflow: TextOverflow.ellipsis,
         )),
         Expanded(
             child: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                      overflow: TextOverflow.ellipsis,
          )),
        ],
    ))

Если вы хотите задать ширину, то рекомендуется использовать что-то вроде MediaQuery , чтобы убедиться, что значение одинаково по размерам экрана, например:

Container(
  height: 40.0,
  width: MediaQuery.of(context).size.width / 2,
  child: ...

Просто убедитесь, что все обернутов MaterialApp или WidgetsApp для MediaQuery на работу: