I would like to incorporate a widget inside my image. But the problem is that all the ways that I found dont have a child method so I can't put a widget in there.
The last thing that I tried was to use BoxDecoration inside a Container and use child for the widget that I want to display inside. But the size of the container don't match with this image I don't know why. Anyone have an idea ?
my code:
You need to use fit, like this:
Container(
height: 200,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
fit: BoxFit.cover,//<--- add this
image: AssetImage('assets/images/test.jpeg'),
)),
child: ...
),
result before:
result after:
Wrap your Row() with Positioned() and play around with alignment
the Stack widget is what you need, simply it just considers its children as layers :
Stack(
children= <Widget>[
YourImageWidget(),
AnotherWidget(),
]
)
this will put one over the other widget
to control the position of your widget, Wrap it with the Positioned widget and set top, left, bottom, and right properties.
or wrap with the Align widget and set alignment property , example :
Stack(
children= <Widget>[
YourImageWidget(),
Positioned(
bottom: 0,
left: 15
child: AnotherWidget(),
)
]
)
Related
Container(
color: Colors.green,
width: 300,
height: 300,
child: Container(
color: Colors.purple,
width: 200,
height: 200,
),
),
when I do this why the child container size is the same as parent container size? but when i pass alignment: Alignment.center inside the parent container, this give a expected output?
Output
Because the parent widget forces the child widget to be the same exact size.
From the docs:
If a child wants a different size from its parent and the parent
doesn’t have enough information to align it, then the child’s size
might be ignored. Be specific when defining alignment.
You could also wrap the inner Container in a Center widget and it would also work.
See the examples here https://docs.flutter.dev/development/ui/layout/constraints
Please refer to the Widget Text("HERE") and corresponding ScreenShot below.
When a keyboard appears from the bottom of device, the Widget Text("HERE") relatively moved to upper-side, hence I should care about overflow of whole widget size as well as size of user devices.
How can I locate this Widget absolutely, or should I always make all things (widget) scrollable to corresponds to any devices and also to avoid overflow problem ?
Stack(
children:[
,//omit
const Align(
alignment: Alignment.bottomCenter,
child: Text("HERE"),
)
]
)
first, make sure you constrained your Scaffold widget to the full-screen height, with MediaQuery:
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
),
child: Scaffold(// your screen code),
),
then wrap your Text with a Positioned widget, then set the bottom property to 0 or the value you want to bottom with:
// ...
child: Stack(
children:[
Positioned(
bottom: 0,
child: Text("HERE"),
)
]
)
now even the keyboard is on, the screen will not resize and the Text widget will stay forcelly in the bottom of screen.
just add this line in Scaffold
Scaffold(
...
resizeToAvoidBottomInset : ture
);
hope it helps :)
As far as I see, Column and ListView both have a very distinct usage when used for a base root layouting.
Column is used when the screen has few components (such as login screen). We can add some Expanded components to adjust white spaces in between, so when the keyboard is visible, the screen shrink to keep everything visible.
ListView is used when the screen has many components that potentially need scrolling. We can't use Expanded component in ListView. When using ListView, appearing keyboard does not change the white spaces, only change the size of outer ListView, while the inner content is wrapped in scroll view.
Now the problem is, how if I want to have screen like this:
When all the contents' combined vertical size is not longer than available height quota given from parent (in this case, screen's height), then the components behave like inside Column: expanding or shrinking to fill available white spaces according to rules set by Expanded.
When all the content's combined vertical size is longer than available height quota, then the components behave like inside ListView: all the possible expanding components will shrink into their minimum size (ignoring Expanded), and the screen is scrollable so user can see the rest of the screen below.
Is this possible to be done in Flutter? How?
EDIT: based on Reign's comment, I have isolated some code from SingleChildScrollView manual, but it looks like it still can't handle if its children contains Expanded.
Widget columnRoot({
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.spaceBetween,
AssetImage backgroundImage,
List<Widget> children
}) =>
LayoutBuilder(builder: (BuildContext context, BoxConstraints viewportConstraints) =>
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: backgroundImage,
fit: BoxFit.cover),
color: Colors.white
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: mainAxisAlignment,
children: children
),
)
)
)
);
Widget content(BuildContext context) => columnRoot(children: [
Container(color: Colors.red, height: 100.0),
Expanded(Container(color: Colors.green)), // without this line, there's no layout error
Container(color: Colors.blue, height: 100.0),
]);
Error:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I added some code you can test with also with some explanation.
Copy paste and run the code
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: SingleChildScrollView( //Since setting it to scrollable, your widget Column with expanded children wont work as it supposed to be because it wont know its parent height
//Since its already scrollable `Expanded` will expand or shrink now based on it child widget (Expanded(child: SomeHeight widget)) refer: #10 example
child: IntrinsicHeight( //This will fix the expanded widget error
child: Container(
//Test remove this height
// height: 400, //But when you set its height before its parent scroll widget, `Expanded` will expand based on its available space
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: [
Container(color: Colors.red, height: 100.0),
//#10
//Experiment with this
Expanded(
child: Container(
color: Colors.purple,
// height: 100.0, //initialized height, remove parent container height: 400
// child: Text("This is also considered as min height"),
),
),
Container(color: Colors.blue, height: 100.0),
],
),
),
),
),
),
);
}
}
I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture.
Is there any way to move/resize the child widgets of stack while entering data from keypad.
Source code:
return Scaffold(
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/playingboard2.jpg'),
fit: BoxFit.cover)),
child: null,
),
_buildSelfPlayer(), // Returns the widget with form input and other widgets
_buildBank(), // top center, shows two pictures of bank
],
),
);
I don't see another fix for this, while also making use of Stack widget.
So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.
For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.
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'),
),
],
),