flutter)如何让按钮位置根据屏幕大小自动调整？答案

【问题标题】：flutter)How can I make the button position automatically adjust according to the screen size?flutter)如何让按钮位置根据屏幕大小自动调整？
【发布时间】：2021-12-11 01:42:48
【问题描述】：

我正在用 Flutter 制作一个学习应用。

在我们的应用中，您必须在图片上放置一个按钮。

所以，使用图片上的位置，我把它变成了下面的图片。

      @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()),);
                },
              )
          ),//ㅂ

但是，这样做的问题是，当使用大屏幕手机时，按钮的位置会发生变化。

可以做些什么来防止这种情况发生？

【问题讨论】：

标签： flutter flutter-layout flutter-web flutter-animation

【解决方案1】：

按钮似乎总是在同一个地方。它应该与屏幕大小无关。

我怀疑你的问题在于文本的fontSize。

尝试删除fontSize:，它应该可以解决您的问题

编辑 1：

问题在于fit: StackFit.expand，它会强制按钮展开。您可以保留它，但将您的按钮包裹在 SizedBox

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

【讨论】：

您必须指定字体大小...！我试图删除样式，但问题仍然存在......只有字母变小......
我明白了。查看我编辑的答案
这种方法有一个问题。尺寸框必须正确放置以适合智能手机的尺寸。我该怎么办？
在宽高的情况下，位置根据手机的大小而变化。
使用此代码获取屏幕的宽度，然后您可以构建一个if 条件来决定您的stack 的坐标或您的字体大小width = MediaQuery.of(context).size.width;

【解决方案2】：

尝试获取屏幕的宽度和高度，然后用无线电计算。

【讨论】：