I have the following widget StackedIcons
reuturn Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(), Positioned(left: 15, child: PlusOne())
]),
);
which I want right aligned inside another widget
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [StackedIcons(match: match)]
)
and this is what I get
This looks good in terms of what I want to achieve (the plus one on top of the user avatar). However it overflows the parent container.
If I use right offset for positioned the order of the icons will be inverted and I don't want that.
If possible I would like to specify to Stack place the element below the current one (rather than on top).
The output I want is to have this widget rigth aligned without going over the padding of the parent. If I remove the Clip.none behaviour I get
A possible solution might be to place your PlusOne inside the green Container, and then give the Avatar some offset on the right instead.
return Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(right: 15, child: CircleAvatar()),
PlusOne(),
]),
);
I'm not sure how this would affect things if you were to have multiple avatars and then the plus icon, but if you haven't tried this, it might work for you.
Related
I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button.
I don't know if there is a widget able to do this or need some code...
Any suggest or help will be great! (this was my very first post ever, sorry if there is something wrong about it!!)
Thanks.
Do something like this.
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
color: Colors.grey,
),
],
),
Positioned(
top: 280,
left: 50,
right: 50,
child: RaisedButton(
color: Colors.white,
child: Text("Your Button"),
onPressed: () {},
),
)
],
),
you will get
Let me know if it works
One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.
On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.
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(),
],
),
What I am Implying to do is that if there is a Column and two containers in it. I want another widget pinned to to the first container which overlaps parts of the 2nd container and move with the first column (if i apply some special scroll effects).
Here is dummy code.
Column(
children: <Widget>[
Container(
height: 300,
child: <Some child widget which is pinned to this box and overlaps the second box>
),
Container(
height: 300,
)
],
)
If I have understood your question properly one way is to use two stack's itself like as follows.
Stack(
children: <Widget>[
Container(
height: 300,
margin: EdgeInsets.all(300),
),
Stack(children: <Widget>[SizedBox(height: 300,),TheWidgetYouWantToOverlap()],)
],
)
There is a widget (for example text). In the real example it comes after another widget in Column. How to put it in the center of the screen? As I understand it, the Column does not. How can this be done? Or are there other ways to specify the location of items?
Column takes all the available space of the parent and by default aligns the items to start
You can change fix this changes the MainAxisAlignment to center.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("test"),
],
),
or changing parents height and move it to the center (be careful if you add many items it will cause overflow)
child: Center(
child: Container(
height: 25,
child: Column(
children: <Widget>[
Text("test"),
],
),
),
),
Using Stack widget you can do it:
var textEmpty = Text("Some Text");
Stack(children: <Widget>[
Column(children: <Widget>[
Container(
,margin: EdgeInsets.only(top: 100.0)
,child: Center(child: textEmpty, ),)],),
listView,
]);
Use Center Wigdet instead of Container. Hope this helps!
No worries where it comes from. It depends on the view where you have added it.
If you want to show in the center then just use Center widget
If you want to use Container widget then, you have to add the width and height both to double.infinite
If you want to use it in the same widget then you can use the Stack widget as well.
It totally depends on the requirement of the view and in which way you are tried to implement it.
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),
),
);
}