Clase IconButton en Flutter con ejemplo

La clase de botón más diferente proporcionada en flutter es la clase IconButton. En este tutorial, lo guiaremos a través de la implementación y las propiedades de la clase IconButton para flutter en detalle. Un botón de icono permite a los usuarios realizar acciones como buscar, navegar, agregar, etc., simplemente presionando el botón. Esta clase no tiene un botón normal con algo de texto sino un icono en forma de botón. El icono sirve como identificador. Para usar un botón de icono, debe importar el paquete de componentes de material para flutter, es decir, «paquete: flutter/material.dart». 

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

Parámetros

Un IconButton tiene principalmente dos parámetros:

1. icono : T

Esto representa la etiqueta del botón.

IconButton(
       icon: Icon(Icons.code),
     ),

2. onPressed: Representa la acción a ejecutar cuando se presiona el botón.

IconButton(
       onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
       icon: Icon(Icons.code),
     ),

Propiedades

• autofocus : da un valor booleano correspondiente al enfoque inicial del botón.
• alineación : define cómo se coloca el icono dentro del IconButton.
• focusNode : representa el Node de enfoque del widget
• color : da el color del icono dentro del botón. 
• Restricciones: representa las restricciones de tamaño opcionales para el botón.
• disabledColor : representa el color que se mostrará cuando el widget esté deshabilitado.
• enableFeedback : indica si los gestos detectados deben proporcionar retroalimentación acústica y/o háptica. 
• focusColor : representa el color del botón cuando está enfocado.
• hashCode : proporciona el código hash para este objeto. 
• HighlightColor : representa el color secundario del botón (opcional) cuando se presiona.
• hoverColor : representa el color del icono mientras se desplaza sobre el icono
• iconSize : da el tamaño del icono dentro del botón. 
• clave : Controla cómo un widget reemplaza a otro widget en el árbol.
• 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.
• mouseCursor : el tipo de cursor que se muestra cuando se desplaza sobre el widget. 
• padding : El relleno para proporcionar al icono.
• runtimeType : una representación del tipo de tiempo de ejecución del objeto.

Métodos

• build(BuildContext context) : describe la parte de la interfaz de usuario representada por este widget
• createElement() : crea un StatelessElement para administrar la ubicación de este widget en el árbol.
• debugDescribeChildren() : devuelve una lista de objetos DiagnosticsNode que describen los elementos secundarios de este Node
• debugFillProperties() : agregue propiedades adicionales asociadas con el Node
• toDiagnosticsNode() : devuelve una representación de depuración del objeto que utilizan las herramientas de depuración.
• toString() : una representación de string de este objeto.
• toStringDeep(): devuelve una representación de string de este Node y sus descendientes.
• toStringShallow(): devuelve una descripción detallada de una línea del objeto
• toStringShort() : una breve descripción textual de este widget. 

Ajuste del color del icono 

IconButton(
       color: Colors.green,
       onPressed: () {},
       icon: Icon(Icons.code),
     ),

Producción:

Ajuste del color de fondo

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          icon: Icon(Icons.code),
        ),
      ),

Producción:

Cambio de SplashColor 

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellow,
          icon: Icon(Icons.code),
        ),
      ),

Producción:

Ajuste del radio del color de salpicadura 

CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellowAccent,
          splashRadius: 50,
          icon: Icon(Icons.code),
        ),
      ),

Producción:

Ajuste del color de resaltado

 CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () {},
          splashColor: Colors.yellowAccent,

          splashRadius: 50,
          highlightColor: Colors.red,
          icon: Icon(Icons.code),
        ),
      ),

Producción:

Entendamos esto con la ayuda de un ejemplo.

Ejemplo

import 'package:flutter/material.dart';
 
void main() {
  runApp(HomeApp());
}
 
class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);
 
  @override
  State<HomeApp> createState() => _HomeAppState();
}
 
class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: CircleAvatar(
        backgroundColor: Colors.green,
        child: IconButton(
          color: Colors.white,
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
          splashColor: Colors.yellowAccent,
          splashRadius: 50,
          highlightColor: Colors.red,
          icon: Icon(Icons.code),
        ),
      ),
    ));
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('This is your new screen')),
    );
  }
}

Producción: