Basically I need to create some kind of Snackbar widget that can be created on any page. So I need to make it positioned relative to the screen. The only idea is to create the main Stack widget which will wrap all other pages. Do you have any other ideas? I found pretty similar question without any interesting answers
By using Mediaqueryto retrieve the screen size.
For example we can the screen width like this :
MediaQueryData screenSize = MediaQuery.of(context).size.width;
let's say i want my container's size to take up half the screen's size
One way to go about it is like this :
Container(
height: MediaQuery.of(context).size.height/2,
width: MediaQuery.of(context).size.width/2,
child: Text('This container is half this device screen's size');
);
What you are going for here is using the Positioned widget
Let's take the last example and leave a quarter of the screen on every side :
Container(
height: MediaQuery.of(context).size.height/2,
width: MediaQuery.of(context).size.width/2,
child: child: Stack(
children: <Widget>[
Positioned(
left: MediaQuery.of(context).size.width/4,
top: MediaQuery.of(context).size.height/4,
right: MediaQuery.of(context).size.width/4,
bottom: MediaQuery.of(context).size.height/4,
child: Text('This container is half this device screen's size'),
),
],
),
Related
I have 2 widget in stack. One of them is aligned in center. And the widget which is on the top is other stack. And I want show second widget with first widget's top and left position. Here is the explain:
The yellow area is my stack. And first widget is setted like Center(child: myFirstWidget). My second widget is referenced from here it's a resizable widget so it's an another stack and it's childs are "positioned". So I need to set top and left value for initialize. But my main stack filled page So when I set my second widget's top and left to 0. It's shown as below.
But I want to show align it to centered child's top like:
My code snip:
child: Container(
color: Colors.red,
child: Stack(
children: [
Center(
child: Image.file(
File("myfilepath"),
),
),
ResizableWidget(
child: Container(
color: Colors.blue,
),
),
],
),
),
You can adjust the position of the widgets with the Position widget like this:
Positioned(
child: ResizableWidget(
child: Container(
color: Colors.blue,
),
),
top: 80,
right: -5,
),
The value of top and right are just random values, you should check what works for you!
You should make Center the parent of the Stack.
The Stack will be positioned at the center of its parent because of Center, it will get the dimensions of its biggest childs (height and width) and will position other childs according to the alignment value.
Edit : I modified the code to include a placeHolder image. Here I gave it a 6000x2000 size but you can change it to whatever value you want. Code is working as expected, see capture below.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Stack(
alignment: AlignmentDirectional.topStart,
children: [
Image.network('https://via.placeholder.com/6000x2000'),
SizedBox(
height: 50,
width: 50,
child: Container(
color: Colors.green,
))
],
),
),
);
}
This is my Container:
Container(
height: height - height * 0.4, //this is my preferred height.
width: width - width * 0.7,
decoration: decoration,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Image.asset(
'assets/opensource.png',
scale: 1.35,
),
text('Open Source Software', 20, Color(0xFF02bbe5)),
text('Contributor since December, 2020', 16,
Color(0xFF02bbe5)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: text(
'test',
16,
Colors.blueGrey),
),
],
),
),
),
I need to make the app responsive, for that the Container needs to be elongated when the inner widgets don't fit inside the Container properly.
How do I give a preferred height to this Container but also allow it to resize freely in case of overflow?
Note: This Container is inside a Column itself with SingleChildScrollView as the parent. And I am building a web app.
Edit: I have used MediaQuery for getting width and height.
There are multiple ways to approach this problem. You can wrap you container inside an AspectRatio widget and an Expanded.
AspectRatio(
aspectRatio: someAspectRatioValue,
child: Expanded(
child Container(...)
)
)
This should expand the items container without loosing shape of the container.
You can also build your whole screen with a LayoutBuilder, though that would require a lot of reworking.
If you want to make your application responsive in Flutter then you should Sizer package( Here ). This package will make your app responsive for any screen size, it divides into percentages. For ex:
Container(
width: 20.w, //It will take a 20% of screen width
height:30.h //It will take a 30% of screen height
)
I have a Stack inside a Container with fixed size. The Stack has Positioned children with InkWell children inside. If I push a child to the left with e.g. left: -15, the InkWell is still visible outside the Container, however not clickable anymore outside of the Container.
Here the simplified version of the code:
Container(
width: 300,
height: 100,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 0,
bottom: 0,
left: -15,
child: InkWell(
onTap: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text("Test"),
),
),
),
],
),
);
I am trying to make the overflowing part (the 15 pixels to the left) of the InkWell clickable too. Right now I can only click everything inside the container.
The reason I am doing this is to make buttons easier clickable, while not moving the visible text to a different location.
Sadly:
It is intentional that widgets in the overflow area of a stack do not react to gestures and that's unlikely to change. I recommend that people with this (or similar) problems refactor their app to keep all interactable elements within the bounds of a stack.
source: https://github.com/flutter/flutter/issues/19445
In short, don't use overflow. Refactor your layout to make sure it's well contained inside the bounds of its parent.
TL;DR Need the container to fill the vertical space so that it can act as a ontap listener. Have tried most solutions but nothing seems to work.
So what I am trying to do is to make my container fill up the vertical space while still having a fixed width. Two first is what I have and third is what I want. The idea is to have the container transparent with a gesture ontap listener. If anyone have a better idea as for a different solution, feel free to suggest.
Widget build(BuildContext context) {
return new GestureDetector(
onHorizontalDragUpdate: _move,
onHorizontalDragEnd: _handleDragEnd,
child: new Stack(
children: <Widget>[
new Positioned.fill(
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Container(
child: new IconButton(
padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),
icon: new Icon(Icons.warning),
color: Colors.black12,
onPressed: () {},
)
),
],
),
),
new SlideTransition(
position: new Tween<Offset>(
begin: Offset(0.0, 0.0),
end: const Offset(-0.6, 0.0),
).animate(_animation),
child: new Card(
child: new Row(
children: <Widget>[
new Container(
width: 20.0,
height: 20.0,
color: Colors.amber,
),
new Expanded(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_getListTile(),
_ifStoplineIsToBeShown()
],
),
)
],
)
),
),
],
)
);
}
I am quite sure that i have been missing something considering the fact that I have tried a lot of different things and nothing seems to work.
I have also uploaded an image with the debug painting here.
PS. I know I have set the height to a fixed value, but this is the only way to show the container.
The trick is to combine an IntrinsicHeight widget and a Row with crossAxisAlignment: CrossAxisAlignment.stretch
This force the children of Row to expand vertically, but Row will take the least amount of vertical space possible.
Card(
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 20.0,
color: Colors.amber,
),
// Expanded(...)
],
),
)
)
To stretch the container to full height of the parent use property constraints:BoxConstraints.expand() in container widget. Container occupy the complete space independent of the of child widget
Container(
color: Colors.green,
child: Text("Flutter"),
constraints: BoxConstraints.expand(),
)
Please refer the link Container Cheat sheet for more about container
Simply pass in: double.infinity.
If you want a Container to fill all available space, you can just pass in:
width: double.infinity,
height: double.infinity
Explanation:
In Flutter, a child widget cannot exceed the "layout constraints" imposed by its parent widget. During the layout phase, Flutter engine uses a constraint solver to automatically correct "out-of-bound" values into what's allowed by its parent constraints.
For example, if you have a Container that's 50x50, and for its child, you pass in another Container that's 300x300, the inner container will be automatically corrected to "not exceed its parent", thus 50x50. Therefore, using sufficiently large values would always make sure you "fill parent".
In fact, even BoxConstraints.expand() exploits the same idea internally. If you open up the source code of expand(), you will see:
/// Creates box constraints that expand to fill another box constraints.
///
/// If width or height is given, the constraints will require exactly the
/// given value in the given dimension.
const BoxConstraints.expand({
double width,
double height,
}) : minWidth = width ?? double.infinity,
maxWidth = width ?? double.infinity,
minHeight = height ?? double.infinity,
maxHeight = height ?? double.infinity;
So if you are absolutely certain you want to fill all spaces, you can intuitively pass in a number bigger than the parent (or larger than the whole screen), like double.infinity.
As of Jan 2020 the simplest is to use an Expanded Widget
Expanded(flex: 1,
child: Container(..),
),
https://api.flutter.dev/flutter/widgets/Expanded-class.html
There are many answers which suggest using two things
constraints: BoxConstraints.expand(),
height: double.infinity,
But both these answer will give you an error like
BoxConstraints forces an infinite height.
We can avoid these by calculating the height of the screen like
App Bar
Top Bar Space(Exist on the above App Bar)
Remaining screen
1. Get the MediaQuery
final mediaQuery = MediaQuery.of(context);
2. Declare the AppBar Widget and same App Bar instance should be used in Scaffold App Bar
final PreferredSizeWidget appBar = AppBar(
title: Text('Home'),
);
3. Use calculated height
Container(
width: mediaQuery.size.width,
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top),
color: Colors.red,
),
Output:
Set the height or width of a container to double.maxFinite
Container(
height: double.maxFinite,
width: 100,)
You can make your widget take the full size of a Container widget, and then set the container's height and/or width to double.maxFinite. This will make the Container take the height and/or width or its parent widget
I propose using Expanded widget (which allows us to avoid IntrinsicHeight widget), combine it with the Container's alignment property and therefore make it work properly even if the Container is not the only one at the screen.
Expanded(
child: Container(
alignment: Alignment.center,
child: Text('Your text', textAlign: TextAlign.center))),
That way one also avoids potential app's crash which occurs often when you accidentally expand to infinity some parts of the widget tree both horizontally and vertically (that is why you are not able to use BoxConstraints widget in many cases).
One can read more about the problems of passing constraints in Flutter here - a must read: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2
This work works for me
height: MediaQuery.of(context).size.height,
I have a Stack widget that contains two Image widgets, one image overlaying the other. One image has top set to 10 so it sits 10 pixels higher on the screen. Unfortunately the 10.0px gets cut off at the bottom of the screen. If I set an overflow.visible then I can see it.
I wrap the stack with a GestureDetector the 10.0px overflow is not inside the GestureDetector so when a user clicks on the bottom of the image, nothing happens. The images will be different sizes so I can't set a definite height.
Is there a way to increase the size of the GestureDector to the size of its children?
return new GestureDetector(
onTapDown: (x) => print('onTapDown'),
child: new Stack(
overflow: Overflow.visible,
children: [
new Positioned(
child: shadowImage,
top: 10.0,
),
new Positioned(
child: initialImage,
),
],
),
);
Can (should?) Stack expand its size to its positioned children?
No. But if you want the following, then your child should not be positionned.
Stack, if it has one, will size itself around the first non-positionned child.
So you could transform your shadowImage to
children: [
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: shadowImage
),
new Positioned(
child: initialImage,
),
],