Uso del Tema Oscuro en Flutter
Hace poco fue el Google i/o 2019 y en el se hicieron grandes anuncio sobre los diferentes servicios y sistemas que ofrece Google, entre ellos android, el cual, como una novedad, agrega de manera oficial el soporte para temas oscuros con activación a nivel de sistema, esto significa que las aplicaciones que lo soporten cambiaran a su tema oscuro cuando android lo indique.
Que es un tema oscuro
Un tema oscuro o Dark Theme (en ingles) es un estilo de diseño dónde predominan los colores oscuros con algún color contrastante para destacar elementos. Estos temas permiten una mejor visualización de contenido cuando se está en un ambiente con baja iluminación, además de que en dispositivos con pantallas OLED estos temas conllevan un ahorro significante de batería, Google hizo toda una investigación al respecto.
Estás dos características, además de su elegante estética, han hecho que los temas oscuros ganen popularidad y muchas aplicaciones los empiecen a adoptar. Y nosotros como desarrolladores móviles, y pronto también web, debemos considerar tener la habilidad de usar dichos temas en nuestra aplicaciones, y aquí les voy a explicar que tan sencillo es hacerlo.
Nota: es sencillo indicarle a Flutter como hacer el cambio, diseñar toda la interfaz oscura (el diseño) puede ser algo más complejo. Para eso recomiendo seguir las lineas de diseño oscuro en Material Design que Google nos regaló este i/o 2019
Activando el tema oscuro en Flutter
Nosotros sabemos que en flutter existe una maravilla llamada ThemeData que nos deja definir y usar de manera global ciertos colores y estilos de manera global en nuestra app y desde febrero (2019) el widget MaterialApp() agregó un parámetro nuevo a su constructor llamado darkTheme, este parámetro funciona en conjunto con theme, y es el encargado de guardar el tema oscuro que usara nuestra app cuando se le indique.
En este código vemos nuestra MaterialAPP con su tema definido, hay que indicar que este tema usara el brillo luminoso/claro para que los textos y demás elementos que dependen de este brillo se ajusten adecuadamente al contraste.
Para usar el tema oscuro basta con agregar la propiedad darkTheme que recibe un ThemeData el cual deberá tener un brillo oscuro.
Después de agregar dicho parámetro podremos notar que al cativar el tema oscuro nuestra app cambia automáticamente y empezará a usar el tema definido para dicho modo.
Como lo ves, es extremadamente sencillo hacer que nuestra app se adapte a ese tipo de cambios del sistema. Lo cual hace que nuestras apps sean mas atractivas para nuestros usuarios.
Eso no es todo
Gracias a que nuestro tema oscuro es un tema independiente, este puede cambiar algunos colores de acentuado, de textos, etc… permitiendo que adaptemos de una manera mas sencilla nuestra app, por ejemplo, si se tiene un color oscuro en alguna parte de la app, como un botón, al activarse el tema oscuro este color no tendrá un buen contraste y se perderá, pero al permitir crear un tema completo podremos cambiar el color de dicho botón de una manera sumamente sencilla.
¿Que hay de Cupertino/iOS?
Desgraciadamente flutter aun no da soporte en CupertinoApp() para definir un tema oscuro de manera independiente pero eso no impide que se usen los métodos ya conocidos para cambiar el tema en tiempo de ejecución, el único problema es que la app no identificara por si sola cuando el sistema haga el cambio a modo oscuro.
¿Que debe tener un tema oscuro?
Desgraciadamente no voy a profundizar eso en este post pero les dejare la conferencia dada por los chicos de Material Design explicando que debe tener un tema oscuro para funcionar de buena manera, desgraciadamente el vídeo se encuentra en ingles, pero planeo crear un post explicando lo que se menciona en dicho vídeo en español.
