如何在 Flutter 编程语言中为各种屏幕尺寸的设备在堆栈中安排一个按钮？ （颤动）

Question

enter image description here 上面是我试图在屏幕上排列的按钮的图像。

我是 flutter 的新手，我正在尝试在显示屏上安排一个具有可变屏幕尺寸的按钮，有人可以帮助我吗？这是我的容器，它在堆栈中。

[new Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.only(top: 120.0, left: 50.0),
               // margin: EdgeInsets.fromWindowPadding(),
                child: new RaisedButton(
                  padding: const EdgeInsets.all(10),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0)),
                  child: new Text(
                    'Sponsor A Run',
                    style: TextStyle(
                        fontSize: displayWidth(context) * 0.06,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  color: isButtonPressed
                      ? Colors.orange
                      : Colors.orange.withOpacity(0.4),
                  onPressed: () {
                    setState(() {
                      isButtonPressed = !isButtonPressed;
                    });
                  },
                ),
              ),][1]

Answer 1

所以我们可以使用 MediaQuery.of(context).size.height 和 MediaQuery.of(context).size.width 来获取屏幕尺寸的数据，我们可以只乘一个分数来放置小部件

class ClassName extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    final windowHeight = MediaQuery.of(context).size.height;
    final windowWidth = MediaQuery.of(context).size.width;
    return ...(
       child : Container(margin : EdgeInsets.only( top : windowHeight * 0.3, left : windowWidth * 0.2) //this will give the container the margin top of 30% the height in all devices, and we can do the same for the width property also
);

您还可以减去填充和前一个小部件的高度以对齐，这样会更好:)