¿Te gustaría aprender Desarrollo de Apps Móviles con Flutter?
Tenemos los diplomados que necesitas. ¡Haz clic aquí!
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.
MaterialApp(
title: 'Flutter Ejemplo Tema Oscuro',
//Tema Principal, se usa cuando no esta activo el modo oscuro
theme: ThemeData(
//Se india que este tema tiene un brillo luminoso
brightness: Brightness.light,
primarySwatch: Colors.pink,
),
);
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.
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.
Te esperamos en los siguientes artículos en donde hablaremos más acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
¿Te gustaría aprender Desarrollo de Apps Móviles con Flutter?
Tenemos los diplomados que necesitas. ¡Haz clic aquí!
