Positioning Flutter widgets off screen

Question

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?

Answer 1

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),
        ),
      ),
    );
  }

Answer 2

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'),
                ],
              ),
            )
          ],
        ),
      ),
    ),
  );
}