CODEWITHSUNDEEP
flutter
Dexter Siah
Dexter Siah

Reputation: 333

Positioning Flutter widgets off screen

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

wrong results image

This is how i expect it should look like (designed in adobe XD)

expected outcome

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: 9101

Answers (3)

Monasha
Monasha

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

Dexter Siah
Dexter Siah

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

Sang CH&#194;U VĂN
Sang CH&#194;U VĂN

Reputation: 11

You can use stack with overflow visible:

 Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    //using Positioned to control position
  ],
)

Upvotes: 1

Related Questions