Mixing
How to avoid to use a fixed width in Container?
0
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 '18 at 6:37
sgon00sgon00
281212
|
show 5 more comments
0
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 '18 at 6:37
sgon00sgon00
281212
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 '18 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 '18 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 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 '18 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 '18 at 9:51
|
show 5 more comments
0
0
0
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 '18 at 6:37
sgon00sgon00
281212
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 '18 at 6:37
sgon00sgon00
281212
asked Nov 22 '18 at 6:37
sgon00sgon00
281212
edited Nov 23 '18 at 7:14
sgon00
asked Nov 22 '18 at 6:37
sgon00sgon00
281212
asked Nov 22 '18 at 6:37
sgon00sgon00
281212
asked Nov 22 '18 at 6:37
sgon00sgon00
281212
281212
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 '18 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 '18 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 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 '18 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 '18 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 '18 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 '18 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 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 '18 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 '18 at 9:51
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 '18 at 7:25
What do you mean by this "Expanded does not work with unbounded constraints from the reported errors." ?
– Ajay S
Nov 22 '18 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 '18 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 '18 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 at 9:12
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 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 '18 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 '18 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 '18 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 '18 at 9:51
|
show 5 more comments
1 Answer
1
active
oldest
votes
1
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 '18 at 10:03
SnakeyHipsSnakeyHips
619113
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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 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',
autoActivateHeartbeat: false,
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
1
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 '18 at 10:03
SnakeyHipsSnakeyHips
619113
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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 at 7:16
add a comment |
1
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 '18 at 10:03
SnakeyHipsSnakeyHips
619113
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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 at 7:16
add a comment |
1
1
1
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 '18 at 10:03
SnakeyHipsSnakeyHips
619113
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 '18 at 10:03
SnakeyHipsSnakeyHips
619113
edited Nov 22 '18 at 13:46
answered Nov 22 '18 at 10:03
SnakeyHipsSnakeyHips
619113
answered Nov 22 '18 at 10:03
SnakeyHipsSnakeyHips
619113
answered Nov 22 '18 at 10:03
SnakeyHipsSnakeyHips
619113
619113
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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 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 '18 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 '18 at 13:37
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 at 13:50
Are you able to provide a layout example/diagram in your question?
– SnakeyHips
Nov 22 '18 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 '18 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 '18 at 15:24
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 at 15:27
Yeah things like Rows within Rows can act funny. Haha good luck!
– SnakeyHips
Nov 22 '18 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 '18 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 '18 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.
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 '18 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 '18 at 7:30
Use flex rather than fixed height and width
– Rafiqul Hasan
Nov 22 '18 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 '18 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 '18 at 9:51