Floating-Action-Button in Flutter

Er ist uns allen bekannt und nicht mehr wegzudenken. Er repräsentiert die wichtigste Aktion auf einer Seite. Wer Flutter lernen möchte, sollte also wissen, wie man den Floating Action Button erstellt und was er eigentlich alles kann.

Einfaches Erstellen eines Floating-Action-Buttons:

Der Floating-Action-Button wird in Flutter ganz einfach als floatingActionButton Parameter im Konstruktor des Scaffolds implementiert.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Builder(
      builder: (BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Button pressed $_counter times'),
              RaisedButton(
                  child: Text('Counter to Zero'), onPressed: _counterToZero),
            ],
          ),
        );
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}

Mach ihn bunt!

Farblich gestalten kann man beim Floating-Action-Button in Flutter sowohl den Container mit backgroundColor, als auch das Symbol mit foregroundColor.

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Icon(Icons.add),
  foregroundColor: Colors.yellow,
  backgroundColor: Colors.red,
),

Button in der Navigationbar

Hat man in seiner App eine Navigationbar implementiert, macht es Sinn den Floating-Action-Button in der Navigationbar anzudocken, um keine unnötige Bildschirmfläche zu verschwenden. Dazu wird einfach als weiterer Parameter im Scaffold Konstruktor die floatingActionButtonLocation mitgegeben. Hier kann man frei experimentieren. Ersetz doch mal end- mit center- oder -docked mit -float, falls die Bildschirmfläche egal ist. Oder probier es mal mit startTop oder endTop.

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Icon(Icons.add),
  foregroundColor: Colors.yellow,
  backgroundColor: Colors.red,
),
bottomNavigationBar: BottomAppBar(
  color: Colors.yellow,
  child: Container(height: 50.0),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,

Zu rund!

Wir kennen ihn alle rund, aber das heißt nicht, dass es so bleiben muss. Bring doch mal ein bisschen Veränderung und neue Formen in die Sache. Ganz einfach mit dem shape Parameter (Übrigens hat der Floating-Action-Button in Flutter auch einen elevation Parameter 😉)

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Icon(Icons.add),
  foregroundColor: Colors.yellow,
  backgroundColor: Colors.red,
  elevation: 0.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
),
bottomNavigationBar: BottomAppBar(
  color: Colors.yellow,
  child: Container(height: 50.0),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Ein Symbol? Warum kein Text?

Klar kann man auch in den normalen Floating-Action-Button einen Text integrieren, sieht nur blöd aus. Dann doch lieber einen extended Floating-Action-Button. Hier gibt es dann sowohl einen icon Parameter, als auch einen label Parameter. Jetzt passt sich der Button auch automatisch an die Länge des Textes an.

floatingActionButton: FloatingActionButton.extended(
  icon: Icon(Icons.add),
  label: Text('Press me!'),
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  foregroundColor: Colors.yellow,
  backgroundColor: Colors.red,
  elevation: 0.0,
),
bottomNavigationBar: BottomAppBar(
  color: Colors.yellow,
  child: Container(height: 50.0),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Ein Beispiel für einen schönen Floating Action Button in Flutter findet ihr hier: https://github.com/coodoo-io/flutter-floating-action-button.