This is my DataTable:
SizedBox(
height: 200,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
columnSpacing: 0,
columns: const [
DataColumn(label: Text("Domain")),
DataColumn(label: Text("Request count")),
],
rows: const [
DataRow(cells: [
DataCell(Text("A very long text which causes the right column to be pushed out of the screen")),
DataCell(Text("12345")),
]),
DataRow(cells: [
DataCell(Text("It would be the best if this text would be shown in to lines so that there is enough space for the second column")),
DataCell(Text("678890")),
]),
],
),
),
)
The exception is:
The following assertion was thrown during layout:
A RenderFlex overflowed by 39 pixels on the right.
The relevant error-causing widget was
DataTable
I want the table to be limited in height, so that you can scroll through it, but horizontally the width should be fixed, so that you cannot scroll. If the content does not fit into the columns, as the above error shows, then the text should not disappear from the screen, but instead the text should go into a second row so that there is enough space for both columns on the screen. I have already tried many things, but I simply cannot limit the width of the table so that it is only as wide as the parent widget.
Providing width for every DataCell child solve the issue.
DataCell(
SizedBox(
width: x,
child: Text(
"A very long text which causes the right column to be pushed out of the screen",
overflow: TextOverflow.visible,
softWrap: true,
),
),
),
To get responsive width, you can use LayoutBuilder on body and use it's width: constraints.maxWidth * .5, to get 50% width of the screen or MediaQuery, (make sure minimizing the padding).
Related
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!
I would like to display chips inside of a horizontal scrollview, and display as many rows as can fit in a specified SizedBox height. Any chip that doesn't fit on the screen should be scrolled to horizontally, as shown in the image below. However, I would like to have the chips next to each other rather than in these fixed column sizes (i.e. the "eating healthy" and "pulse checks" chips should be right next to each other. My code looks something like this:
SizedBox(
height: 200,
child: SingleChildScrollView(
direction: Axis.horizontal
child: Wrap(
direction: Axis.vertical,
runSpacing: 10.0,
spacing: 8.0,
children: chipNames
.map(
(e) => SelectableChip(
label: e,
modChipSelected: modChipEmotion,
),
)
.toList(),
),
),
);
And this is what I'm getting (the SizedBox correctly determines the height and the horizontal scrollview works, I'm just getting deadspace in between columns):
I have a text that can vary in height, followed by a PopupMenuButton. I want the text to be center-aligned on the vertical axis (so that there isn't a weird white space when there's only 1 ligne of text) but the PopupMenuButton to stay in the top right corner, no matter the height of the text. Thus using crossAxisAlignement doesn't work here since all widgets are affected. Using an Align widget on the text or PopupMenuButton doesn't work and textAlign doesn't either It seems any solution must be implemented on the Row level and not in its children, which makes sense.
For now I'm using a Row to contain these 2 widgets, but I'm not so sure it is what I need if I want the behaviour mentionned before. Is there a solution for the Row, or another widget I can use for this ?
Here is the code as it stands. Thanks.
Row(
children: [
Expanded(
child: RichText(
text: TextSpan(), // bunch of text in there
)
)
),
SizedBox( // To box in the 3 dots icon (material design forces 48px otherwise)
height: 24,
width: 24,
child: PopupMenuButton(
padding: EdgeInsets.all(0),
onSelected: menuSelect,
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(value: 0, child: Text('Read', textAlign: TextAlign.center,),),
PopupMenuItem(value: 1, child: Text('Delete', textAlign: TextAlign.center,),)
];
},
),
)
],
)
Here's a way to do it :
Wrap your SizedBox with an Align(alignment: Alignment.topRight)
Wrap your Row with an IntrinsicHeight so that the cross-axis
doesn't stretch
Alternatively, you might want to look into the Stack widget if you're not familiar with it.
What I want to achieve is to have a static Container in the left half and a scroll-able list of items on the right half of the screen:
|----------------------|
| | |
| Container | ListView |
| | |
|----------------------|
It is for a desktop app, so I like this layout. My implementation: (appStatWidgets is a list of containers with text)
Row(
children: [
Container(height: 400, width: 400, color: Colors.green),
Expanded(
child: ListView(
children: appStatWidgets,
),
)
]),
But if i do this, the ListView is invisible and I get:
Vertical viewport was given unbounded height.
But I thought, that
Expanded would fix that.
What works is putting SizedBox instead of Expanded, but that gives me static size and I would like it to be flexible.
Use shrinkwrap: true in your list view parameters, to prevent it from having unbound heights.
And for your Sized box to take half the height for example, use mediaQuery to define the height.
i.e
SizedBox(height: MediaQuery.of(context).size.height * 0.50) This will set it's height to 50% of the screen.
and for ListView(physics, use physics: AlwaysScrollableScrollPhysics().
Row(
children: [
Container(height: 400, width: 400, color: Colors.green),
Expanded(
child:SizedBox(
width:100,
heigth:100,
child:ListView(
children: appStatWidgets,
),
)
)
]),
Like this
For a listview in a row, make sure you set the scroll direction to Axis.horizontal and one more thing make sure you provide your listview a vertical bound, so put it in a container with height only.
Wrap the listview with sized box and provide width and height
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.