Material desing sugiere que utilicemos un floating action button si existe una acción principal clara. En Flutter podemos incluirlo de forma muy sencilla.
El Widget Scaffold que utilizamos como base en nuestras pantallas tiene una propiedad pensaba para insertar este tipo de botón, su propio nombre lo indica, «floatingActionButton». Dentro debemos utilizar un Widget FloatingActionButton, es un widget específico para esto que nos permitirá mostrar y customizar este elemento.
A continuación mostramos un ejemplo muy sencillo de una pantalla que incluiría un floating action button al que le indicaremos su color de fondo, un icono y una función que se debe ejecutar cada vez que se presione sobre él.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My app title',
home: Scaffold(
appBar: AppBar(title: Text('My app bar title')),
body: Center(child: Text('Content!')),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
child: Icon(Icons.add),
onPressed: () {
print('fab pressed!');
})
)
);
}
}
En este ejemplo usamos las siguientes propiedades del widget:
- child: Indicamos qué widget contiene el floating action button. Normalmente será un Icon, como en este ejemplo. Utilizamos el icono de «add», la típica cruz que se usa para añadir un nuevo elemento.
- backgroundColor: Se usa para indicar un color de fondo. No es necesario ponerlo, si no lo hacemos se usará el color accent establecido en el tema de la app
- onPressed: Ésta es la propiedad que le da funcionalidad al botón. Indicamos la función que se ejeutará al pulsar sobre él. En este caso simplemente mostramos un texto por consola.
También podéis ver el código de este ejemplo de floating action button en mi github.