I want to layout a row in flutter with dynamic height items inside the row.
example:
there 2 widgets inside the row (A and B).
Widget A is a small content filled Widget (height 100px).
The height of B is bigger (eg.. 500px.)
the row should now have the height of the biggest child (B).
How can i say that child A autosize to 500px?
I know ... i can wrap the row into a SizedBox with 500px an set the crossAxisAlignment of the row to stretch... but that is not what I want ...
Is there a way to auto size all childs inside of a row to the heightest ?
You can use IntrinsicHeight widget like so with row's crossAxisAlignment set to CrossAxisAlignment.stretch.
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
WidgetA(),
WidgetB(),
],
),
)
Related
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.
This is what I want to achieve.
Use a Row widget just below the progress indicator, make sure that both of them have same width.
Set Main Axis Alignment of that row to 'MainAxisAlignment.spaceBetween' and add all those titles as children of the row.
Here is code snippet to give you an idea:
Column(
children: [
YourProgressWidget(),
// add any sizedBox for spacing
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Place your text titles here
]),
]),
Make sure that the number of children in the Row should be equal to number of segments in your progress bar.
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()),
])
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