Botones en Flutter: Guía completa de Button Widgets y Estilos

En la entrada anterior hablamos sobre cómo instalar Flutter y crear nuestra primera aplicación, qué IDEs podemos emplear —básicamente Android Studio y/o Visual Studio Code— y también dimos una introducción al mundo de los widgets en Flutter creando una tarjeta (Card) con contenido, texto e imágenes, que son widgets también. Si quieres repasarlo, puedes ir al siguiente enlace:

Primeros pasos con Flutter desde cero: Mi primera aplicación.

Hoy vamos a seguir trabajando con Flutter, pero esta vez nos enfocaremos en un elemento indispensable en cualquier interfaz: el botón. En Flutter, los botones son widgets especializados para procesar acciones del usuario, y encajan perfectamente con los Card que vimos anteriormente. Conocer los distintos tipos de button widgets en Flutter te permitirá elegir el adecuado según el contexto y diseño de tu aplicación.

Los botones en Flutter: tipos y cuándo usar cada uno

Flutter, como framework moderno y en constante evolución, nos ofrece una gran variedad de flutter buttons listos para usar en nuestras aplicaciones. En esta entrada te presento los principales tipos de botones que tenemos disponibles y cómo puedes aprovecharlos. Existen otros botones más específicos, como el ButtonBar, pero no lo trataremos aquí al funcionar más como un contenedor de botones que como un botón independiente.

A continuación te presento los botones más interesantes que puedes emplear en tu aplicación junto con un resumen práctico de cada uno. Lo ideal es que tomes este contenido como referencia y que tú mismo pruebes los botones en tus proyectos, explorando todas las propiedades que puedes configurar y no solo las que menciono aquí.

FloatingActionButton: Botón de Acción Flotante en Flutter

El primer botón que veremos es el famoso Floating Action Button (FAB), un elemento icónico del Material Design que podemos implementar fácilmente en Flutter mediante el widget FloatingActionButton:

 FloatingActionButton(    child: Icon(Icons.access_time),    elevation: 50.0,    backgroundColor: Colors.amber,  ),

Con este widget creamos un botón de acción flotante; podemos definir un color de fondo mediante backgroundColor —como el suave anaranjado del ejemplo—, asignarle un ícono con la propiedad child e incluso ajustar la elevation para controlar el sombreado, un aspecto fundamental en el Material Design.

Recuerda que en Flutter todos los elementos de la interfaz son widgets. El FloatingActionButton no es la excepción: no se posiciona automáticamente en una esquina de la pantalla como en Android nativo, sino que debemos ubicarlo nosotros, por ejemplo, mediante la propiedad floatingActionButton del Scaffold.

Para manejar la acción al presionar cualquier botón en Flutter, utilizamos la propiedad onPressed. Veamos un ejemplo básico con un RaisedButton:

RaisedButton(
 child: Text("Back"),
 onPressed: () => Navigator.pop(context),
)

La propiedad onPressed está disponible en todos los botones de Flutter. Para conocer todas las propiedades específicas de cada tipo de botón, puedes consultar la documentación oficial o aprovechar el autocompletado de Android Studio o Visual Studio Code.

RaisedButton en Flutter: el botón clásico con relieve

El RaisedButton es el botón clásico con relieve en Flutter, equivalente al Button por defecto que conocemos en Android nativo. Permite personalizar propiedades como el color de fondo (color), el efecto visual al presionarlo (splashColor) y, por supuesto, el texto mediante un widget Text:

RaisedButton( disabledColor: Colors.amber, child: Text("Raised Button"), splashColor: Colors.amber, color: Colors.blueAccent, onPressed: ()  {   print("Hola Raised Button") }, ),

En el ejemplo anterior puedes ver varias propiedades en acción, aunque no son todas las disponibles. Definimos el color del botón con color, el texto mediante un widget Text, el color del splash y una función anónima para el evento clic en onPressed. Para obtener la lista completa de propiedades, consulta la documentación oficial.

FlatButton en Flutter: botón plano sin fondo

El FlatButton es un botón sencillo y sin relieve, similar al estilo de los botones en iOS. Es ideal cuando quieres una acción discreta que no llame demasiado la atención visual. Puedes modificar aspectos como la tipografía, su color y tamaño; pero fíjate que, a diferencia de otros botones, el FlatButton no tiene color de fondo por defecto:

FlatButton(    child: new Text('Flat Button'), )

MaterialButton en Flutter: botón para Material Design

El MaterialButton es el botón diseñado específicamente para seguir las directrices del Material Design de Google. Es la norma actual para aplicaciones Android modernas. Con pocas líneas de código puedes crear un botón con aspecto profesional y consistente:

MaterialButton(
    minWidth: 200.0,
    height: 40.0,
    onPressed: () {},
    color: Colors.lightBlue,
    child: Text('Material Button', style: TextStyle(color: Colors.white)),
  ),

Con este código obtenemos un botón azul que incluye el característico efecto ripple (onda) del Material Design. Prácticamente a todos los botones les podemos definir sus dimensiones con minWidth y height, además del color del texto, del fondo y el resto de las propiedades que ves aquí. Para obtener la lista completa puedes consultarla desde la documentación oficial o directamente desde el IDE.

¿Qué botón elegir en Flutter?

Como puedes ver, hay un botón para cada situación. A continuación te dejo una guía rápida para elegir el adecuado:

• Si no tienes mucho espacio y quieres señalar una acción principal, usa un FloatingActionButton.
• Si necesitas un botón con buen diseño que siga las directrices de Material Design, emplea un MaterialButton.
• Para un botón discreto que no llame la atención, usa un FlatButton o un IconButton.
• Para un diseño clásico con relieve, un RaisedButton te vendría bien.

A continuación te dejo todo el código completo de la aplicación para que puedas ejecutarla tú mismo y realizar todas las pruebas que desees:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MiLista2'),
        ),
        body: Card(
          child: Center(
            child: Column(
              children: <Widget>[
                Image.asset('assets/codeigniter.png'),
                Text("Curso en CodeIgniter"),
                IconButton(
                  icon: Icon(Icons.access_alarms),
                  tooltip: "Mensaje",
                ),
                FloatingActionButton(
                  child: Icon(Icons.access_time),
                  elevation: 50.0,
                  backgroundColor: Colors.amber,
                ),
                MaterialButton(
                  minWidth: 200.0,
                  height: 40.0,
                  onPressed: () {},
                  color: Colors.lightBlue,
                  child: Text('Material Button',
                      style: TextStyle(color: Colors.white)),
                ),
                RaisedButton(
                  disabledColor: Colors.amber,
                  child: Text("Raised Button"),
                  splashColor: Colors.amber,
                  color: Colors.blueAccent,
                  onPressed: ()  {
                    print("Hola Raised Button");
                  },
                ),
                FlatButton(
                  child: new Text('Flat Button'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Nuestra aplicación muestra los distintos botones que puedes ver en la imagen promocional.

Por supuesto, aquí te dejamos enlaces a la documentación oficial de cada tipo de botón:

• Flat Button
• Icon Button
• FloatingActionButton
• Material Button

De RaisedButton a ElevatedButton en Flutter: guía de migración

A partir de Flutter 2, el widget RaisedButton fue marcado como obsoleto y reemplazado por ElevatedButton. A continuación te muestro cómo realizar esta migración de forma sencilla. Recordemos que un RaisedButton típico luce así:

RaisedButton(
              color: Colors.purple,
              textColor: Colors.white,
              onPressed: () {
                // hacer algo
              },
              child: Text("Ir a la página dos"),
          ),

Generalmente definimos el color de fondo con color y el color de texto con textColor.

Al migrar a ElevatedButton, ya no podemos definir las propiedades de estilo directamente como parámetros del constructor. En su lugar, toda la personalización visual se concentra en una única propiedad llamada style:

 ElevatedButton(
              style: ###TU ESTILO###
              child: Text("Ir a la página uno"),
),

Definir el estilo del ElevatedButton con styleFrom

Con el método ElevatedButton.styleFrom(), podemos crear un objeto ButtonStyle para personalizar nuestro botón de forma sencilla y legible:

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
    onPrimary: Colors.white,
    primary: Colors.purple,
    padding: EdgeInsets.symmetric(horizontal: 16),
);

Luego se lo pasamos a la propiedad style. Con esto logramos que el ElevatedButton funcione de manera similar al antiguo RaisedButton:

• Con primary definimos el color de fondo del botón.
• Con onPrimary controlamos el color del texto y el efecto ripple.

ElevatedButton(
              style: raisedButtonStyle,
              onPressed: () {
                // hacer algo
              },
              child: Text("Ir a la página uno"),
),

FloatingActionButton en Flutter: cuatro tamaños disponibles

El FloatingActionButton es un widget de Flutter que proporciona un botón flotante circular, utilizado comúnmente para acciones principales o secundarias en una aplicación. Este botón puede contener un ícono o un texto, y flota por encima de otros elementos de la interfaz. Su diseño visual se adapta automáticamente a la plataforma en la que se ejecuta la aplicación, y se combina frecuentemente con otros widgets como Scaffold y AppBar.

Una de las incorporaciones más recientes en Flutter es la posibilidad de definir el tamaño del FloatingActionButton mediante constructores con nombre (named constructors). Esto nos permite elegir entre cuatro variantes:

Botón flotante Extendido (extended)

FloatingActionButton.extended(
            onPressed: () {}, label: Text("Extendido")),

FloatingActionButton grande (large)

FloatingActionButton.large(
         child: Icon(Icons.plus_one),
         onPressed: (){
       }),

FloatingActionButton regular (constructor por defecto)

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

Botón flotante pequeño (small)

floatingActionButton: FloatingActionButton.small(
          child: Icon(Icons.plus_one),
          onPressed: (){
        }),

Conclusiones sobre los tamaños del FAB

• El botón regular es el estándar (constructor por defecto), por lo que no necesitas indicar ningún constructor con nombre.
• El botón extendido requiere el parámetro label (generalmente un Text). El resto de variantes siguen el esquema estándar de definir un child para el ícono y los aspectos adicionales que quieras personalizar.

Cómo cambiar la posición del FloatingActionButton en Flutter (2 formas)

Te quiero mostrar cómo puedes cambiar la ubicación de tu Floating Action Button (FAB) en Flutter. Puedes posicionarlo a la derecha, al centro o a la izquierda según tus necesidades de diseño. Veamos las dos formas principales de lograrlo.

Primera forma: usando FloatingActionButtonLocation

La forma más directa es emplear la propiedad floatingActionButtonLocation del Scaffold:

Scaffold(
 floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 ...
)

Esto permite definir rápidamente la posición del FAB: centro, izquierda o derecha. Es la forma recomendada por la documentación oficial de Flutter y funciona bien en la mayoría de los casos, aunque puede presentar limitaciones en pantallas muy pequeñas.

Segunda forma: usando Column y Row para control total

Si necesitas mayor flexibilidad, puedes posicionar el FAB manualmente mediante Column y Row. En este enfoque, tu FAB ya no es un botón independiente sino un widget compuesto que puede incluir varios elementos, como columnas, botones adicionales o contenido personalizado.

Ejemplo de implementación con columnas:

enum FABPosition { left, right, center }
if (appModel.fabposition == FABPosition.center.toString()) {
 _floatingActionButtonLocation = MainAxisAlignment.center;
 _floatingActionButtonLocationCross = CrossAxisAlignment.center;
} else if (appModel.fabposition == FABPosition.left.toString()) {
 _floatingActionButtonLocation = MainAxisAlignment.start;
 _floatingActionButtonLocationCross = CrossAxisAlignment.start;
}

Luego, en el Scaffold:

Scaffold(
 floatingActionButton: Padding(
   padding: const EdgeInsets.only(left: 30),
   child: Column(
     crossAxisAlignment: _floatingActionButtonLocationCross,
     mainAxisAlignment: MainAxisAlignment.end,
     children: [
       widget.showLastCourseWidget && appModel.showLastCourseWidget
           ? lastClassViewInCourse()
           : const SizedBox(),
       const SizedBox(height: 10),
       fab ?? const SizedBox(),
     ],
   ),
 ),
)

Explicación de la estructura

• MainAxisAlignment y CrossAxisAlignment controlan la alineación horizontal y vertical del FAB.
• Las variables _floatingActionButtonLocationCross y _floatingActionButtonLocation determinan si el botón está a la izquierda, derecha o centro según la configuración del usuario.
• Padding se utiliza para ajustar la separación del FAB respecto a los bordes de la pantalla.
• Column permite apilar varios widgets, como un acceso directo al último curso (lastClassViewInCourse()) y el FAB principal.

Resumen y recomendaciones

• La forma estándar es usar FloatingActionButtonLocation, definida por Flutter, para posicionar el FAB rápidamente.
• Si necesitas más control o estás usando widgets personalizados, emplea Column y alinea mediante MainAxisAlignment y CrossAxisAlignment.
• En pantallas pequeñas, el método estándar puede no funcionar correctamente; el enfoque con Column ofrece mayor flexibilidad.
• Con este sistema puedes definir posiciones dinámicas basadas en la configuración del usuario.

¿Cómo actualizar la página anterior al usar el botón de retroceso en Flutter?

Cuando trabajamos con operaciones tipo CRUD en cualquier framework, al terminar un proceso de creación o actualización generalmente volvemos de forma automática a la página de listado, donde deben verse reflejados los cambios realizados. En Flutter, puede que no quede del todo claro cómo lograr esta actualización de la vista de listado; no hablamos de disparar una función al presionar el botón de atrás (que afectaría solo la página actual), sino de ejecutar código después de regresar.

Navegación y el método then en Flutter

Recordemos que para navegar de una página a otra empleamos la clase Navigator de Flutter. Lo que quizá no quede tan claro es que podemos interceptar el retorno de la navegación mediante la función then, que funciona como una promesa (Future) y se ejecuta cuando la segunda página se cierra:

ListTile(
          title: Text(notes[i].title),
          trailing: MaterialButton(
            onPressed: () => Navigator.pushNamed(context, SavePage.ROUTE,
                    arguments: notes[i])
                .then((value) => setState(() {
                      _loadData();
                    })),
            child: Icon(Icons.edit),
          )),

En nuestro ejemplo, la función _loadData() recarga los datos del listado. Es la misma función que usamos para cargar la data de manera inicial, lo que garantiza que la vista siempre esté actualizada al regresar.

Siguiente paso, aprende a usar el Widget Card en Flutter.