Construir formularios en Flutter es una de las habilidades más útiles cuando trabajas con apps móviles, porque toda interacción real con el usuario empieza por capturar datos. Aquí aprenderás a crear un formulario para registrar recetas usando un Floating Action Button, un modal bottom sheet y widgets personalizadas para los campos.

La idea es simple: tocar un botón flotante, abrir un panel inferior y mostrar un formulario estilizado con la paleta de la app. Y lo interesante es que cada pieza es reutilizable.

¿Cómo se crea un Floating Action Button en Flutter?

El FloatingActionButton es la widget que da ese efecto elevado y circular típico de las apps de Material Design. Lo usamos como punto de entrada al formulario [01:00].

Para configurarlo necesitas tres cosas básicas:

• La propiedad onPressed, que define la función a ejecutar al tocarlo.
• Un color de fondo, en este caso naranja para mantener la paleta.
• Un Icon blanco que contraste con el fondo.

Dejas el onPressed vacío al inicio y luego conectas la función que abre el formulario. Así separas la apariencia de la lógica.

¿Qué hace el onPressed en un FloatingActionButton? Es el callback que se ejecuta cuando el usuario toca el botón. Allí defines la acción, como abrir un modal o navegar a otra pantalla.

¿Cómo mostrar un formulario con showModalBottomSheet?

Para que el formulario aparezca desde abajo, declaras una función de tipo Future<void> llamada showButton que recibe un BuildContext y retorna un showModalBottomSheet [02:15].

Dentro del modal pasas un Container con altura de 500 píxeles y color blanco. El detalle clave es el ancho: por defecto el contenedor no ocupa toda la pantalla, así que usas MediaQuery.of(context).size.width para que se extienda completo [03:30].

Luego, en el onPressed del botón flotante, llamas a showButton(context) pasándole el contexto actual. Sin ese contexto, Flutter no sabe en qué punto del árbol de widgets ubicar el modal.

¿Cómo se estructura una clase de formulario reutilizable?

La buena práctica es crear una clase aparte, en este caso RecipeForm, como StatelessWidget para mantener el código organizado [05:00].

Dentro retornas un widget Form con una propiedad fundamental: key. El formKey permite acceder al estado del formulario y validar todos los campos desde un solo punto.

La estructura interna sigue este orden:

1. Un Padding con EdgeInsets.all(8) para dar respiración al contenido.
2. Una Column con crossAxisAlignment: CrossAxisAlignment.start para alinear desde arriba.
3. Un Text de título como "A new Recipe" con TextStyle en color naranja y fontSize: 24.

Para mostrar este formulario dentro del modal, simplemente reemplazas el Container de prueba por RecipeForm().

¿Para qué sirve el formKey en un formulario de Flutter? Es la llave que conecta el Form con su estado. Te permite validar campos, guardar valores y controlar el formulario desde fuera de los widgets hijos.

¿Cómo crear un widget personalizado para campos de texto?

Aquí viene lo interesante: en vez de repetir estilos en cada campo, creas un método buildTextField que recibe parámetros y retorna un TextFormField configurado [07:20].

El widget recibe un String label requerido y aplica una decoración consistente. Esto te ahorra decenas de líneas cuando tienes varios campos: nombre de receta, autor, ingredientes, contenido.

La decoración se arma con InputDecoration e incluye:

• labelText con el texto recibido por parámetro.
• labelStyle con fontFamily: 'Quicksand' y color naranja.
• border con OutlineInputBorder y BorderRadius.circular(10) para esquinas redondeadas.
• focusedBorder con BorderSide naranja, mismo radio circular y width: 1.

La propiedad focusedBorder es la que crea ese efecto donde el label sube y se integra al borde cuando tocas el campo. Es un detalle pequeño que hace que la app se sienta pulida.

¿Cómo usar el widget personalizado en el formulario?

Dentro de la Column del RecipeForm, agregas un SizedBox(height: 16) para separar el título del primer campo [10:45]. Luego llamas a buildTextField(label: 'Recipe name') y listo.

A partir de ahí, replicas la llamada cambiando solo el label para crear los campos de autor, imagen, ingredientes y contenido. Una sola widget, múltiples campos coherentes.

Conceptos clave que aparecen en el flujo

Algunos términos que vale la pena tener claros mientras construyes este formulario:

• MediaQuery: herramienta para obtener dimensiones de pantalla, útil para hacer widgets responsivos [03:30].
• Future void: tipo de retorno asíncrono que no devuelve valor, ideal para funciones que solo ejecutan acciones como abrir modales [02:15].
• OutlineInputBorder: widget para estilizar el borde exterior de un campo de texto en Flutter [09:00].
• CrossAxisAlignment.start: alinea los hijos de una columna al inicio del eje vertical [05:30].

¿Qué campo agregarás primero a tu formulario de recetas? Cuéntame en los comentarios cómo personalizaste tu buildTextField.