Flutter: FloatingActionButton (FAB) verwenden

Der FloatingActionButton (FAB) ist ein runder Button, der die wichtigste Aktion Ihrer App darstellt (erstellen, teilen, suchen usw.) und meist unten rechts auf dem Bildschirm sitzt. Er ist eines der prägendsten Elemente des Material Design.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

💡 Falls das Beispiel oben nicht lädt, können Sie es über DartPad in einem neuen Tab ausführen.

Grundlegende Verwendung

Der FAB wird üblicherweise dem Parameter floatingActionButton des Scaffold-Widgets zugewiesen.

Scaffold(
  appBar: AppBar(title: Text('FAB Example')),
  body: Center(child: Text('Hello Flutter')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB clicked!');
    },
    child: Icon(Icons.add),
  ),
)

Anpassungsmöglichkeiten

Farbe, Form und weitere Eigenschaften des FAB lassen sich problemlos ändern.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.download),
  backgroundColor: Colors.purple, // Button color
  foregroundColor: Colors.white, // Icon color
  elevation: 8.0, // Shadow amount
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // Rounded square
  ),
  tooltip: 'Download', // Text shown on long press
)

Mini-FAB

Wenn ein kleinerer Button nötig ist, können Sie die Eigenschaft mini verwenden.

FloatingActionButton(
  mini: true, // Small sized FAB
  onPressed: () {},
  child: Icon(Icons.reply),
)

FloatingActionButton.extended

Wenn Sie neben dem Symbol auch Text anzeigen möchten, sollten Sie die Variante extended einsetzen.

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('New Task'),
  backgroundColor: Colors.green,
)

Positionierung (FloatingActionButtonLocation)

Über den Parameter floatingActionButtonLocation des Scaffold können Sie die Position des FAB auf dem Bildschirm ändern.

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // Bottom center, integrated with BottomNavigationBar
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(), // Creates a notch for the FAB
    child: Container(height: 50.0),
  ),
  // ...
)

Häufig verwendete Positionen:

• endFloat (Standard: unten rechts)
• centerFloat (unten mittig)
• startFloat (unten links)
• endDocked, centerDocked (zur Verwendung mit einer BottomAppBar)

Mehrere FABs verwenden

Wenn Sie mehrere FABs auf einer Seite brauchen, können Sie sie in eine Column oder Row packen. Dabei müssen Sie jedem FAB einen eindeutigen heroTag geben, sonst erhalten Sie einen Fehler.

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      heroTag: "btn1",
      onPressed: () {},
      child: Icon(Icons.refresh),
    ),
    SizedBox(height: 10),
    FloatingActionButton(
      heroTag: "btn2",
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ],
)

Zusammenfassung

• FloatingActionButton: Button für die wichtigste Aktion.
• mini: Verkleinert den Button.
• extended: Enthält Symbol und Text.
• heroTag: Muss bei mehreren FABs eindeutig sein.
• Position: Wird über das Scaffold gesetzt.

Der FAB ist ein hervorragendes Mittel, um die häufigste Nutzeraktion hervorzuheben.