将 FloatingActionButton 居中

Question

我真的被一个问题困住了，我试图让一个 FloatingActionButton 居中，它在 body 之外。目前的代码如下所示：

@override   Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeCameraControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_cameraController);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
        floatingActionButton: Container(
          height: buttonsize,
          width: buttonsize,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {

              },
              child: Icon(Icons.camera_alt),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              shape: CircleBorder(side: BorderSide(color: Colors.white.withOpacity(0.25),width: 2.0)),
            ),
          ),
        ),
      );
}

FutureBuilder 正在创建相机视图，而 floatingActionButton 应该是拍摄照片的按钮。

每次我尝试将它与容器中的 alignment: Alignment.center, 居中，其中还包含按钮 的高度和宽度 ，按钮不居中并且不'具有它应该具有的高度和尺寸。

顶部的代码工作正常，但按钮位于右下角。

提前感谢您的所有回答！

Answer 1

只需添加到 Sage 的评论中，试试这个：

Scaffold(
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body:...
),

Answer 2

您可以创建一个类似 FAB 按钮的自定义圆形按钮，并将其对齐到您想要的任何位置

 body: Container(
        child: MaterialButton(
          onPressed: () {},
          color: Colors.pink,
          textColor: Colors.white,
          child: Icon(
            Icons.camera_alt,
            size: 24,
          ),
          padding: EdgeInsets.all(16),
          shape: CircleBorder(),
        ),
      ),

Answer 3

您可以通过使用 floatingActionButtonLocation 属性并将其设置为 FloatingActionButtonLocation.centerFloat 来实现此目的。

检查下面的代码，它工作正常：

@override   Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeCameraControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_cameraController);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      // use this property to center the floating action button
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Container(
          height: buttonsize,
          width: buttonsize,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {

              },
              child: Icon(Icons.camera_alt),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              shape: CircleBorder(side: BorderSide(color: Colors.white.withOpacity(0.25),width: 2.0)),
            ),
          ),
        ),
      );
}

输出如下：

将 FloatingActionButton 居中

Center a FloatingActionButton

alignment

dart

floating-action-button

flutter