[Parte 54 de la serie de preguntas de Flutter] Un tutorial gráfico detallado sobre la introducción de la biblioteca de íconos vectoriales de Ali en Flutter

Este es el [artículo 54 de la serie de problemas de Flutter]. Si lo encuentra útil, preste atención a la columna.

Bibliotecas de íconos de terceros Mucha gente está usando la biblioteca de íconos vectoriales de Alibaba . Este blog hablará sobre cómo introducir la biblioteca de íconos vectoriales de Alibaba en Flutter.

1: Descargue los recursos del proyecto de Ali Vector Icon Library

primer paso

Después de ingresar a la biblioteca de íconos vectoriales Ali, busque el nombre del recurso que necesita en el cuadro de búsqueda, por ejemplo, busco aquí wifi, luego seleccione un ícono y haga clic en el botón "Agregar a la biblioteca", como se muestra en la figura a continuación,

haga clic en el botón del icono para ver la biblioteca e ingrese a la página siguiente. Una interfaz, seleccione el proyecto al que desea agregar y haga clic en Aceptar, como se muestra a continuación.

segundo paso

Después de hacer clic en el botón Aceptar, saltará automáticamente al proyecto que seleccionó actualmente, y luego seleccione el 下载至本地botón , como se muestra en la figura a continuación. El

archivo descargado es un archivo comprimido. La representación descomprimida es la siguiente. El

nombre del archivo iconfont.ttfes lo que tenemos que poner en el proyecto Flutter. of.

Dos: configurar el archivo iconfont.ttf en el proyecto Flutter

En la carpeta recién creada assets/icons/del (puede nombrarlo arbitrariamente), agregue el iconfont.ttfarchivo a la carpeta de iconos, como se muestra en la figura a continuación ,

luego agregue el siguiente código al archivo de configuración del pubspec.yamlproyecto y luego ejecute el flutter pub getcomando .

flutter:

  fonts:
    - family: AllenSu
      fonts:
        - asset: assets/icons/iconfont.ttf

donde familyes el nombre fontsde la biblioteca de iconos y es la ruta de la biblioteca de iconos.

Tres: use la biblioteca de iconos vectoriales de Ali

La configuración anterior es buena y es relativamente simple de usar.

Después de copiar el código del icono, elimine el símbolo delante del código &#y luego agregue un número en la parte superior del código restante 0, que es el código del icono actual, correspondiente IconDataal atributo de tipo int en codePoint.

como se muestra en el siguiente código

Icon(
  IconData(0xe638, fontFamily: "AllenSu"),
  color: Color(0xFF01A0E9),
),
Icon(
  IconData(0xe607, fontFamily: "AllenSu"),
  color: Color(0xFF0BBB08),
),
Icon(IconData(0xe76c, fontFamily: "AllenSu")),

Las representaciones son las siguientes

Hasta ahora, aquí se presenta el tutorial gráfico detallado sobre la introducción de la biblioteca de íconos vectoriales Ali en Flutter.

¿Se ha resuelto tu problema? Bienvenido a dejar un mensaje en el área de comentarios.

Regálale una rosa a alguien y habrá una fragancia persistente en tu mano. Si crees que el artículo es bueno, espero que puedas dar un clic en tres enlaces, gracias.

---

Observaciones finales

Flutter de Google se está volviendo cada vez más popular. A partir del 7 de enero de 2022, la estrella de GitHub alcanzó los 134 K. Flutter es definitivamente una tendencia, por lo que, como desarrollador front-end, no hay razón para no aprender lo antes posible.

Ya sea que sea un novato en Flutter o ya haya comenzado, es mejor que preste atención primero. Escribiré los componentes comunes en Flutter (incluido el análisis del código fuente, el uso de los componentes y las precauciones) y los posibles problemas en el blog de CSDN. Espero que mientras aprende por ti mismo, también puedes ayudar a más personas.