I have a Positioned widget that I need to make it full width of the parent container
Widget tree is like this
Expanded
Stack
SomeOtherWidgets
Positioned(
left: 0,
bottom: 0,
height: 11,
child: Container(
// box decoration for this container
)
)
So what I need is a widget placed at the bottom of the Stack that goes on top of everything else in the Stack, that takes up the width of the ancestor Expanded
Is this possible? Thank you
You need to set left and right to 0, so it will expand full width.
If you want to expand a Positioned widget height and width, you can use Positioned.fill() which will set left/right/top/bottom to 0. (but you can override them if needed)
Related
I am new in flutter I can't understand that is infinity size render in flutter
If I use container with infinity width then it will render but in box constraints documentation infinity size can't render
This is because there is something constraining the widget, when you set as an example:
Container(
width: double.infinity,
),
it will try to take an infinity size, which usually will throw an error to you, but it's constrained so it takes the max possible width.
The Container widget is built on top of different multiples widgets such as ConstrainedBox, DecoratedBox, Align, LimitedBox... , the ConstrainedBox defaults to the BoxConstraints.expand(), check it's source code:
// ...
child: ConstrainedBox(constraints: const BoxConstraints.expand()),
);
but if you check also the Scaffold source code :
// ....
final BoxConstraints fullWidthConstraints = looseConstraints.tighten(width: size.width);
so trying to expand that Container even within infinity, will expand it at maximum on the fullWidthConstraints which is, in this case, the screen's width.
I wanna make a decorated border as in the image in scrollable widget
Your images dimension is 473 × 670. Corner decoration size 115 x 115. So you can use the centerSlice property to stretch your image according to your needs. Just like this...
Image.asset(
"images/decorated_image.png",
height: 1000, // device or widget height
width: 350, // device or widget height
centerSlice: const Rect.fromLTRB(115, 115, 358, 555),
)
Now you can use stack or any other of your prefered method to put this behind your scrollable list.
You can use Stack:
Stack(
children: [
Image(), // your border image
Container(margin: EdgeInsets.all(12)) // other widgets inside border
]
)
I'm creating a widget that presents a Stack inside a Container. Inside the Stack there is a dynamic Column inside a Positioned widget, which sticks the Column to the Bottom.
I am trying to wrap the Stack in a SingleChildScrollView, that if the dynamic Column will have lots of children it will be able to scroll.
But after I add the scroll view I get this error message:
RenderStack object was given an infinite size during layout.
A scrollView doesn't have height, it will use infinite height for it's children. So the stack should be wrapped in a sizedBox widh a known height in case that you want that. If you want the stack to fill the screen then remove the singleChildScrollview completely. And if you want the stack to be scrollable from the inside. Just add SingleChildScrollView inside the stack
return Scaffold(
body: Container(
color: Colors.blue[100],
child: Stack(
children: [
Positioned.fill(child: SingleChildScrollView(child: MyColumn()))
],
),
),
);
EDIT 1:
Ok the problem is the layout itself. Since you only use the stack to position the image. And you know the widht and height of the image, and the background shape fills all the items. We could
Isolate the stack only to the image, and use padding and some calculation to have the layout build in a similar way.
Then render everything else inside a normal column
My implementation https://dartpad.dev/230b14d8f0b22b45929a75c208786257
From the RenderStack documentation:
First, the non-positioned children (those with null values for top, right, bottom, and left) are laid out and initially placed in the upper-left corner of the stack. The stack is then sized to enclose all of the non-positioned children. If there are no non-positioned children, the stack becomes as large as possible.
Since all of your Stack's children are positioned, Stack will match the maximum size constraint passed down by the SingleChildScrollView. This size has infinite height, so the Stack is forced to have infinite height as well.
To fix this, you will need to find another way to accomplish what you want. One option that comes to mind involves a ConstrainedBox providing a minimum height (obtained from a LayoutBuilder), a non-positioned Column, and a bottomCenter alignment on the Stack itself. This is similar to the first code sample in the SingleChildScrollView documentation:
LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
// This ensures that the Stack fills the entire viewport,
// even if the Column is small.
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Stack(
// Place the only non-positioned child (the column) at the bottom
alignment: Alignment.bottomCenter,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [ /* ... */ ]
)
]
)
)
);
}
)
I want to have a line that has 100% parent height, the line should has a fluid height following it's parent's height. the parent's height would be dynamic because every content has it's own height. Just like in Path app.
This is my app, currently I'm setting the height as a constant, how to make it dynamic following it's parent's height? :
Container(
width: 1,
color: Colors. redAccent,
height: 300, // <-- this height
)
try to use the Expanded Widget which uses the available space. you just have to definewhat is the available space here
Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
),
here, if you dont put something on top of the expanded, it will take all the screen
and if not on the bottom, it will reach the bottom of the screen.
it takes the whole free space.
I solved this by adding container and add border left :)
I'm using a SafeArea Widget and want to extract the height of the bottom area which is not within the safe area. As recommended in other sources I tried using MediaQuery.of(context).padding but it always returns EdgeInsets.zero. Is there any other way of getting the size of the bottom region which is not within the safe area?
EDIT:
I had SafeArea widget's bottom property set to true (bottom: true) which always resulted in EdgeInsets.zero. Setting bottom: false returns the actual SafeArea's bottom padding value.
To get Bottom padding use
final bottomPadding = MediaQuery.of(context).padding.bottom;
To get Top padding use
final topPadding = MediaQuery.of(context).padding.top;
If you want to get height of App Bar which is used as flutter Material component
AppBar appBar = new AppBar();
appBar.preferredSize.height;
To get only Safe Area's height, try to access MediaQuery somewhere before adding SafeArea in the widget tree. This way you will get MediaQuery.of(context).padding with some value instead of EdgeInsets.zero. Padding is set to zero after insertion of SafeArea in the widget tree.
Doc for the child of SafeArea Widget says
The padding on the MediaQuery for the child will be suitably adjusted
to zero out any sides that were avoided by this widget.
So to get height excluding the height of all the system layers, try -
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final padding = MediaQuery.of(context).padding;
final heigth = size.height - padding.top - padding.bottom;
return SafeArea(
...
);
}
import 'dart:ui' as ui;
MediaQueryData.fromWindow(ui.window).size;
MediaQueryData.fromWindow(ui.window).padding;
SafeArea widget's bottom ant top properties buy default are set to true.
Setting 'bottom: false' and 'top: false' returns the actual SafeArea's bottom and top padding value.
return SafeArea(
top: false,
bottom: false,
child: Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
...