Buenas Prácticas Flutter: De una idea a un MVP 💡📲 - Parte I (Colores)

En esta serie quiero compartir con todos unas buenas prácticas en el desarrollo de aplicaciones móviles con Flutter. Lo que plasmaré no es una verdad absoluta y en algunos hay cosas que se pueden mejorar y evolucionar.

Llevo mucho tiempo desarrollando con Flutter y desde un buen inicio siempre se busca tener un Scaffolding genérico para poder reusar en cada proyecto, al menos esa es la idea de muchos desarrolladores.

Partimos de la base que cada proyecto y cada desarrollador tiene una visión diferente de cómo enfocar cualquier tipo de proyecto.

Así que he decidido preparar un Scaffolding para mis proyectos. La mejor manera es desarrollar un MVP y compartirlo con todo aquel que quiera echarle un vistazo.

En esta serie de artículos voy a enfocarme en el desarrollo de una aplicación E-commerce con Flutter, de principio a fin.

Así que manos a la obra. Lo primero que deberemos hacer es generar el proyecto Flutter. En mi caso voy a usar Visual Studio Code.

Ya con el proyecto generado, lo primero que suelo hacer es prepararme la paleta de colores con la que voy a trabajar. En este caso, no voy a diseñar los Wireframes,Mockups…

Mi decisión ha sido buscar un diseño y finalmente me decidí por el siguiente: https://ui8.net/ui_migulko/products/clother-e-commerce-ui-mobile-kit y ya podemos ver a grandes rasgos su Guía de estilos.

Colores principales de la aplicación.

Una vez tenemos los colores principales los añadimos en un archivo, el cual lo llamaremos styles.dart y lo vamos a situar en lib/src/config/styles.dart con el siguiente contenido:

Generando colores: styles.dart

import 'package:flutter/material.dart';
const Color fuchsia = Color(0xffFD4092);
const Color purplePlum = Color(0xFF965EFF);
const Color darkNavy = Color(0xFF032B5C);
const Color yellowSunny = Color(0xffFCD755);

Añadiremos colores como:

• Colores puros: Blanco y Negro
• Colores de estado: Verde, Rojo y Naranja

// Pure colors
const Color mainBlack = Color(0xff000000);
const Color mainWhite = Color(0xffffffff);
// Status colors
const Color doneGreen = Color(0xff0dff00);
const Color errorRed = Color(0xffdf0000);
const Color warningOrange = Color(0xffF78932);

Y finalmente, por cada color de la guía de estilos, genero 6 colores más de cada uno de ellos, jugando con las transparencias, por si los necesito en cualquier momento.

// base color
const Color fuchsia = Color(0xffFD4092);
final Color fuchsia12 = fuchsia.withOpacity(.12);
final Color fuchsia26 = fuchsia.withOpacity(.26);
final Color fuchsia38 = fuchsia.withOpacity(.38);
final Color fuchsia45 = fuchsia.withOpacity(.45);
final Color fuchsia54 = fuchsia.withOpacity(.54);
final Color fuchsia87 = fuchsia.withOpacity(.87);
// announcement colors
const Color purplePlum = Color(0xFF965EFF);
final Color purplePlum12 = purplePlum.withOpacity(.12);
final Color purplePlum26 = purplePlum.withOpacity(.26);
final Color purplePlum38 = purplePlum.withOpacity(.38);
final Color purplePlum45 = purplePlum.withOpacity(.45);
final Color purplePlum54 = purplePlum.withOpacity(.54);
final Color purplePlum87 = purplePlum.withOpacity(.87);
// CTA colors
const Color darkNavy = Color(0xFF032B5C);
final Color darkNavy12 = darkNavy.withOpacity(.12);
final Color darkNavy26 = darkNavy.withOpacity(.26);
final Color darkNavy38 = darkNavy.withOpacity(.38);
final Color darkNavy45 = darkNavy.withOpacity(.45);
final Color darkNavy54 = darkNavy.withOpacity(.54);
final Color darkNavy87 = darkNavy.withOpacity(.87);
// Secondary CTA colors
const Color yellowSunny = Color(0xffFCD755);
final Color yellowSunny12 = yellowSunny.withOpacity(.12);
final Color yellowSunny26 = yellowSunny.withOpacity(.26);
final Color yellowSunny38 = yellowSunny.withOpacity(.38);
final Color yellowSunny45 = yellowSunny.withOpacity(.45);
final Color yellowSunny54 = yellowSunny.withOpacity(.54);
final Color yellowSunny87 = yellowSunny.withOpacity(.87);

Ahora simplemente puedo llamar al color por su propio nombre.

Container(
  width: 100,
  height: 100,
  color: fuchsia54,
)

Resultado de la paleta en un GridView:

lib/src/config/styles.dart

En el siguiente artículo generaremos la estructura de carpetas del proyecto.

Github repo: https://github.com/luiggibcn/bpf/tree/colors

Happy coding!

Parte 2: Estructura de carpetas