Flutter: widget de botón de icono

Flutter viene con diferentes tipos de botones como TextButton , ElevatedButton , OutlinedButton, etc. Pero la mayoría de los botones están basados ​​en texto. En este artículo vamos a ver cómo implementar el IconButton de Flutter. Es uno de los botones más utilizados en la biblioteca flutter. Primero, como sugiere el nombre, el botón de icono es el botón que tiene un icono, y al tocarlo hace algo. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Constructor

IconButton
(
   {
    Key? key, 
    double? iconSize, 
    VisualDensity? visualDensity, 
    EdgeInsetsGeometry padding = const EdgeInsets.all(8.0), 
    AlignmentGeometry alignment = Alignment.center, 
    double? splashRadius, 
    Color? color, 
    Color? focusColor, 
    Color? hoverColor, 
    Color? highlightColor, 
    Color? splashColor, 
    Color? disabledColor, 
    required VoidCallback? onPressed, 
    MouseCursor? mouseCursor, 
    FocusNode? focusNode, 
    bool autofocus = false, 
    String? tooltip, 
    bool enableFeedback = true, 
    BoxConstraints? constraints, 
    required Widget icon
  }
)

Nota: onPressed e icon son los campos obligatorios para implementar al usar IconButton.

Propiedades

• alineación: define cómo colocar el botón en el árbol de widgets.
• enfoque automático: verdadero si otros widgets no están enfocados, pero este widget sí lo está.
• color:  Define el color del Icono dentro del botón. 
• Restricciones: Restricciones de tamaño opcionales para el botón.
• disabledColor: el color que se muestra cuando el widget está deshabilitado.
• enableFeedback: Si los gestos detectados deben proporcionar retroalimentación acústica y/o háptica. 
• focusColor: El color del botón cuando está enfocado.
• hashCode: El código hash para este objeto. 
• HighlightColor: El color secundario (opcional) del botón cuando se presiona.
• hoverColor: el color del icono mientras se desplaza sobre el icono. 
• icono: El icono que se mostrará dentro del botón. 
• iconSize: Tamaño del icono Dentro del botón. 
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• mouseCursor: el tipo de cursor que se muestra cuando se desplaza sobre el widget. 
• onPressed: La acción a realizar cuando se presiona el botón.
• relleno: el relleno que se proporciona al icono.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• splashColor: El color del efecto dominó producido cuando el usuario presiona el botón. 
• splashRadius: El radio de salpicadura.
• información sobre herramientas: texto para representar la acción cuando se presiona el botón.
• visualDensity: define qué tan compacto será el diseño del botón del icono.

Proyecto de ejemplo

El archivo main.dart :

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GFG(),
    );
  }
}
 
// This widget will be shown as the
// home page of your application.
class GFG extends StatefulWidget {
  const GFG({Key? key}) : super(key: key);
 
  @override
  State<GFG> createState() => _GFGState();
}
 
class _GFGState extends State<GFG> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "GeeksForGeeks",
        ),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Creating a icon button
          IconButton(
            iconSize: 100,
            icon: const Icon(
              Icons.add,
            ),
            // the method which is called
            // when button is pressed
            onPressed: () {
              setState(
                () {
                  count++;
                },
              );
            },
          ),
          // SizedBox used as the separator
          const SizedBox(
            height: 40,
          ),
          // Text widget used to display count
          Text(
            "$count",
            style: TextStyle(fontSize: 50, color: Colors.blue),
          ),
        ],
      )),
    );
  }
}

Producción:

Si las propiedades se definen de la siguiente manera:

IconButton(
  iconSize: 100,
  icon: const Icon(
    Icons.add,
  ),
  onPressed: () {
    setState(
      () {
        count++;
      },
    );
  },
),

Se obtendrá el siguiente resultado de diseño:

 

Explicación:

• Cree IconButton envuelto alrededor de Center Widget para que quede centrado.
• Proporcione un ícono y cambie el tamaño del ícono usando el parámetro iconSize.
• Implemente el método onPressed requerido.
• Proporcione los parámetros opcionales hoverColor, focusColor, splashColor a IconButton.