Flutter - FloatingActionButton in the center

Question

Is it possible to make the FloatingActionButton in the centre instead of the right side?

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
      ],
    ),
    floatingActionButton: new FloatingActionButton(
      elevation: 0.0,
      child: new Icon(Icons.check),
      backgroundColor: new Color(0xFFE57373),
      onPressed: (){}
    )
  );
}

The

Answer 1

Try wrapping it in a Center widget or use a crossAxisAlignment of CrossAxisAlignment.center on your Column.

You should pick one part of your Column to be wrapped in a Flexible that will collapse to avoid overflow, or replace some or all of it with a ListView so users can scroll to see the parts that are hidden.

Artificiality

But where In floatingActionButton or in body? – The

I try in floatingActionButton propertie the new Center wrap the new FloatingActionButton, the button is approximately in the center of the screen, and not in the center at the bottom of the screen – The

Make it the last element of a Column. You can also use a crossAxisAlignment of CrossAxisAlignment.center on your Column instead – Artificiality

This answer is wrong! The floatingActionButton property of the Scaffold() widget is not in ANY way influenced by the mainAxisAlignment property of the Column() widget which is in the body property! Luckily... It would be very annoying if those two parts of the Scaffold() couldn't be managed separately. – Garland

Answer 2

I don't know if this was added since this question was first answered, but there's now floatingActionButtonLocation property on the Scaffold class.

It would work like this in your original question:

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

Also see the documentation:

• Scaffold class (search floatingActionButtonLocation): https://docs.flutter.dev/flutter/material/Scaffold-class.html
• ...and the FloatingActionButtonLocation class: https://docs.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

Collette

The provided links point to a site with an invalid certificate. – Yaekoyael

Answer 3

With the new flutter API you do that very easily just change the floatingActionButtonLocation property in the Scaffold to

FloatingActionButtonLocation.centerFloat

Example :

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

Himeji

Answer 4

Use the Property floatingActionButtonLocation of scaffold class.

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

Full Example:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(child: Center(child: Text('Hello World')),),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.camera, color: Colors.white, size: 29,),
        backgroundColor: Colors.black,
        tooltip: 'Capture Picture',
        elevation: 5,
        splashColor: Colors.grey,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

Coronado

Answer 5

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

Use this property with floatingActionButtonLocation property in Scaffold.

FloatingActionButton Flutter - More Details

Prater

Answer 6

You can use Container and Align widgets as below:

@override
Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(

      ),
      floatingActionButton: Container(
        padding: EdgeInsets.only(bottom: 100.0),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: FloatingActionButton.extended(
            onPressed: _getPhoneAuthResult,
            icon: Icon(Icons.phone_android),
            label: Text("Authenticate using Phone"),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

Sandler

Answer 7

Align(
                      alignment: Alignment.center,
                      child: Container(
                        child: FloatingActionButton(
                          hoverColor: Colors.black,
                          elevation: 10,
                          onPressed: () {},
                          backgroundColor: Colors.pink,
                          child: Icon(Icons.add,),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(Radius.circular(20.0))),
                        ),
                      ),
                    ),

Here I used "Align" widget to make the FloatingActionButton center. You can see it here.

Krahmer

Answer 8

after end of the floating action button widget, you can Use floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

For Example

   import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      title: "Camera App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Camera App"),
        ),
        body: Center(
          child: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image,
                alignment: Alignment.topLeft,
                ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          elevation: 50,
          hoverColor: Colors.red,
          autofocus: true,
          onPressed: () {
            imagepicker();
          },
          child: Icon(Icons.camera_alt),
          tooltip: 'Pick Image',
        ),
         floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }

  Future imagepicker() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }
}

Pyramidon

Answer 9

The above examples are great, but if you want to have full control over the exact location of the floating action button, you should wrap your FloatingActionButton widget with Align widget and use Alignment(x axis, y axis) to set the exact location.

Align(
  alignment: Alignment(0.0, 0.8), 
//control the location by changing the numbers here to anything between 1 and -1
  child: FloatingActionButton()
)

Monkeypot

Answer 10

Since Scaffold.floatingActionButton just asks for a Widget, you can wrap your FloatingActionButton with the standard classes for more control if the Scaffold.floatingActionButtonLocation property isn't enough (which already gives you many standard placements, that can also play nicely with your appBar or bottomNavigationBar).

Container is a classic component, but a little overkill given that it combines a variety of widgets.

As others mentioned, Align is handy when you want to position relative to the Align widget itself (which if unconstrained fills to its parent). It can take a variety of preset Alignment constants, or use the Alignment constructor to specify your own relative position, e.g. Alignment(0.0, 0.0) represents the center of the rectangle, (1,1) the bottom right corner, and (-1,-1) the upper left. However, the parent of your FAB is influenced by the Scaffold's floatingActionButtonLocation:, so one way to help take it into account is by setting it to FloatingActionButtonLocation.centerDocked, which when used with Align lets you think about positioning relative to the screen's center.

But maybe you like the basic positioning provided by floatingActionButtonLocation, but just want to shift the FAB by a known number of logical pixels, e.g. to compensate for other widgets on the screen. In that case wrapping in a Padding with the appropriate EdgeInsets should work fine.

Epagoge

Answer 11

By changing the logic to use crossAxisAlignment, the mainAxisAlignment and the Flexible the FloatingActionButton were centered at the bottom of the screen

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,       
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Flexible(
          child: new Container(
            padding: new EdgeInsets.only(bottom: 16.0),
            child: new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          )         
        )
      ],
    ), 
  );
}

The

Answer 12

For more freedom of alignment and more than 2 FAB use Stack

Stack(
      children: <Widget>[
        Center(
          child: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image,
                alignment: Alignment.topLeft,
                ),
          ),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: new FloatingActionButton(
              child: const Icon(Icons.skip_previous),
              onPressed: () {
              }),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: new FloatingActionButton(
              child: const Icon(Icons.skip_next),
              onPressed: () {
              }),
        ),
      ],
    )

Dairyman

Answer 13

I modified the code, now the button is in the bottom center but I do not know if it will always stay in the bottom, regardless of the size of the screen.

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Stack(
          alignment: new FractionalOffset(0.5, 1.0),
          children: <Widget>[
            new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          ],
        )
      ],
    ), 
  );
}

The

Answer 14

Depending on your design simply you can use persistentFooterButtons which accepts a list of widgets as children.

just like here for an example:

persistentFooterButtons: [
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    child: Align(
                      alignment: Alignment.center,
                      child: FloatingActionButton(
                        onPressed: (){
                            Navigator.push(context, MaterialPageRoute(builder: (context) => InstallationPage()),);
                        },
                        child: new Icon(Icons.add, color: SysColors.ICON_COLOR, size: 34.w,),
                      ),
                    ),
                ],
              )
            ],

Hinduism