How to align widget inside stack according to different screen sizes in flutter

Question

Hi im stuck in a small problem. I want to align my Floating button on the screen inside a stack widget. What I am not able to do is align it with dynamically according to the screen size of different mobile phones. If I align it to the desired location in my emulator, when u run it on my device it disperse from its original position. I have used Positioned() widget with top: , right:, etc properties, have also tried Container() with margin: property, and Align() widget as well but nothing seems to work. below are the screenshots that might help and code as well.

return Scaffold(
  body: Stack(
    children: <Widget>[
      ....
     Container(
        margin: EdgeInsets.only(bottom: 277, right: 10),
        alignment: Alignment.bottomRight,
        child: showFloatingBtn2 ? SpeedoMeterFloatingBtn() : SizedBox(),
      ),
    ],
  ),
);

If you see image1 you would see red floating button out of position, My problem is when I position it in place like in image 2 on emulator, it goes out of alignment on my device and vice versa. I can't get my head around on how to fix this. any sort of help would be greatly appreciated. Thanks in advance.

NOTE: Image1 is with bottom:227 on emulator, and image2 is with bottom:277 on emulator.

Solution

you can use the screen util package https://pub.dev/packages/flutter_screenutil

it's the greatest package to handle multiple screens it simply makes all screen the same resoulation and then with simple extenstions you can specify the width height or text size and it will scale to diffrent screens no problem [maybe minor problems ]

you only have to initialize it in your build method [for every route i think] like that

//default value : width : 1080px , height:1920px , allowFontScaling:false

ScreenUtil.init(context);

i recommend setting dart sdk to 2.7 in your pubspec.yaml to use extension functions

environment:
  sdk: ">=2.7.0 <3.0.0"

to be able to do this

Container(
width: 50.w,
height:200.h
)

read more at the documentation and try it it's awsome

Comments

[Fahad Hussain]

Thankyou so much for your help. Unfortunately I am trying to use flutter built-in techniques for the moment in my application in order to keep it as simple as possible. But I will make sure to go through your plugin and use it somewhere in future development. I appreciate it. Thanks.

[Fahad Hussain]

I have tried this way but unfortunately it doesn't seem to work for me. although I have used Align in many other ways as well, this was a new one to me. But I guess this method doesn't seem to work. But thank you for teaching me something new. Ill make sure to use this in my future development.

[Fahad Hussain]

I have tried this way but unfortunately it doesn't seem to work for me. although I have used Align in many other ways as well, this was a new one to me. But I guess this method doesn't seem to work. But thank you for teaching me something new. Ill make sure to use this in my future development.