Componente botón usando Flutter en lenguaje Dart

Tiempo de lectura: 2 minutos

En este post vamos crear un componente de botón personalizable en Flutter utilizando el widget ElevatedButton. Este componente nos permitirá crear botones con texto, icono y personalizar varios aspectos como el color, tamaño del texto y el ancho del botón.

import 'package:flutter/material.dart';
import '../util/constantes/Colores.dart';

class Boton extends StatelessWidget {
  final Color? color; // Ahora es opcional y puede ser nulo
  final Color? textColor;
  final int? textSize;
  final double? ancho;
  final bool? fullWidth;
  final String text;
  final IconData? icon; // Ahora es opcional y puede ser nulo
  final VoidCallback onPressed;

  const Boton({
    Key? key,
    this.color, // Color no es requerido
    this.textColor,
    this.textSize,
    this.ancho,
    this.fullWidth,
    required this.text,
    this.icon, // Icono no es requerido
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: fullWidth != null && fullWidth == true
          ? double.infinity
          : null, // Si fullWidth es verdadero, el ancho del botón es el máximo
      height: ancho != null ? ancho : 50, // Ajusta el alto del botón
      child: ElevatedButton(
        onPressed: onPressed,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            icon != null
                ? Icon(
                    icon,
                    size: 24,
                    color: textColor != null ? textColor : ColorsApp.blanco,
                  ) // Tamaño del icono
                : Container(), // Si no hay icono, se muestra un contenedor vacío
            icon != null ? SizedBox(width: 12) : SizedBox.shrink(),
            Text(
              text,
              style: TextStyle(
                fontSize: textSize != null
                    ? textSize!.toDouble()
                    : 18, // Tamaño del texto
                color: Colors.white,
                fontWeight: FontWeight.bold, // Peso de la fuente
              ), // Ajusta el tamaño y el peso del texto
            ),
          ],
        ),
        style: ElevatedButton.styleFrom(
          primary: color != null ? color : ColorsApp.colorPersonalizado, // Color del botón
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10), // Bordes redondeados del botón
          ),
        ),
      ),
    );
  }
}

Ahora que hemos creado el componente de botón personalizable, podemos utilizarlo fácilmente en cualquier parte de nuestra aplicación. Muestro a continuación un ejemplo de cómo usarlo:

import 'package:flutter/material.dart';
import 'ruta/a/boton.dart'; // Importar el componente de botón

class MiPagina extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi Aplicación'),
      ),
      body: Center(
        child: Boton(
          text: 'Presionar',
          onPressed: () {
            // Acción al presionar el botón
            print('Botón presionado');
          },
        ),
      ),
    );
  }
}

Espero que les sirva de ayuda. ¡Qué tengan un feliz día!