lunes 29 julio 2024

Cómo Crear un Botón en Flutter

Un botón en Flutter es un widget que se puede presionar para realizar una acción. Flutter proporciona varios tipos de botones predefinidos que se pueden personalizar según las necesidades de la aplicación. Los tipos de botones más comunes incluyen:

ElevatedButton: Un botón elevado que es ideal para acciones principales.
TextButton: Un botón de texto plano sin sombra.
OutlinedButton: Un botón con un borde delineado.
IconButton: Un botón que contiene solo un ícono.

Pasos para Crear un Botón en Flutter

1. Configurar el Entorno de Desarrollo

Antes de comenzar, asegúrate de tener Flutter instalado en tu máquina. Puedes seguir la guía oficial de instalación de Flutter para configurarlo correctamente.

2. Crear un Nuevo Proyecto de Flutter

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Flutter:

flutter create my_button_app

Luego, navega al directorio del proyecto:

cd my_button_app

3. Modificar el Código Fuente

Abre el archivo lib/main.dart en tu editor de código favorito y reemplázalo con el siguiente código:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Botón en Flutter'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // Acción al presionar el botón
              print('Botón presionado');
            },
            child: Text('Presióname'),
          ),
        ),
      ),
    );
  }
}

4. Ejecutar la Aplicación

Guarda los cambios y ejecuta la aplicación con el siguiente comando:

flutter run

Deberías ver una pantalla con un botón en el centro que dice "Presióname". Al presionar el botón, se imprimirá "Botón presionado" en la consola.

Personalización de Botones en Flutter

Flutter permite una amplia personalización de los botones. A continuación, te mostramos algunas de las personalizaciones más comunes.

Cambiar el Color del Botón

Puedes cambiar el color del botón utilizando la propiedad style del ElevatedButton:

ElevatedButton(
  onPressed: () {
    print('Botón presionado');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // Color de fondo
    onPrimary: Colors.white, // Color del texto
  ),
  child: Text('Presióname'),
)

Añadir un Ícono al Botón

Puedes agregar un ícono al botón utilizando el widget Icon junto con el texto:

ElevatedButton.icon(
  onPressed: () {
    print('Botón presionado');
  },
  icon: Icon(Icons.thumb_up),
  label: Text('Me gusta'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
  ),
)

Cambiar el Tamaño del Botón

Para cambiar el tamaño del botón, puedes envolverlo en un SizedBox:

SizedBox(
  width: 200,
  height: 50,
  child: ElevatedButton(
    onPressed: () {
      print('Botón presionado');
    },
    child: Text('Botón Grande'),
  ),
)

Etiquetas:

flutter

Creado por:

Jorge García

Fullstack developer