I want to make an image preview gallery like this. The height for the image is fixed to 150px using SizedBox. So I do not know the actual width of the image, depends on its aspect ratio.
Now, I want to have a description text, which I add as a column:
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 150,
child: Image.file(
File(artifacts[index].localartifactPath!),
fit: BoxFit.contain,
),
),
Text("Hello everyone this is my text",
maxLines: 2,
softWrap: true,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodySmall)
]),
But I do not want that the text is longer in width than the image, if the text is too long, it shall break into a second line and if still to long, it should use the ellipsis....
Is there any way to tell the Text widget not be longer (set constraints) in width than the Image widget?
Thanks!
Related
I am trying to implement a Column within a parent, but the first child of the Column should be centered vertically within the Column's parent, by using MainAxisAlignment.center the whole Column will be centered and if I have more than one child in the Column, the first child won't be in the center.
Here is what i have tried.
child: CircleAvatar(
radius: 146,
backgroundColor: Colors.black87,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('11:06',
style: TextStyle(
fontSize: 70,
)),
Icon(Icons.restart_alt),
],
),
),
Here is what i got.enter image description here
As you see the text is not in the center because the icon pushes it up a bit.
You can wrap your column in another column containing an Expanded widget followed by your column, also wrapped in an Expanded widget.
You can use some padding. I am not aware of a way to get the size of the parent and do like 50% of it like in CSS so you have to keep that in mind. However you can make calculations relative to the viewport height with MediaQuery.of(context).size.height.
Use Align inside Stack (not perfect, still needs adjustment).
CircleAvatar(
...
child: Stack(
alignment: Alignment.center,
children: const [
Text('11:06', style: TextStyle(fontSize: 70)),
Align(
alignment: Alignment(0, 0.4),
child: Icon(Icons.restart_alt),
),
],
),
)
Having a card (see image below)
Figma Info card
All I need to do is to reach this UI but look what I've got:
My Info card
As you can see the image is not fitted, however I created a SizedBox with needed width and heigth, child FittedBox, which has its own child Image.asset but it's not fitted.
DevTools say that the SizedBox itself has 100x100(which is to be as expected) but the Image is not:(
So could you guys suggest me any possible solution or idea?
Appreciate any answer:))
I've tried to put it in Expanded but the Column with Text begins to overflow, I've also tried to create a Container() with ImageDecoration but this is not working as well.
This is the image I need to fit (in case someone wants to try)
Here is the code of my InfoCard() widget:
class InfoCard extends StatelessWidget {
final String heading;
final String description;
const InfoCard({super.key, required this.heading, required this.description});
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: 157.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: ColorConstants.kBackgroundSecondary,
),
child: Row(
children: [
SizedBox(
width: 100.0,
height: 100.0,
child: FittedBox(
child: Image.asset(
'/images/info_card_icon.png',
),
),
),
const SizedBox(width: 20.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
heading,
style: Theme.of(context).textTheme.headlineSmall,`
),
const SizedBox(height: 10.0),
Text(
description,
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: ColorConstants.kText),
),
],
),
)
],
),
);
}
}
After #CCP suggestion to remove FittedBox and set Image.asset fit = BoxFit.cover DevTools show me 100x100 image size.
WIth FittedBox()
After I removed FIttedBox()
But as you can see even it's 100x100, the image itself is not expanded as I want
It should match the whole purple area I think
I don't think the problem is the code, but the image
I'm not an image expert so I speak as a hypothesis: maybe even the images that contain only the object have a transparent box with a dimension behind it, and in your image that box was big and made your image small. I tried copying the image to a smaller box and using that fixed the size issue.
info_card_icon2
In your image.asset give his property
fit: BoxFit.cover
I'm trying to create a vertical text using the RotatedBox. The widget works well and the text is rotated accordingly, but when the text is too long it is automatically expanded to the right which is not the behavior I wanted.
RotatedBox(
quarterTurns: -1,
child: Tooltip(
message: "the long text message when user wants to see it",
child: Container(
width: 50,
child: Text("some long text that is too long to fit",
overflow: TextOverflow.fade,
),
)),
),
As shown on the image above, the text isn't clipped using overflow instead it just expands to the right creating that awkward gap.
I've tried adding more containers to the RotatedBox, unfortunately it doesn't limit it's size at all.
I fixed this by adding height and width on the container outside the RotatedBox
Container(
height: 50,
width: 20,
child: RotatedBox(
quarterTurns: -1,
child: Tooltip(
message: "the long text message when user wants to see it",
child: Text("some long text that is too long to fit",
overflow: TextOverflow.fade,
)),
),
),
i am trying to render a dynamic Text widget inside the fittedBox.
if the text to long, it will be decrease font-size and vice versa.
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
text,
style: TextStyle(color: fontColor, height: 1),
),
),
But i got an error: RenderBox was not laid out: RenderFittedBox.
i seem like, inside fittedBox must be a block with exactly size, but Text widget does not have exactly size. Please help.
The best way to do this is by using AutoSizeText package. It is extremely performant and can easily replace Text. You can also set an overflow which I think you would want.
Here is an example:
SizedBox(
width:20,
child:AutoSizeText(
'The text to display. This is a really long text with a lot of words.',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 20),
maxLines: 1,
),
),
I broke my brain trying to find a solution. I have a row constrained by screen width and unconstrained by height. Here is an example, constrained by Container for simplicity:
Container(
color: Colors.blue[100],
width: 300,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(width: 24, height: 24, color: Colors.red),
Flexible(
fit: FlexFit.tight,
child: Text('$name', overflow: TextOverflow.ellipsis)
),
Flexible(
fit: FlexFit.tight,
child: Text('$value', overflow: TextOverflow.ellipsis, maxLines: 10, softWrap: true, textAlign: TextAlign.right)
)
]
)
)
I need to size name and value according to this requirements:
Consider red square as icon with constant size
name is always 1 line with ellipsis if overflowed
value can be up to 10 lines with ellipsis if overflowed
In most cases value is pretty short, so name should take all available space
When value is long, it should take up to 10 lines in height and all available space in width leaving only 50 pixels for name. And 24 for icon of course. So name should have min width of 50px.
I have no idea how to achieve this. Please help.
P.S. I wrote a big Flutter project, solved huge amount of tricky tasks and Widget puzzles but this thing is something unbelievable.