FloatingActionButton
- Flutter course
- Beginner
- Lesson 83/99
- 4 min
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.
Practice 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).
Starter code
import 'package:flutter/material.dart';
// ekle fonksiyonu yaz: "Eklendi" yazdirsin
void main() {
// ekle'yi cagir
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 ekle
),
);
}
}Sample 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),
),
),
);
}
}Expected output
Eklendi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 FloatingActionButton is wired to Scaffold with which parameter?
- floatingActionButton Correct answer
- body
- appBar
- drawer
Explanation: FloatingActionButton is wired to the floatingActionButton parameter of Scaffold; body, appBar or drawer are not for this purpose.
2 Add the floatingActionButton parameter
Scaffold(
body: Center(child: Text('Gorev')),
____: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Scaffold(
body: Center(child: Text('Gorev')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Explanation: To wire a FloatingActionButton to Scaffold, the floatingActionButton parameter is used; fab, actionButton or floating are not valid parameter names.
3 FAB parts
| Term | Meaning |
|---|---|
FloatingActionButton |
Round floating button |
onPressed |
Callback called on press |
child |
Widget inside the button |
floatingActionButton |
Scaffold's parameter |