Flutter: Botones comunes de Material

2024-06-08T18:00:00-05:00 | 4 minutos de lectura | Actualizado en 2025-01-24T07:42:46-05:00

jaimetellezb

Tabla de Contenido

Tabla de Contenido
Introducción
- Botones comunes (common Buttons)
  - Tipos de botones
  - Estilo de los botones
- Ejemplos
Conclusión
Referencias

Introducción

Material proporciona una variedad de widgets en Flutter que tienen el diseño de Material 3 ya implementado en cada uno de éstos. Inicialmente veremos los widgets de comportamiento como lo son los botones comunes.

Botones comunes (common Buttons)

Los botones comunes son bloques en los que podemos hacer clic y disparar acciones como: ir a otra pantalla, obtener información de la base de datos, consumir un servicio externo, etc.

Tipos de botones

Material 3 nos brinda algunos tipos de botones comunes, en Flutter se conocen de la siguiente manera.

Elevated un botón elevado es recomendable usarlo en listas que tengan contenido largo o en espacios amplios ya que al presionar el botón su elevación aumenta. No es recomendable usarlos en Dialogs o Cards. En Flutter se conoce como ElevatedButton.
Filled un botón lleno es el que mayor impacto visual tiene comparado dentro de estos cinco tipos. Podría ser un botón primario y utilizarse en acciones para completar una funcionalidad como Guardar, Comprar, Confirmar, etc. En Flutter se conoce como FilledButton.
Filled Tonal un botón tonal es un alternativo entre un FilledButton y un OutlinedButton. Suele ser útil usarlo en casos donde un botón no primario como Siguiente. En Flutter se conoce como FilledButton.tonal.
Outlined un botón delineado, es un TextButton con el borde delineado. Se suele utilizar es acciones que son importantes pero no es la acción principal, es decir, una acción secundaria. En Flutter se conoce como OutlinedButton.
Text un botón de texto recomiendan usarlo en Dialogs y Cards en las esquinas inferiores y no es recomendable usarlo en medio de listas ya que estos botones no tienen un borde visible. En Flutter se conoce como TextButton.

Estilo de los botones

Los botones comunes tienen una propiedad style que es por medio de la cual podemos configurar cómo queremos que sea vea cada uno de nuestros botones en la aplicación y es de tipo ButtonStyle. También cada uno de los tipos de botones tienen un método estático que permite construir un ButtonStyle dando algunas propiedades simples.

ElevatedButton.styleFrom
FilledButton.styleFrom
OutlinedButton.styleFrom
TextButton.styleFrom

Ejemplos

Veremos como crear cada uno de estos botones, con unos ejemplos básicos y sus diferentes tipos, ya que algunos tienen opciones para utilizar con íconos por ejemplo.

ElevatedButton

import 'package:flutter/material.dart';

class ElevatedButtons extends StatelessWidget {
  const ElevatedButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const ElevatedButton(
          onPressed: null, // el null deshabilita el botón
          child: Text('ElevatedButton deshabilitado'),
        ),
        ElevatedButton(
          onPressed: () => {
            showDialog(
              context: context,
              builder: (context) => const AlertDialog(
                title: Text('ElevatedButton'),
              ),
            ),
          },
          child: const Text('ElevatedButton'),
        ),
        ElevatedButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.save),
          label: const Text('ElevatedButton con ícono'),
        )
      ],
    );
  }
}

FilledButton

import 'package:flutter/material.dart';

class FilledButtons extends StatelessWidget {
  const FilledButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const FilledButton(
          onPressed: null,
          child: Text('FilledButton desabilitado'),
        ),
        FilledButton(
          onPressed: () {},
          child: const Text('FilledButton normal'),
        ),
        FilledButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.save),
          label: const Text('FilledButton con ícono'),
        ),
      ],
    );
  }
}

FilledButton.tonal

import 'package:flutter/material.dart';

class FilledTonalButtons extends StatelessWidget {
  const FilledTonalButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FilledButton.tonal(
          onPressed: () {},
          child: const Text('FilledButton tonal'),
        ),
        FilledButton.tonalIcon(
          onPressed: () {},
          icon: const Icon(Icons.save),
          label: const Text('FilledButton tonal icon'),
        ),
      ],
    );
  }
}

OutlinedButton

import 'package:flutter/material.dart';

class OutlinedButtons extends StatelessWidget {
  const OutlinedButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const OutlinedButton(
          onPressed: null,
          child: Text('OutlinedButton deshabilitado'),
        ),
        OutlinedButton(
          onPressed: () {},
          child: const Text('OutlinedButton normal'),
        ),
        OutlinedButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.save),
          label: const Text('OutlinedButton con ícono'),
        ),
      ],
    );
  }
}

TextButton

import 'package:flutter/material.dart';

class TextButtons extends StatelessWidget {
  const TextButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const TextButton(
          onPressed: null,
          child: Text('TextButton deshabilitado'),
        ),
        TextButton(
          onPressed: () {},
          child: const Text('TextButton normal'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.save),
          label: const Text('TextButton con ícono'),
        ),
      ],
    );
  }
}

demo

Estos son algunos de los botones que existen en Flutter, incluso hay más opciones que nos proporciona Material 3 que veremos posteriormente en otras publicaciones.

Conclusión

Tenemos varias opciones respecto a botones para usar en Flutter que nos brinda Material 3 en este caso, es importante entender en qué contexto es recomendado utilizar cada uno, antes de empezarlos a usarlos.

¡Gracias por leer!