Reputation: 333
As the title mentioned, I'm trying to position my widget off screen. Currently I have managed to offset the a widget image off screen however it is not the outcome I had expect. The image that is off screen is still visible on the status bar.
This is how it looked like
This is how i expect it should look like (designed in adobe XD)
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Palette.primaryBackground,
body: Container(
width: double.infinity,
height: double.infinity,
child: Image.asset(
'assets/Splash.png',
fit: BoxFit.scaleDown,
alignment: new Alignment(1.4, -1.2),
),
),
),
);
}
I have tried using a Positioned
widget within a Stack
, however it caused more issue of overflow when i try adding new widgets to the Stack
's children.
I'm sure there is a proper method of placing a widget in an absolute position. Anyone able to help me with that?
Upvotes: 4
Views: 9097
Reputation: 1112
Try using transform: Matrix4.translationValues() and use MediaQueries to position.
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Palette.primaryBackground,
body: Container(
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.scaleDown,
// alignment: new Alignment(1.4, -1.2),
),
transform: Matrix4.translationValues(
MediaQuery.of(context).size.width * .8, -50.0, 0.0),
),
),
);
}
Upvotes: 7
Reputation: 333
SOLUTION
I've added the sizedBox with a height of 200 to push the text lower to the middle of the screen to continue the children for the Column if not all the column would start at the top.
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
color: Palette.primaryBackground,
child: Stack(
overflow: Overflow.clip,
children: <Widget>[
Positioned(
top: -60,
right: -80,
child: Image.asset('assets/Splash.png'),
),
Center(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(
height: 200,
),
Text('hello'),
],
),
)
],
),
),
),
);
}
Upvotes: 2
Reputation: 11
You can use stack with overflow visible:
Stack(
overflow: Overflow.visible,
children: <Widget>[
//using Positioned to control position
],
)
Upvotes: 1