Button component using Flutter in the Dart programming language.

In this post, we will create a customizable button component in Flutter using the ElevatedButton widget. This component will allow us to create buttons with text, icon, and customize various aspects like color, text size, and button width.

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

Now that we have created the customizable button component, we can easily use it anywhere in our application. Below is an example of how to use it:

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');
          },
        ),
      ),
    );
  }
}

DevCodeLight