Center a FloatingActionButton

Question

I am really stuck on a problem, where I am trying to center a FloatingActionButton, that is outside the body. The code currently looks like this:

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

The FutureBuilder is creating the camera view and the floatingActionButton is supposed to be the button, that takes a photo.

Every time I try to center it with alignment: Alignment.center, in the container, that also contains the height and width for the button, the button is not centred and doesn't have the height and size it was supposed to have.

The code at the top works fine but the button is in the bottom right corner.

Thanks in advance for all your answers!

Answer 1

You can achieve this by using the floatingActionButtonLocation property and set it to FloatingActionButtonLocation.centerFloat.

Check the code below, it works fine:

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

Output below: