Flutter 居中调整晶圆厂尺寸

我正在尝试添加一个按钮到一个应用程序，它直接位于屏幕中央，也是一个自定义大小

通过测试，我可以做到其中一个，但我从来没有做到这两个。以下是我如何做到的：

我的main.dart文件始终保持不变：

import 'package:flutter/material.dart';
import './surpriseme.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink[300],
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "Test",
            style: TextStyle(
                fontSize: 35,
                color: Colors.pink[900]),
          ),
          leading: IconButton(
            icon: Image.asset('assets/images/SO.jpg'),
            onPressed: () {},
          ),
        ),
        body: SurpriseMe(),
      ),
    );
  }
}

下面是如果我想在中间放一个按钮的样子：

import 'package:flutter/material.dart';

class SurpriseMe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 FloatingActionButton(
                  splashColor: Colors.pink[900],
                 // color: Colors.pink[300],
                  child:  Text(
                    "Surprise me!",
                    style: TextStyle(fontSize: 20.0, color: Colors.pink[900]),
                  ),
                  onPressed: () {},

                ),
                new Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                ),
              ],
            ),
          ),
        ));
  }
}

导入“包装：颤振/材料.省道”；
类惊奇扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
浮动操作按钮(
splashColor:颜色。粉红色[900]，
//颜色：颜色。粉红色[300]，
子：文本(
“给我个惊喜！”，
样式：TextStyle（fontSize:20.0，颜色：Colors.pink[900]），
),
按下：（）{}，
),
新填料(
填充：常量边集。对称（垂直：10.0），
),
],
),
),
));
}
}

有什么方法可以同时实现这两个目标吗

---

干杯。

要做到这一点，您可以使用中心小部件和Scaffold的floatingActionButton属性：

Scaffold(
  floatingActionButton: Center(
    child: Container(
      width: 100,
      height: 100,
      child: FloatingActionButton(
        child: Icon(Icons.add, size: 50,),
        onPressed: () {},
      ),
    ),
  ),
);

---

是的，这是可能的，请尝试下面的代码，它可以完美地工作：

如果使用以下方法，您将能够为按钮提供自定义高度和自定义宽度

 // the align widget centers the button to the center of the screen
    return Align(
      alignment: Alignment.center,
      // the inkwell widget makes it clickable and gives it a splash color
      child: InkWell(
        onTap: () => print('Stop tapping me...'),
        splashColor: Colors.pink[900],
        child: Container(
          // set your desired height here
          height: 80,
          // set your desired width here
          width: 80,
          // decoration property gives it a color and makes it round like a floating action button
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.pink[300],
          ),
          // add your desired padding here
          padding: const EdgeInsets.symmetric(vertical: 10.0),
          // add the child element
          child: Center(
            child: Text(
              'Surprise Me',
              // style of the text
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, color: Colors.pink[900],),
            ),
          ),
        ),
      ),
    );

输出：

---

我希望这有帮助：

尝试用

列

包装它，并使用

MainAxisAlignment.center

谢谢！看起来真不错！唯一的问题是，当它被点击时，它周围会显示一个正方形。您知道如何排序吗？将inkwell小部件的飞溅颜色设置为透明。那将非常有效。

 // the align widget centers the button to the center of the screen
    return Align(
      alignment: Alignment.center,
      // the inkwell widget makes it clickable and gives it a splash color
      child: InkWell(
        onTap: () => print('Stop tapping me...'),
        splashColor: Colors.pink[900],
        child: Container(
          // set your desired height here
          height: 80,
          // set your desired width here
          width: 80,
          // decoration property gives it a color and makes it round like a floating action button
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.pink[300],
          ),
          // add your desired padding here
          padding: const EdgeInsets.symmetric(vertical: 10.0),
          // add the child element
          child: Center(
            child: Text(
              'Surprise Me',
              // style of the text
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, color: Colors.pink[900],),
            ),
          ),
        ),
      ),
    );