Botones en Flutter

En la entrada anterior hablamos de como instalar Flutter y crear nuestra primera aplicación, de cual IDEs podemos emplear que básicamente serían Android Studio y/o Visual Studio Code y también dimos una introducción al mundo de los widgets en Flutter creando una tarjeta que en realidad es un Widgets con algo de contenido, texto e imágenes que son widgets también; para ver la entrada puedes ir al siguiente enlace:

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

Hoy vamos a seguir trabajando en Flutter pero vamos a ver directamente un elemento que es indispensable en cualquier interfaz, el elemento para procesar acciones por excelencia como lo es el botón, y que el Flutter es el realidad un widgets; lo cual va perfectamente bien con las Cards o Cartas que vimos anteriormente en otra entrada en Android con Java/Kotlin.

Los botones en Flutter

Flutter como cualquier tecnología emergente, quiere hacerse con un hueco en el mercado y por tal motivo el framework contiene una gran cantidad de botones que nosotros podemos emplear en nuestras aplicaciones; y los botones no se quedan atrás; en esta entrada te traigo los principales botones que tenemos y podemos emplear en nuestras aplicaciones; existen otros tipos de botones como el del botón para una barra: Button Bar, pero estos no lo trataremos en esta entrada al ser un botón muy específico y que nos sirve más para contenedor que para otra cosa.

Así que en este punto te presento los botones más interesantes que podemos emplear en nuestra aplicación y te doy un resumen de las mismas; aunque lo ideal es que tomes este contenido de referencia y se soporte y tu mismos veas y pruebes los botones en tus aplicaciones, que veas el total de las propiedades que podemos configurarles a los botones y no solo un resumen.

Floating Action Button o Botón de Acción Flotante en Flutter

El primer botón que veremos, es el famoso Botón Flotante de Android del Material Desing que lo podemos implementar fácilmente en Flutter empleando un widget:

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

Como puedes ver, con este widget podemos crear un botón de acción flotante o el Float Action Button; podemos definir un color de fondo, como un suave anaranjado como el que colocamos aquí, así como un ícono e inclusive podemos definir la elevación para definir el sombreado, que es un aspecto fundamental en el Material Desing.

Recuerda que todos estos son componentes o widgets en Flutter, tienen características similares y únicas con respecto a todo el abanico de widgets que existen el Flutter pero todos en esencia son widgets; por lo tanto no esperes que se posicione de manera automática en una de las esquina de tu pantalla.

Para crear un botón en Flutter tenemos que emplear las siguientes líneas de código

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

La propiedad onPressed está disponible para todos los botones en general, y para saber qué propiedades puedes emplear en cada uno de los botones en Flutter, ya que tienen sus variantes, puedes consultar la documentación oficial o el autocompletado de Android Studio o Visual Studio Code.

Raised Button en Flutter

El Raised Button, es un botón clásico en Flutter, sería el Button por defecto que tenemos en Android; así de simple; aquí podemos ver algunas de las propiedades que puede tomar; para definir el color de fondo, o el splashColor y por supuesto el texto y los demás elementos que ya se hacen reiterativos aquí:

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

Como puedes ver, tenemos varias propiedades reflejadas en la líneas de código anterior, aunque no son todas, tenemos para indicar el color del botón, le definimos el texto mediante un widget, el color de texto y nuevamente definimos una función para el evento clic.

Flat Button en Flutter

Los siguientes botones que vamos a ver se conocen como FlatButton que son botones sencillos, al mismo estilo que tienen los botones en iOS los tenemos en Flutter; de los mismos podemos modificar aspectos como la letra, su color, tamaño y tipo; pero fijate que son botones sencillos sin color de fondo, para estos casos existen otros botones como puedes ver en nuestra publicación:

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

Material Button en Flutter

Los Material Button son los botones para el Material Design que podemos ver en Android, son la norma hoy en día para el desarrollo de aplicaciones para Android que sean modernas; como puedes ver con poco más de lo que definimos aquí:

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

Tenemos un botón de color azul con la característica onda que ocurre sobre nuestros botones y que se llama ripple en nuestra aplicación; prácticamente a todos los botones les podemos definir sus dimensiones con los atributos de width y height y además del color del texto y en algunos casos en de fondo también y el resto de las propiedades que ves aquí; de igual manera para obtener la lista completa puedes verla desde la documentación oficial o del mismo IDE.

Como puedes ver, hay un botón para todo, si no tiene espacio suficiente en tu app y quieres señalar una función importante en tu app, pues usa un Float Action Button, si quieres un botón que luzca y de un buen diseño a tu app, emplea un Material Design Button, y para tener un botón sencillo que no llame mucho la atención puedes emplear un Icon Button o un Flat Button, para un diseños clásico un Raised Button te vendría bien.

Finalmente, te dejo todo el código de la aplicación para que la puedas ejecutar tu 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'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Finalmente, nuestra aplicación luce los botones que puedes ver en la imagen promocional.

Por supuesto, aquí te dejamos enlaces a la documentación oficial:

• Flat Button
• Icon Button
• Float Action Button
• Material Button

De RaisedButton a ElevatedButton en Flutter

▶

Te quería hacer una rápida demostración en cómo puedes migrar de un RaisedButton a un ElevatedButton que es el nuevo widget que tenemos que usar a partir de Flutter en la versión 2; recordemos que un RaisedButton normal luce como el siguiente:

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

Generalmente definimos el color de fondo (color) y el color de texto (textColor).

Si queremos migrar al ElevatedButton, ya no podemos definir cuestiones de estilo mediante propiedades que formen parte nativamente del ElevatedButton, si no solamente tenemos una propiedad llamada style en la cual podemos definir cuestiones de diseño:

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

Definir el estilo del ElevatedButton

Con el ElevatedButton.styleFrom, podemos definir el estilo de nuestro botón ElevatedButton:

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

Y con esto se lo pasamos; ya con esto podemos definir el estilo de nuestro botones para que funcione similar al del RaisedButton

• Con primary tenemos el botón principal del componente, el color de fondo
• Y el de onPrimary afecta el color de texto y el efecto ripple:

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

FloatingActionButton en Flutter con cuatro tamaños: Extendido, grande, regular y pequeño

FloatingActionButton es un widget de Flutter que proporciona un botón flotante circular que se utiliza comúnmente para acciones secundarias y funciones adicionales en una aplicación. El botón puede tener un icono o un texto dentro de él, y puede flotar encima de otros elementos de la interfaz de usuario. El diseño visual del botón se adapta automáticamente a la plataforma en la que se ejecuta la aplicación. Puede utilizarse en combinación con otros widgets, como el Scaffold y AppBar, para mejorar la funcionalidad y el aspecto visual de la aplicación.

Una de las últimas incorporaciones que nos trae Flutter, es que ahora la clase FloatingActionButton nos permite definir el tamaño del botón:

Para eso podemos emplear los constructores con nombre, si queremos aplicar los NUEVOS botones:

Botón flotante Extendido

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

FloatingActionButton Largo o big

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

Regular

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

Botón flotante Pequeño

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

Conclusiones

• Como puedes ver, el botón regular, viene siendo el estándar o por defecto y por ende no debemos de indicar ningún constructor con nombre.
• El botón extendido le tenemos que definir un parámetro más, el label, que por su composición sería un texto; el resto de los botones es la definición que seguimos con el esquema anterior, de indicar un child para el icono y demás aspectos adicionales que quieras personalizar.

Floating action button position en Flutter o como cambiar la posición del botón flotante - 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, como ves en pantalla. En este caso, lo tengo en el centro, pero puedes ajustarlo según tu preferencia de usuario.

Por ejemplo:

Si voy a los posts, lo puedo colocar a la derecha.

• Luego, puedo moverlo a la izquierda.
• También es posible ajustar su posición usando padding u otras configuraciones.

Primera forma: usando FloatingActionButtonLocation

Una opción es emplear la propiedad de Scaffold llamada floatingActionButtonLocation:

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 de Flutter.

Funciona bien en pantallas grandes, pero puede presentar limitaciones en pantallas pequeñas.

Segunda forma: usando Columnas y Filas

Otra forma de ubicar el FAB es mediante Columnas y Filas.

En este caso, tu FAB no es un botón independiente, sino un widget compuesto, que puede incluir varios elementos, como columnas, botones adicionales o contenido personalizado.

Esto permite más flexibilidad, pero requiere manejar manualmente la alineación.

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

• Uso de MainAxisAlignment y CrossAxisAlignment para controlar la alineación horizontal y vertical del FAB.
• _floatingActionButtonLocationCross y _floatingActionButtonLocation determinan si el botón está a la izquierda, derecha o centro.
• Padding se utiliza para ajustar la separación del FAB respecto a los bordes.
• Column permite colocar varios widgets uno encima del otro, 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 posicionarlo rápidamente.
• Si necesitas más control o estás usando widgets personalizados, puedes emplear Columnas y alinear mediante MainAxisAlignment y CrossAxisAlignment.
• En pantallas pequeñas, el método estándar puede no funcionar correctamente, y el enfoque con Columnas es más flexible.
• 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 lenguaje de programación, framework, etc, cuando estamos en la fase de creación o actualización generalmente al terminar este proceso volvemos de una de manera automática a la página de listado, en la cual deben de verse reflejados los cambios reflejados en los procesos de inserción o actualización de estos registros; para estos casos, cuando estamos trabajando en Flutter puede que no quede del todo claro cómo podemos hacer esta actualización de la vista de listado; ya no estamos hablando de disparar una función al momento de presionar el botón de atrás, ya que esto afectaría solamente a la página actual antes de hacer el back.

Navegación en Flutter

Recordemos que, cuando queremos ir de una página a otra, tenemos que emplear un componente de navegación que nos tiene gracias una clase llamada Navigator en Flutter; lo que puede que no quede tan claro es que esta misma navegación nos funciona al momento de de hacer el back para ejecutar el código que nosotros queremos ejecutar al momento de regresar a la página inicial, que en nuestro ejemplo sería la de listado; podemos interceptar cuando hacemos un ruteo con la clase de Navigator mediante la función de then, que es una función de promesa:

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),
          )),

Por lo tanto en nuestro ejemplo, tenemos una función para recargar la data, que es la misma que empleamos para cargar la data de manera inicial.

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