FloatingActionButton

Add a floating action button with FloatingActionButton.

What is FloatingActionButton?

FloatingActionButton is a round floating button at the bottom right of a Scaffold. A callback is given to onPressed and usually an Icon to child. It is wired to the floatingActionButton parameter of Scaffold.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

onPressed and child

The onPressed parameter of FloatingActionButton sets the callback to be called when the button is pressed. The child parameter is the widget shown inside the button; most often an Icon is given. If onPressed is not given, the button becomes disabled.

Exercise Add a FloatingActionButton

Write a function add that prints Eklendi. In main call add. Add a body and a FloatingActionButton to the Scaffold; set the FAB's onPressed to add and child to Icon(Icons.add).

Show example solution

import 'package:flutter/material.dart';

void ekle() {
  print('Eklendi');
}

void main() {
  ekle();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Gorev')),
        floatingActionButton: FloatingActionButton(
          onPressed: ekle,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Test yourself

FloatingActionButton is wired to Scaffold with which parameter?
- floatingActionButton
- body
- appBar
- drawer
Show answer

floatingActionButton — FloatingActionButton is wired to the floatingActionButton parameter of Scaffold; body, appBar or drawer are not for this purpose.

Add the floatingActionButton parameter

Scaffold(
  body: Center(child: Text('Gorev')),
  ____: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Show answer

Scaffold(
  body: Center(child: Text('Gorev')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

FAB parts

FloatingActionButton

Round floating button
onPressed

Callback called on press
child

Widget inside the button
floatingActionButton

Scaffold's parameter

Next lesson: Drawer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies