Getting a Container inside an Expanded inside a Row to expand vertically to fit the space available in the Row - flutter

I have a row containing four Expanded widgets. Its code looks as follows:
Row(
children: [
Expanded(
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.language,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.cEFRLevelName,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.lessonTopic,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (
Text(
lessonData.lessonHeading,
style: const TextStyle(
color: Colors.white,
),
)),
),
)
],
),
The resulting display is unsatisfactory if any of the texts in the Containers inside the Expanded widgets are forced to wrap. As in this image:
Click here to display an image of my problem when text has wrapped in one Container but not in the other three.
This image shows something like what I'd like the Row to look like.
I simply can't get the Container widgets containing text without any wrap to expand out to the height of the row.
Among other candidate solutions, I've tried setting the height to double.infinity and double.maxFinite, setting Constraints in the Containers to Constraints: BoxConstraints.expand(). All these options either do nothing or generate an error on hot reload.
I'm reluctant to try an IntrinsicHeight widget because I'm warned that it's very hungry.
I'd be very grateful for any solution and/or comment you might have!
TIA
Jaime

If I understood what you want, I may have a suggestion. It's more of a workaround, but you can move the Container with the colored backgroud up a level and remove each other Container, making the new Container the parent of the whole Row: I put the code in a DartPad, and this is how it looks.
Just an excerpt of the code:
Container(color: Colors.red,child: Row(
children: [
Expanded(...),
Expanded(...),
//and so on...
This works only on an aesthetic level: each Text will still get resized, but you won't notice.

Related

How to set width as much as I need, but not more

In appBar I have a container which is responsible for displaying text (it could be 5 chars or even 100). And I want to adjust width of container based on text. For example for 5 chars container should show text and should be a little bigger than text (I will add paddings later), but for 100 chars container should take all possible space and show text with dots.
Currently I have two solutions:
The first one (Without spacer() in tree) is expanding container always to the biggest possible width (like I said, I don't need this big container for short texts)
The second one (with spacer() in tree) is always displaying container with 1/3 width of appbar (Did someone know why it's always the same width? It's kind of interesting).
return Scaffold(
appBar: AppBar(
titleSpacing: 10,
centerTitle: false,
automaticallyImplyLeading: false,
title: SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(height: 40, width: 40, color: Colors.amberAccent),
const SizedBox(width: 10),
const Text("Some Text"),
const SizedBox(width: 10),
Expanded(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"text",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
],
),
),
),
body: Container(),
);
So, how can I adjust width of this container to text inside?
Update:
I don't know if I explained it correctly, because your answers weren't related with my question 😁 So I will try again:
I want the last one container to take full possible width if text is long and for shorten texts just width to cover background behind text.
Here is long text: (It should be like that)
Here is short text: (Container should be smaller)
You should use constraints: BoxConstraints(maxWidth:), property of Container.
Please go with below code.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
Your result will be like below screenshot.
I implement another text for checking dynamic width of container.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello World', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
For This You can Use :
Flexible Widget:
Example:
Flexible(
child: Container(
color: Colors.green,
)
),
or Wrap Widget :
Example :
Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping')
],
)
],
),
));

SingleChildScrollView makes the UI white

I am trying to make my UI scrollable but when i add the SingleChildScrollView i get this white screen not showing anything at all.I should erase the Column from the begining?Use a container?I already search on internet but i don't know what to add.
Here is my code, please tell me what i can erase or add to make it work ..
class _UserProfilesState extends State<UserProfiles> {
#override
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Padding(
padding:
EdgeInsets.symmetric(horizontal: 10.0, vertical: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30.0,
color: Colors.black,
onPressed: () => Navigator.pop(context),
),
])),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 6.5 - 28,
child: Container(
height: 84,
width: 84,
//profilepic
child: CircleAvatar(
radius: 10,
backgroundImage: NetworkImage(widget.avatarUrl != null
? widget.avatarUrl
: "https://icon-library.com/images/add-image-icon/add-image-icon-14.jpg"),
),
),
),
Positioned(
right: 24,
top: MediaQuery.of(context).size.height / 6.5 + 16,
child: Row(
children: <Widget>[
Container(
height: 32,
width: 100,
child: RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ChatScreen(
serviceProviderId:
widget.serviceProviderId,
userName: widget.userName,
avatarUrl: widget.avatarUrl,
)));
},
color: Colors.black,
textColor: Colors.white,
child: Text(
"Message",
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
SizedBox(
width: 16,
),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://lh3.googleusercontent.com/Kf8WTct65hFJxBUDm5E-EpYsiDoLQiGGbnuyP6HBNax43YShXti9THPon1YKB6zPYpA"),
fit: BoxFit.cover),
shape: BoxShape.circle,
color: Colors.blue),
),
],
),
),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 4.3,
bottom: 0,
right: 0,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.userName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 22,
)),
SizedBox(
height: 4,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
widget.address == "default"
? "No Address yet"
: "${widget.address}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"${widget.categoryName}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
],
),
))
],
))
],
),
),
);
}
}
Using Spacer() might also cause this issue
The reason why your UI became white is that SingleChildScrollView allows it child to take as much space as possible. In your Column, one of your children is Expanded, Expanded tries to take as much space as possible. You are making your UI take an infinite amount of space because of that. That's the reason why you are seeing a white screen. The solution here would be to remove Expanded.
according to me and the knowledge I have this happened because the singlechildscrollview here tries to take as much height as it can take so It is creating an issue to solve this wrap the singlechildscrollview in a container and give height&width to the container it solved in my case
Thanks...
I faced similar issues, but after much research I got it working, by ensuring that the body of the scaffold be a Container that defines it's height and width, or Column. After which you can wrapped your any of these with a SingleChildScrollView.
However, in an attempt to insert an Expanded widget as child element, the expanded widget will look for bounded heights of it's parents/root element. And if it doesn't found any, it will thrown an error. A good example is if the root element is a column or a container with an unbounded height. Which is your case, looking at your code

Make container grow to fit width of sibling in column

I have two Container widgets in a Column, each containing a Text widget. I want the Container with the shortest text to expand to match the width of the other container containing the longer text. The container with the longer text should wrap the Text widget and its padding.
I can't get it to work without resorting to fixed widths on the containers:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
// This container has a shorter text than its sibling, so it should expand
// its width to match its sibling/parent
Container(
alignment: Alignment.center,
width: 50, // I don't want this fixed width
decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))),
child: Padding(
padding: const EdgeInsets.fromLTRB(8,4,8,4),
child: Text('short'),
)
),
// This container has a longer text, so it should decide the width of the
// other container (and of the parent Column)
Container(
alignment: Alignment.center,
width: 50, // I don't want this fixed width
decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4), bottomRight: Radius.circular(4))),
child: Padding(
padding: const EdgeInsets.fromLTRB(8,4,8,4),
child: Text('long text here'),
)
),
]
);
I've tried a couple of ways to solve it involving Expanded and Flexible, but they all result in the "red screen of death" (or at least "annoyance").
EDIT
Just to be clear - I want the Column to just wrap its content, i.e. adjust its width to the width of the containers. In summary - everything should be as narrow as possible, except for the container with the shortest text, which should instead be as wide as its sibling (the container with the longer text).
I saw your Fiddle on a comment. And what you need is IntrinsicWidth.
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// This container has a shorter text than its sibling, so it should expand
// its width to match its sibling/parent
Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Container(
color: Colors.orange,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
'short',
textAlign: TextAlign.center,
),
),
),
),
// This container has a longer text, so it should decide the width of the
// other container (and of the parent Column)
Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Container(
color: Colors.orange,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
'long text here',
textAlign: TextAlign.center,
),
),
),
),
],
),
),
You can use something like this to take the entire width of the Widget (make sure to be inside a MaterialApp and a Scaffold/Material child (home):
Wrap(
children: <Widget>[
Container(
color: Colors.red,
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.black,
height: 200,
child: Align(
alignment: Alignment.bottomRight,
child: Text(
"Hello World",
style: TextStyle(color: Colors.white),
),
),
),
Container(
color: Colors.blue,
height: 100,
child: Align(
alignment: Alignment.topRight,
child: Text(
"Bottom Text Longer Text",
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
],
)
The Align is not necessary, is just to showcase how the width actually works with "double.infinity" and moving a text to the bottom right or top right portion of it.

Auto expanding Container in flutter -- for all devices

I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.
I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong
Card(
elevation: defaultTargetPlatform ==
TargetPlatform.android ? 5.0 : 0.0,
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(color: Colors.black),
width: _screenSize.width,
height: 250,
child: Column(
children: <Widget>[
Container(
color: Colors.black,
width: _screenSize.width,
height: 35,
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 11),
child: Text("Title".toUpperCase(),
style: TextStyle(
color: Colors.white
),
),
),
),
Container(
color: Colors.white,
width: _screenSize.width,
height: 210,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 5),
child: Text("Title of expanding text", style: TextStyle(
fontSize: 25,
),
),
),
Text("Expanding text", style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w800
),),
],
),
),
],
),
),
],
),
),
I just need the Container to expand, but stay small/get bigger
Have you tried not specifying height at all? The Container should wrap according to the child in this case.
Otherwise, the widget has a child but no height, no width, no
constraints, and no alignment, and the Container passes the
constraints from the parent to the child and sizes itself to match the
child.
Above is an extract from the official flutter documentation for Container.
Here is the official flutter documentation link.
You can use FittedBox, this will resize your text according to available area.
You can use it like this :
FittedBox(child: Text('...............Your text...............'));
I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...
Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: Column(
children: [
Text(
'Hello flutter...i like flutter...i like google...',
softWrap: true,
style: TextStyle(
color: Colors.white, fontSize: 20 , ),
),],),)
we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container
for example
AnythingYourWidget(
child: Container(
child: Column( // For Example Column
mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
children: [
// YourWidget
]
)
)
),
I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.
IntrinsicWidth will scale the size of the container to its child.

How do I tweak my Flutter Stack widget to not have bottom overflowing?

[Update] : I got the solution, If you want the code, comment below or if you just want to know I've written it here :
The solution is to put the Cover Image and the Followers & Following inside a Column (as a single widget) and then put that Column and the Align (profile picture) both inside a Stack, then set the Fixed heightFactor.
So it would look something like this :
Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(), //The Cover Photo
Container(
child: Card() //The Followers and Following Card
)
]
),
Align() //The Profile Picture having fixed heightFactor
]
)
This solution is working on all 4 Devices I have + 2 Android Emulators (2 have 16:9 ratio, 2 have 18:9 and 2 have 19:9 ratio).
The problem is following :
On my device, which is having 18:9 Aspect Ratio there is no Bottom Overflowing issue.
But on devices having 16:9 Aspect Ratio it's having this issue.
This happens only when I try to set heightFactor of Followers & Following Align widget.
I tried to tweak many things in Stack so I could overcome this, but couldn't achieve similar result. So, I'm stuck with this.
Also, as far as I know I can overlap only by using Stack widget. If there is any possible option, do say.
Here is my code :
Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 224.0,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://www.eta.co.uk/wp-content/uploads/2012/09/Cycling-by-water-resized-min.jpg"),
fit: BoxFit.cover
)
),
),
Align(
heightFactor: 5.0,
child: Container(
alignment: Alignment.bottomCenter,
width: MediaQuery.of(context).size.width,
height: 96.0,
margin: EdgeInsets.all(8.0),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
elevation: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Followers",
style: TextStyle(
fontFamily: "Nunito",
fontWeight: FontWeight.bold,
color: Colors.blue
),
),
Text(
"3000",
style: TextStyle(
fontFamily: "Nunito",
color: Colors.blue
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Following",
style: TextStyle(
fontFamily: "Nunito",
fontWeight: FontWeight.bold,
color: Colors.blue
),
),
Text(
"0",
style: TextStyle(
fontFamily: "Nunito",
color: Colors.blue
),
),
],
),
],
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
heightFactor: 2.75,
child: Card(
color: Colors.transparent,
elevation: 0.0,
child: Container(
alignment: Alignment.bottomCenter,
width: 96.0,
height: 96.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage("https://cdn140.picsart.com/284302087007201.jpg?c256x256"),
fit: BoxFit.fill
),
border: Border.all(width: 4.0, color: Colors.blue)
),
),
),
),
],
),
You've provided the height of widget manually so it'll overflow on smaller screens. So you have to provide the height of widget depending upon the screen. You can use MediaQuery.of(context).size.height to get the height of the device.
And you can also multiply it with some number to get the height in percentage. For example, if you want 80% height of the screen then you can do MediaQuery.of(context).size.height * 80
The answer from #yashthakkar1173 is correct. That's one way of doing it. In addition to that I would say to his solution you can use
ConstrainedBox(
child: Card(),
constraints: BoxConstraints(
minHeight: 96.0,
maxHeight: 106.0,
))
What I observe is that you don't need the entire view to be in a Stack since it's just the top three widgets that overlap so I would wrap that stack in a column and set MainAxisSize to Min. I've done something similar, or you can set it to max so it'll always fill all the space left over.