flutter)How can I make the button position automatically adjust according to the screen size?

Question

I'm making a learning app with flutter.

In our app, you have to put a button over the picture.

So, using positioned on the picture, I made it like the picture below.

      @override
  Widget build(BuildContext context){
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image(
              image: AssetImage("assets/oral_structure.png"),
              fit: BoxFit.fitWidth
          ),
          Positioned(
              top:385, left:17,
              child: FlatButton(
                child: Text('ㅂ', style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold)),
                shape: CircleBorder(),
                onPressed: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
                },
              )
          ),//ㅂ

However, the problem with this is that the position of the buttons changes when using a phone with a large screen.

What can be done to prevent this?

Solution

The button seems always in the same place. It should be independent of screen size.

I suspect your problem is rather with the fontSize of the text.

Try to remove the fontSize:, it should fix your problem

EDIT 1:

the problem is with fit: StackFit.expand, that forces the button to expand. You can keep it but wrap your button inside a SizedBox

const SizedBox(
  width: 200.0,
  height: 100.0,
  child: FlatButton(// your code here...),
)

Comments

[eno2]

You have to specify the font size...! And I tried to remove the style, but the problem still remains...Only the letters get smaller...

[Canada2000]

I understand. See my edited answer

[eno2]

There is one problem with this method. The size box must be properly positioned to fit the size of the smartphone. What should I do?

[eno2]

In the case of width and height, the position changes according to the size of the phone.

[Canada2000]

Use this code to get the width of your screen, then you can build an if condition to decide on the coordinates of your stack or your font size width = MediaQuery.of(context).size.width;

[eno2]

Thank you so much.But I don't understand what you're saying to bring the if conditions. Now, we are using containers to place container boxes as "padding. EdgeInsets.only (top: MediaQuery.of)Size.height * 0.57, left: 0)" I tried to exclude the size of the app bar, and I also tried that method, but I don't think this method. If it's a condition, what do you mean by using it? For your information, the current height and width are 60.

[Canada2000]

an example of condition could be if (MediaQuery.of(context).size.width > 200) {_fontSize =10; _positionedLeft = 20} else ...

[eno2]

I'm sorry I didn't understand. I don't know why they write if conditional sentences... And is the coordinate in the if conditional statement the coordinate of the button on the figure? In the code above, the if condition can be entered between "height: 200," and "flatbutton."..I'm curious...