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









share|improve this question

























  • 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











  • 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











  • 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
















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









share|improve this question

























  • 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











  • 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











  • 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














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









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 '18 at 7:14







sgon00

















asked Nov 22 '18 at 6:37









sgon00sgon00

269212




269212













  • 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











  • 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











  • 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











  • @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











  • @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

















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












1 Answer
1






active

oldest

votes


















1














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






share|improve this answer


























  • 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











  • 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











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


















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:



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






share|improve this answer


























  • 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











  • 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
















1














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






share|improve this answer


























  • 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











  • 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














1












1








1







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






share|improve this answer















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







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 22 '18 at 13:46

























answered Nov 22 '18 at 10:03









SnakeyHipsSnakeyHips

609113




609113













  • 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











  • 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











  • 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




















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














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





















































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







Popular posts from this blog

"Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

Alcedinidae

Origin of the phrase “under your belt”?