Clase de icono en Flutter

La clase de icono en Flutter se usa para mostrar iconos específicos en nuestra aplicación. En lugar de crear una imagen para nuestro ícono, simplemente podemos usar la clase Icon para insertar un ícono en nuestra aplicación. Para usar esta clase, debe asegurarse de haber configurado uses-material-design: true en el archivo pubsec.yml de su objeto.

Syntax:
Icon(
      key key,
      size,
      color,
      semanticLabel,
      textDirection
)

Propiedades:

  • color: Se utiliza para establecer el color del icono
  • tamaño: Se utiliza para cambiar el tamaño del Icono
  • semanticLable: entra en juego mientras se usa la aplicación en modo de accesibilidad (es decir, voz en off)
  • textDirection: se utiliza para renderizar Icon

Nota: La etiqueta semántica no está visible en la interfaz de usuario.

Algunos de ellos se muestran a continuación:

Para ver la lista completa de iconos, haga clic aquí .

Veamos algunos de esos íconos en acción con aplicaciones simples de aleteo.

Ejemplo: 

Aquí diseñaremos una aplicación que muestre varios íconos en diferentes pestañas. Aquí tendremos 5 pestañas con 5 íconos cada una y modificaremos sus propiedades para ver los cambios en la interfaz de usuario. Los cambios de propiedad son los siguientes:

  1. Icono de nota musical:
    properties:
    color: default, size: 100, semanticLabel: None, textdirection: default
  2. Icono de música_video:
    properties:
    color: default, size: 100, semanticLabel: None, textdirection: default
  3. Icono de cámara_alt:
    properties:
    color: default, size: 100, semanticLabel: 'Camera', textdirection: default
  4. Icono de grado:
    properties:
    color: red, size: 300, semanticLabel: 'Star', textdirection: default
  5. Icono de correo electrónico:
    properties:
    color: default, size: default, semanticLabel: None', textdirection: default

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(TabBarDemo());
}
  
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: Text('GeeksForGeeks'),
            backgroundColor: Colors.green,
          ),
          body: TabBarView(
            children: [
              Icon(Icons.music_note,
                  size: 100),
              Icon(Icons.music_video,
                color: Colors.blue,
                size: 100),
              Icon(Icons.camera_alt,
                semanticLabel: 'Camera',
                size: 100),
              Icon(Icons.grade,
                color: Colors.red,
                size: 300,
                semanticLabel: 'Star',),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por naman1404 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *