How to avoid to use a fixed width in Container?
up vote
0
down vote
favorite
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)),
],
)
),
],
)
),
),
]
)
flutter asked Nov 22 at 6:37
sgon00
235211
|
show 5 more comments
up vote
0
down vote
favorite
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)),
],
)
),
],
)
),
),
]
)
asked Nov 22 at 6:37
sgon00
235211
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
@AjayS This is what I got when I removeheightandwidthconstraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removingExpandedclass.
– sgon00
Nov 22 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I needoverflow: TextOverflow.ellipsisto work. Thanks.
– sgon00
Nov 22 at 9:26
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51
|
show 5 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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)),
],
)
),
],
)
),
),
]
)
asked Nov 22 at 6:37
sgon00
235211
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)),
],
)
),
],
)
),
),
]
)
asked Nov 22 at 6:37
sgon00
235211
asked Nov 22 at 6:37
sgon00
235211
edited Nov 23 at 7:14
asked Nov 22 at 6:37
sgon00
235211
asked Nov 22 at 6:37
sgon00
235211
asked Nov 22 at 6:37
sgon00
235211
235211
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
@AjayS This is what I got when I removeheightandwidthconstraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removingExpandedclass.
– sgon00
Nov 22 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I needoverflow: TextOverflow.ellipsisto work. Thanks.
– sgon00
Nov 22 at 9:26
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51
|
show 5 more comments
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
@AjayS This is what I got when I removeheightandwidthconstraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removingExpandedclass.
– sgon00
Nov 22 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I needoverflow: TextOverflow.ellipsisto work. Thanks.
– sgon00
Nov 22 at 9:26
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
@AjayS This is what I got when I remove
height and width constraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removing Expanded class.– sgon00
Nov 22 at 7:30
@AjayS This is what I got when I remove
height and width constraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removing Expanded class.– sgon00
Nov 22 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I need
overflow: TextOverflow.ellipsis to work. Thanks.– sgon00
Nov 22 at 9:26
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I need
overflow: TextOverflow.ellipsis to work. Thanks.– sgon00
Nov 22 at 9:26
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51
|
show 5 more comments
1 Answer
1
active
oldest
votes
up vote
1
down vote
If you don't give a width for Container then it will automatically fill any space available:
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:
answered Nov 22 at 10:03
SnakeyHips
420111
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. WithMediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something likewidth: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.
– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425148%2fhow-to-avoid-to-use-a-fixed-width-in-container%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
If you don't give a width for Container then it will automatically fill any space available:
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:
answered Nov 22 at 10:03
SnakeyHips
420111
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. WithMediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something likewidth: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.
– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
add a comment |
up vote
1
down vote
If you don't give a width for Container then it will automatically fill any space available:
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:
answered Nov 22 at 10:03
SnakeyHips
420111
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. WithMediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something likewidth: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.
– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
add a comment |
up vote
1
down vote
up vote
1
down vote
If you don't give a width for Container then it will automatically fill any space available:
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:
answered Nov 22 at 10:03
SnakeyHips
420111
If you don't give a width for Container then it will automatically fill any space available:
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:
answered Nov 22 at 10:03
SnakeyHips
420111
edited Nov 22 at 13:46
answered Nov 22 at 10:03
SnakeyHips
420111
answered Nov 22 at 10:03
SnakeyHips
420111
answered Nov 22 at 10:03
SnakeyHips
420111
420111
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. WithMediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something likewidth: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.
– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
add a comment |
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. WithMediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something likewidth: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.
– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. With
MediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something like width: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.– sgon00
Nov 22 at 13:37
Thanks a lot for the detail reply. My original question has some problems and unclear parts, the reason why I have to give width is because that container is inside a Row which has many children. With
MediaQuery.of(context).size.width / 2, I think it still may overflow in smaller device because of other children in the same row. Is that possible to find out other children's widths automatically/programmable? so that I can do something like width: MediaQuery.of(context).size.width - child1_width - child2_width. something like that. Thanks a lot.– sgon00
Nov 22 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 at 13:50
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
I have found the problem I made. If I put every non-row children inside one row, it works fine. If I put a row child inside a row, it doesn't. I will share the detail code tomorrow. I have to sleep now, otherwise my wife will kill me...
– sgon00
Nov 22 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 at 15:27
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
Sorry that it takes so long. I have edited my question and put both problematic code and solution code in detail. You can have a look now. If you have any better suggestions, please let me know. Thanks a lot.
– sgon00
Nov 23 at 7:16
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425148%2fhow-to-avoid-to-use-a-fixed-width-in-container%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 at 7:25
@AjayS This is what I got when I remove
heightandwidthconstraints. hastebin.com/cosamatuke.coffeescript To fix this, it's either provide constraints or removingExpandedclass.– sgon00
Nov 22 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 at 9:12
@RafiqulHasan thanks a lot for the comment. Can you show me the code how to do it? Just how to change my above code. Btw, I need
overflow: TextOverflow.ellipsisto work. Thanks.– sgon00
Nov 22 at 9:26
If you have to use width, you can get device width using this. - MediaQuery.of(context).size.width
– Rafiqul Hasan
Nov 22 at 9:51