如何在Flutter中自定义位置按钮?

时间:2020-06-12 01:22:06

标签: flutter dart flutter-layout

我试图在Flutter Web应用程序中的自定义位置放置一个按钮,但我不能。 这是我的代码:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context)
        .size; // This method will give us the height and width of our device screen
    return Container(
        height: size.height,
        width: size.width,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/687.jpg"), fit: BoxFit.cover)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              color: Colors.black,
              onPressed: () {},
              child: Text("Login"),
              textColor: Colors.white,
            ),
          ],
        ));
  }
}

这里是图片展示我想要的风俗习惯: enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用设置为全宽度的容器,在其中添加边距并放置按钮。边距帮助可将按钮调整到任意位置。

或者您也可以使用Positioned Widget

示例:

new Positioned(
   left: MediaQuery.of(context).size.width/2+100,
   top: MediaQuery.of(context).size.height/2,
   child: new Container(
     width: 100.0,
     height: 80.0,
     decoration: new BoxDecoration(color: Colors.red),
     child: new Text('hello'),
    )