I have a column with 2 children. The first child has a fixed height, and the second child has dynamic content.
I want the first child to be at the head of the screen, and the second child to be in the vertical middle.
So i added an empty third child and made the first and third child Flexible so that they shared vertical space equally:
Column(
children: [
Flexible(
child: Column(
children: [_firstChild()],
),
),
_secondChild(),
Flexible(child: Container()),
],
)
This works when the content of the second child is short.
But if the second child gets tall, it clips the first child:
Isn't the Flexible supposed to distribute only the empty space when fit: FlexFit.loose? I tried both the fit possibilities. I've tried to put the first child inside a SizedBox and an Align
I've tried to make the third child a Spacer. Nothing has worked so far. The empty third child is taking half of the remaining vertical space.
EDIT:
When the second child's height is too much to make it vertically centered without clipping the first child, i want it to just behave like a default Column with MainAxisAlignment.start (like the first image)
What about this:
Stack(children:[
Center(child: SecondChild()),
Align(alignment: Alignment.topCenter, child: FirstChild()),
])
Related
I created a simple web app with Flutter.
The app layout is divided in two vertically zones: on the left there is a small top-bottom menu, on the right there is the main content inside a DataTable.
I wrapped the DataTable inside a SingleChildScrollView and everything worked fine.
The left side, on the other hand, keeps giving me a vertical overflow.
The tree on the left side is as follows:
Row(
children: [
//Left side menu
Flexible(
Container(
Column()
), //Container
), //Flexible
//Right side
Flexible(...),
],
), //Row
Obviously it is a very simplified version.
I've tried to insert a SingleChildScrollView in almost all places (Column, Container, Flexible), but it doesn't work and it always returns the error.
A RenderFlex overflowed by 174 pixels on the bottom.
Any solutions?
Thank you!
My approach would be to use MediaQuery to get current height and width of the web window. Then spilt the available width in the ratio of 2:7 maybe? You can play around with the ratio.
Now, lets keep the body of Scaffold to be Container with width as MediaQuery.of(context).size.width and height as ... .height. Now Row with childrens be 2 Expanded widgets with flex 2 and flex 7 respectively. Now we have to portion in the screen in the ratio 2:7.
On the left side, as you said, you need a menu, let it be
Expanded(
flex:2,
child: Column())
And on the other side be-
Expanded(
flex:7,
child: Container(
child: SingleChildScrollView() ///then add your stuff for scrolling purposes.
)
)
learn more about MediaQuery here
learn more about Expanded here
Having this widget:
Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
Text("a..."),
Text("b..."),
],
)
How can I make"a..." aligned to the left and "b..." to the right? Especially when "b..." wraps to the next line, I need it to align right, while "a" is aligned left.
(It is guaranteed that there are exactly 2 children).
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
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