I am trying to put some text widgets inside a column, but there is this additional padding that I want to get rid of. Is there any "clean" way to do it? I could probably use Stack and specify the padding for every element in my case, but it is not a scalable solution.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('why'),
Text('so'),
Text('stretched'),
],
),
We have few solutions here:
1/. Add height for style of Text widget, height is double, default is 1.0 You can reduce it to 0.8 or 0.6 or any number as you want.
2/. Add SizedBox wrap your Text widget and set height for this SizedBox as you want.
Related
I want to put my Text widget at the upper left side of my Homepage.
In your home page you are making the Column mainAxisSize min. This means the column takes up as little room as possible. I believe it is in the row widget of your main.dart file. Rows by default have cross axis alignment set to center. Try to remove mainAxisSize in your homepage Column or add CrossAxisAlignment.start to the main.dart Row.
Try the following code:
Align(
alignment: Alignment.topLeft,
child: Text(
…
),
),
Using Flutter v1.20.2
The following code
var data = [
['a', 'VerylongstringwithnospacesVerylongstringwithnospaces'],
['abc', '123456789'],
['abcdefg', '123'],
];
Expanded(
child: Table(
border: TableBorder.all(color: Colors.red),
columnWidths: {
0: IntrinsicColumnWidth(),
1: IntrinsicColumnWidth(),
},
children: data.map<TableRow>((x) => (
TableRow(
children: <TableCell>[
TableCell(child: Container(child: Text(x[0]))),
TableCell(child: Container(color: Colors.green, child: Text(x[1]))),
],
)
)).toList(),
),
),
results in this layout
As you can see the text overflows the boundary of the table.
I have tried innumerable solutions but none have worked. It appears that the TableCell itself has a width bigger than it should have, comparing to the size of the column of the table.
The biggest problem is that the size of both columns are unknown, they could be hundreds of characters long or single letter. In case of it being bigger than the width the text should break to the next line.
Is there a way to make a fluid grid layout so that both sides resize according to the amount of content for each Column? The ideal layout would be something like this
The reason why It’s happening is that the IntrinsicColumnWidth doesn’t give TableCell parent size. Because it's trying to set the column width based on child width. At the same time, to make text wrapping on lines, you need to have the width of parent, otherwise text widget don’t know it’s limits.
What options do you have :
FixedColumnWidth
FlexColumnWidth
FractionColumnWidth
MaxColumnWidth
MinColumnWidth
(Last two widgets used max/min of other TableColumnWidth widgets.)
In your case if you know that the text in the first column never will need to be wraped in lines, you can remove IntrinsicColumnWidth as parameter of second column. If you know that long text is possible, add the maximum width by adding MinColumnWidth
dartpad example
I'm trying to make this:
but with the timestamp on the right.
Currently I have (simplified for reading purposes but the essence is there):
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name),
Container(
constraints: BoxConstraints(maxWidth: 300),
child: Text(content),
),
Text(
timestamp,
),
],
);
So the name needs to be aligned on the left side, the content determines the width of the column with a maximum of 200, and the timestamp should be on the right side.
The problem here is that I cannot use anything like using a row with Expanded or Spacer or a regular container with max width and then the right alignment or anything else because they will all take as much horizontal space as possible, while I want to take as little space as possible while letting the length of content determine the width. Setting crossaxisalignment to CrossAxisAlignment.end fixes it but then the name is on the wrong side of course.
So essentially I want a different crossaxisalignment for different elements in the column, or at least something to that effect. Is there any way to do this?
I found the solution after experimenting a bit.
It was no more difficult than wrapping the Column with ÌntrinsicWidth and then simply setting the alignment in the Text. Everything else remains the same.
In a row widget, with the crossAxisAlignment: CrossAxisAlignment.center property, all the widgets inside of the row will be vertically centred inside the Row, as expected.
But how do I do if I want only one of them aligned for exmample to the start, something like the picture below:
I can think of some ways to do it, like adding a Column in the last widget, and play with the main axis aligment, Expanded...etc etc but seems like a lot of boilerplate code for such a simple output, ther might be out there a simpler and more elegant way to achieve this??
You can wrap widget 4 in a Container and set the height as widget 3 and add Alignment.topCenter
Ah, stumbled across this and found a solution.
Wrap widgets 3 and 4 in another Row and set the inner Row to CrossAxisAlignment.start.
Row(
children: [
LargeWidget('w1'),
LargeWidget('w2'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
LargeWidget('w3'),
SmallWidget('w4'),
],
),
],
);
This frees you from having to know the height of each widget.
I'm trying to build a "semi-responsive" widget. It has a fixed number of relatively large children that always fit on the screen horizontally (A, B and C) and a variable list of small children that not always fit horizontally together with A, B, and C. My idea is to have the widget look like the first picture when the screen is wide, and as a second when the screen is more narrow, and as a third when there's no space for smaller widgets at all. What I'm getting is the third only. As if Wrap always tries to put as many children horizontally as possible. I want it to minimize width instead.
My pseudocode:
Card(
child: Wrap(
children: [
Row(children: [A(), B(), C()]),
Wrap(children: [1(), 2(), 3(), 4(), 5()]),
]
),
);
Any idea how to "squeeze" Wrap vertically? Using standard layout widgets if possible.
You can archive that using the alignment property in the Wrap widget.
Card(
child: Wrap(
alignment: WrapAlignment.end,
children: [
Row(children: [A(), B(), C()]),
1(), 2(), 3(), 4(), 5(),
],),
);
check it out in dartpad gist