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),
),
],
),
)
Related
I'm trying to use flexible on my text cause it's overflow but for some reason expanded or neither flexible didn't work. But it work on other text widget on different screen. Anyone know why ? How can I fix this ?
return Row(
children: [
/// Ticket Details
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// Ticket Title
Flexible(
child: Text(
ticketData['title'],
style: primaryColor700Style.copyWith(
fontSize: fontSize18,
),
),
),
SizedBox(height: 8),
/// Date Created
Text(
'Created : ' +
DateFormat('d MMM y').format(
DateTime.parse(
ticketData['date_created'].toDate().toString(),
),
),
style: primaryColor400Style.copyWith(
fontSize: fontSize12,
),
),
],
),
/// Urgent Icon
if (ticketData['is_urgent'])
Icon(
Icons.warning_rounded,
size: 35,
color: warningColor,
),
],
);
Wrap the column with flexible
Row(
children: [
Flexible(
child: Column(
children:[
Text(),
]
)
)
]
)
Row takes infinite width, To get available width row for next children you can wrap Expanded/ Flexibile/ fixed width widget. You can check this doc more about.
You can find this from Layout algorithm on Row
Expanded, to indicate children that should take all the remaining room.
Flexible, to indicate children that should share the remaining room but that may by sized smaller (leaving some remaining room unused).
Tell me how to correctly make a large indent between RedeemButton() and button ? I need to make such an indent as shown in the screenshot.
body
Column(childre: [
const RedeemButton(
textStyle: constants.Styles.smallBookTextStyleWhite,
buttonStyle: constants.Styles.smallMediumTextStyleWhite),
const Padding(
padding: EdgeInsets.only(bottom: 50),
child: Text(
'Hello',
style: TextStyle(
color: Colors.white,
),
),
),
As you are using a Column Widget, to separate your 2 children you can use the mainAxisAlignment set to spaceBetween, like this:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [...
If you want a spacific distance number, you can set a SizedBox Widget between them, and set a height that fits your need in a height property
You can use Spacer widget if you want.
I have a home/login screen which is made up of a column that fills the entire screen like so:
Column(
children: <Widget>[
Expanded(
child: Container(
child: Logo(),
),
),
showThis ? This() : That(),
],
),
The second child of the column is dynamic and can have different heights, and this screen will have inputs so the keyboard will also affect the height.
I want to center Logo() vertically within the container when it's small (e.g. when keyboard is active), but limit how much the 'top margin' is able to grow, so that when the keyboard is hidden and This()/That() is small enough, Logo() will be in a static position on the screen, say 150 from the top (no longer centred vertically).
One method I have tried was using 2 empty Expanded() above and below Logo() and wrapping the top part in a ConstraintedBox(), but I am not able to get it to behave correctly.
Have you tried with Center() and also if you wanna in a specific position use Stack, for example
Stack(
children: <Widget>[
showThis(),
Positioned(top: 150, child: Logo())
],
)
This is what ended up working for me:
Column(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
// constrain top spacing with a max height
Flexible(child: Container(height: 160)),
_logo(),
Spacer(),
],
),
),
_bottomWidget(),
],
),
I'm creating a new widget that displays some bubbles, that should be connected by lines.
5-------6
|
4-------3
|
1-------2
I chose a ListView as the outer widget, if I understood it correctly this should give me the scrollability:
return Expanded(
child: ListView(
children: _createLWItems(_createBubbles()),
),
);
Children is a List of my inner widget. Each widget is a row, so I can place two bubbles next to each other:
return Container(
child: Row(
children: <Widget>[
Container(
child: bubbleItem1,
alignment: Alignment.centerLeft,
),
Container(
child: bubbleItem2,
alignment: Alignment.centerRight,
)
],
),
decoration: BoxDecoration( //TODO remove after testing
shape: BoxShape.rectangle,
border: Border.all(color: Colors.blue),
),
);
BubbleItem is only a Container with a BoxDecoration wrapped with a GestureDetector.
What I wanted to achieve is, that the left bubble is aligned to the left, and the right to the right, but instead, both are placed next to each other to the left, although row takes the entire width of my screen, as you can see (blue border):
As I read here there is a MainAxisAlignment for the row-widget but this would just align all childs left, right, centered, etc., not what I have in mind.
How can I place those bubbles the way I intend to?
If they are placed correctly I want to connect them with lines. Is there a way to do this without calculation? My idea would be to insert another widget between the bubbles that takes a line, but I'd need to tell it somehow, that it should take the entire space between the bubbles of his row.
At the moment I'm a bit unsure if I should calculate anything because I read something about 'you cannot calculate before it is rendered', but on the other hand I'm missing some understanding how to do it in flutter without it.
Alignment does work for Row children, but not in the way that you are expecting. If for example you had a Row child with half the height of the Row, you could use Alignment to specify if you want that child at the top or the bottom of the Row - the default is centered.
By default, the children are positioned sequentially within a Row (horizontally) as well as within a Column (vertically), which is what you've got in the screenshot you attached. If you simply wanted to position the 2 circles at the left and right ends of the Row, you could use a MainAxisAlignment value of spaceBetween, which places the free space evenly between the children.
If you want to also draw a line between the circles however, then you will not have any space left to distribute within the Row, so the MainAxisAlignment will not help. What you want instead is an Expanded widget within the Row, between the circles. This will create a widget that takes up all the remaining space within the Row, which is where you want your line to be.
Row(
children: <Widget>[
Container(
child: bubbleItem1,
alignment: Alignment.centerLeft,
),
Expanded(
child: Divider(),
),
Container(
child: bubbleItem2,
alignment: Alignment.centerRight,
)
],
)
You are giving the Alignment to the container's item, not the container itself
Try giving the Alignment to the Row
Container getContainer(){
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 50,
width: 50,
child: Center(child: Text("Left")),
),
Container(
height: 50,
width: 50,
child: Center(child: Text("Right")),
)
],
),
decoration: BoxDecoration( //TODO remove after testing
shape: BoxShape.rectangle,
border: Border.all(color: Colors.blue),
),
);
}
The Code
final _child1 = CircleAvatar(backgroundColor: Colors.blueGrey, radius: 100.0);
final _child2 = Container(child: Text('Mia B', style: TextStyle(fontSize: 20.0, color: Colors.white)));
final _child3 = Positioned(top: 35.0, left: 35.0, child: Text('Foo', style: TextStyle(fontSize: 20.0,color: Colors.red)));
final _child4 = Container(alignment: Alignment.centerRight, child: Text('Bar', style: TextStyle(fontSize: 20.0,color: Colors.red)));
return Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
Stack(
alignment: Alignment(0.6, 0.6),
children: [_child1, _child2, _child3],
),
Stack(
alignment: Alignment(0.6, 0.6),
children: [_child1, _child2, _child3, _child4],
)
],
),
);
The Screenshot
Question Description
There are 2 stack children in the column.
For the first stack without Container(alignment:) child, the second and third children will be placed according to the first child's position.
For The second stack with Container(alignment:) child, I have some questions:
Why does the third child Foo place itself according to the entire width instead of the first child CircleAvatar? This behavior is changed from the first stack.
Why does the first child CircleAvatar change its own position? What rule applies to its current position?
Why does the fourth child Container(alignment:) change the entire layout and the width of the stack element? The width of the stack was the width of the first child, but now, it becomes the width of the parent Container.
Why does the fourth child's centerRight align with the second child 'Mia B` instead of the first child CircleAvatar? I thought the first child was the alignment base. But now the forth child has the same X axis to the second child.