Buenas Prácticas Flutter: De una idea a un MVP 💡📲 — Parte III (Iconos)

Generando nuestra propia colección de iconos

Para generar paquetes de iconos personalizados lo podemos hacer a través de la herramienta https://www.fluttericon.com/

De todas las colecciones de iconos disponibles, seleccionamos los que necesitemos o en su defecto podemos subir nuestros propios iconos en SVG.

Una vez hayamos seleccionado los iconos que necesitamos para nuestra aplicación, le daremos un nombre al paquete.

Este nombre se usará posteriormente en nuestro código dart

Ahora ya estamos listos para darle al botón Download. Esto nos generará un ZIP, que descomprimiremos en el escritorio y así obtendremos una estructura de archivos parecida a la siguiente.

├── b_p_f_icons.dart
├── config.json
└── fonts
    └── BPF.ttf

• b_p_f_icons.dart ⇢ Classe dart que nos genera los iconos
• config.json ⇢ Archivo que contiene todos nuestros iconos, para posteriormente reimportarlo en https://www.fluttericon.com/
• BPF.ttf ⇢ La fuente en sí que deberemos añadir en assets/fonts y añadir su referencia en pubspec.yaml

Integremos la fuente en nuestro proyecto

Copiamos la fuente donde tengamos nuestros assets: assets/fonts/BPF.ttf Movemos nuestro b_p_f_icons.dart a lib/presentation/shared/custom_icons/b_p_f_icons.dart

Abrimos pubspec.yaml y añadimos en la sección assets la ubicación donde hemos guardado nuestra fuente TTF

assets:
    - assets/fonts/

Y en la sección de fonts (estas instrucciones las podemos encontrar en custom_icons/b_p_f_icons.dart)

fonts:
    - family: BPF
      fonts:
        - asset: assets/fonts/BPF.ttf

Listo, ya solo nos queda incluir nuestros iconos:

appBar: AppBar(
  title: Text('Flutter Best Practices - Colors'),
  leading: Icon(
    BPF.camera,
 ),
)

Toda esta configuración es un poco tediosa, pero una vez lo tengamos solo deberemos actualizarla para cualquier tipo de proyecto. Así que más vale hacerlo con mimo 😝

En el siguiente artículo empezaremos con lo bueno. Configuración de nuestro state management con GetX.

Github repo: https://github.com/luiggibcn/bpf/tree/custom-icons

A codear!!

Parte 2: Estructura de carpetas

Parte 4: Implementando GetX