sgon00
sgon00

Reputation: 5757

How to avoid to use a fixed width in Container?

My original problematic code:

Note the fixed width 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)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

My solution:

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

Upvotes: 0

Views: 448

Answers (1)

soupjake
soupjake

Reputation: 3449

If you don't give a width for Container then it will automatically fill any space available:

overflow example

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

If you want to give a width then it's advised to use something like MediaQuery to make sure the value is uniform across screen sizes for example:

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

Just make sure everything is wrapped up in a MaterialApp or WidgetsApp for MediaQuery to work:

half size

Upvotes: 1

Related Questions