En este caso traigo más tipos de botones de Material 3, el widget FloatingActionButton que son botones flotantes utilizados generalmente dentro de un widget Scaffold en su propiedad floatingActionButton .
FloatingActionButton
Como vimos en el resumen son botones de acción flotantes que tienen in contenedor y un ícono como propiedades importantes. Se utiliza de forma recurrente dentro de pantallas para realizar acciones importantes y constructivas como (Crear, Compartir, Iniciar proceso, etc), que por lo regular van a otra pantalla o abren un modal.
Su ubicación por lo general está en la parte inferior de la pantalla aunque se puede configurar también para tenerlo en la parte superior.
Es recomendable por los desarrolladores que se utilice solo un FloatingActionButton por pantalla, pero en caso de usar varios se debe configurar la propiedad heroTag con un valor único para evitar que se genere una excepción.
Para deshabilitar un botón flotante basta con enviar nullen la propiedad onPressed .
Evitar usar FloatingActionButton para acciones secundarias (Eliminar, Descargar, etc).
Extended FloatingActionButton
Los botones de acción flotante extendidos también son utilizados para realizar acciones primarias. Es recomendable utilizarlo en la acción más importante de la pantalla como Agregar. Estos tipos de botones flotantes además de tener un ícono, tienen un texto para acompañar el nombre de la acción.
Constructores
- FloatingActionButton: constructor principal de los botones de acción flotantes. Internamente este widget maneja una propiedad privada para manejar el tipo que se llama _FloatingActionButtonType que es un enum con los valores de cada constructor, en este caso sería
_FloatingActionButtonType.regular. - FloatingActionButton.extended: Constructor principal de los botones de acción flotante extendidos, con un ícono opcional y un texto requerido. El tipo de botón es
_FloatingActionButtonType.extended. - FloatingActionButton.large: constructor para botones de acción flotante largo. El tipo de botón es
_FloatingActionButtonType.large. - FloatingActionButton.small: constructor para botones flotantes pequeños, si característica para distinguirlo es que la propiedad
miniestrue. El tipo de botón es_FloatingActionButtonType.small.
Propiedades destacadas
- autofocus: propiedad de tipo booleano que si es true por defecto hace que el foco esté en el botón.
- backgroundColor: propiedad en la que podemos cambiar el color de fondo del botón. Es de tipo Color.
- child: es el widget hijo donde por lo general va un ícono. Es de tipo Widget.
- elevation: Es la elevación que tendrá el FloatingActionButton con respecto a el widget padre. Es de tipo double.
- foregroundColor: propiedad en la que podemos cambiar el color del ícono o texto dentro del botón. Es de tipo Color.
- heroTag: propiedad para distinguir un botón de otro, cuando hay más de uno en una misma pantalla. es de Tipo Object.
- mini: propiedad de tipo booleano con la que podemos controlar el tamaño del botón, en caso de ser
truequiere decir que es un botón pequeño, por defecto está enfalse. - onPressed: propiedad que es una función o callback que se activa cuando se presiona el botón y ejecuta una acción. Es de tipo VoidCallback.
- shape: propiedad que indica la forma que va tener el botón. Hay diferentes formas que se pueden usar pero deben ser de tipo ShapeBorder.
- tooltip: propiedad donde se puede colocar un texto para describir la acción del botón. Es de tipo String.
Ejemplos
import 'package:flutter/material.dart';
class FloatingButtonScreen extends StatefulWidget {
const FloatingButtonScreen({super.key});
@override
State<FloatingButtonScreen> createState() => _FloatingButtonScreenState();
}
class _FloatingButtonScreenState extends State<FloatingButtonScreen> {
String text = '';
ShapeBorder? shape;
Color? color;
bool enabled = false;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Scaffold(
appBar: AppBar(
title: const Text('Floating Buttons Screen'),
),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: [
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
FloatingActionButton.small(
heroTag: 'btn1',
foregroundColor: colorScheme.onSecondary,
backgroundColor: colorScheme.secondary,
child: const Icon(Icons.play_arrow_rounded),
onPressed: () => setState(() {
text = text == 'Small' ? '' : 'Small';
}),
),
const SizedBox(
height: 10,
),
const Text('Small'),
],
),
Column(
children: [
FloatingActionButton(
heroTag: 'btn2',
foregroundColor: colorScheme.onTertiaryContainer,
backgroundColor: colorScheme.tertiaryContainer,
child: const Icon(Icons.add),
onPressed: () => setState(() {
text = text == 'Normal' ? '' : 'Normal';
}),
),
const SizedBox(
height: 10,
),
const Text('Normal'),
],
),
Column(
children: [
FloatingActionButton.extended(
heroTag: 'btn3',
icon: const Icon(Icons.pause_rounded),
label: const Text('Pause'),
onPressed: () => setState(() {
text = text == 'Extended' ? '' : 'Extended';
}),
),
const SizedBox(
height: 10,
),
const Text('Extended'),
],
),
Column(
children: [
FloatingActionButton.large(
heroTag: 'btn4',
foregroundColor: colorScheme.surface,
backgroundColor: colorScheme.primary,
child: const Icon(Icons.stop_rounded),
onPressed: () => setState(() {
text = text == 'Large' ? '' : 'Large';
}),
),
const SizedBox(
height: 10,
),
const Text('Large'),
],
),
],
),
const SizedBox(
height: 100,
),
if (text.isNotEmpty)
Center(
child: Text(
'$text button',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(
height: 20,
),
if (enabled)
FloatingActionButton.large(
heroTag: 'btn5',
backgroundColor: colorScheme.tertiaryContainer,
onPressed: () {},
child: const Text('Enabled'),
)
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: color,
shape: shape,
onPressed: () {
setState(() {
enabled = !enabled;
shape = shape.runtimeType == const StadiumBorder().runtimeType
? null
: const StadiumBorder();
color = color == colorScheme.tertiaryContainer
? colorScheme.inversePrimary
: colorScheme.tertiaryContainer;
});
},
child: const Icon(Icons.add),
),
);
}
}
Código fuente
Conclusión
Para terminar, vimos otros tipos de botones que nos brinda Material para utilizar en Flutter en las acciones principales de una pantalla.
¡¡¡Gracias por leer este artículo!!!
Referencias
- https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
- https://m3.material.io/components/floating-action-button/overview