Cómo usar temas en Flutter
Introducción
Flutter cuenta con el respaldo de paquetes de interfaces de usuario (UI) como los sistemas de diseño Material y Cupertino. Estos sistemas de diseño sirven para brindar una solución para lograr una estética coherente y consistente en toda la aplicación.
Sin embargo, confiar únicamente en los patrones de diseño predeterminados no puede ajustarse a sus necesidades desde una perspectiva de marca. Es posible que prefiera utilizar los valores predeterminados como base a partir de los cuales pueda aplicar personalizaciones.
En este artículo, explorará algunos de los métodos para cambiar el aspecto general de sus aplicaciones con temas de Flutter.
Prerrequisitos
Para seguir este artículo necesitarás:
- Para descargar e instalar Flutter.
- Para descargar e instalar Android Studio o Visual Studio Code.
- Se recomienda instalar complementos para su editor de código:
Flutter
yDart
complementos instalados para Android Studio.Flutter
extensión instalada para Visual Studio Code.
Este artículo fue verificado con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1.
Paso 1: Configuración del proyecto
Para los fines de este artículo, confiará en la aplicación de demostración que se genera cuando se crea una nueva aplicación Flutter.
Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:
- flutter create flutter_themes_example
Navegue hasta el nuevo directorio del proyecto:
- cd flutter_themes_example
El uso flutter create
producirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón:
Ahora que tienes una aplicación Flutter en funcionamiento que utiliza los componentes de interfaz de usuario de Material Design, puedes aplicar la primera personalización al tema.
Paso 2: Uso de temas predeterminados
El paquete Material de Google viene con dos temas integrados: una versión clara (que es la predeterminada) y una versión oscura.
Para configurar los estilos en toda la aplicación, deberá configurar el tema en un método en ThemeData
el MaterialApp
widget, en este caso, las opciones light()
o dark()
.
Ábrelo main.dart
en tu editor de código y modifícalo theme
a ThemeData.dark()
:
lib/main.dart
// ...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.dark(), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}// ...
Compila tu código y ejecútalo en un emulador:
A continuación, puedes probar la personalización avanzada del tema.
Paso 3: Uso de temas globales
También es posible pasar parámetros directamente a ThemeData
. La documentación oficial enumera todas las propiedades disponibles, que incluyen primaryColor
, fontFamily
, y cursorColor
.
Algunas de las propiedades de ThemeData
también tienen una contraparte de brillo, que controla los widgets que se encuentran sobre ellas. Por lo tanto, accentColor
cambiaría el botón, pero accentColorBrightness
cambiará el texto o el ícono del botón. Deberá usar las propiedades light
o de para lograrlo.dark
Brightness
Ábralo main.dart
en un editor de código y modifíquelo ThemeData
para usar un primaryColor
, accentColor
, y accentColorBrightness
:
lib/main.dart
// ...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Colors.purple[800], accentColor: Colors.amber, accentColorBrightness: Brightness.dark ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}// ...
Compila tu código y ejecútalo en un emulador:
La barra de aplicaciones aparece en un tono violeta con texto blanco. El botón aparece en color ámbar con símbolos oscurecidos.
A continuación, puedes intentar ampliar los temas.
Paso 4: Adaptación de temas
También es posible tomar un tema existente y sobrescribir solo ciertas propiedades. Para ampliar un tema, puede utilizar el copyWith
método para extenderlo y pasarle sus estilos personalizados.
Ábralo main.dart
en un editor de código y modifíquelo ThemeData
para ampliar el dark
tema:
lib/main.dart
// ...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.dark().copyWith( primaryColor: Colors.purple[800], accentColor: Colors.amber, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}// ...
Compila tu código y ejecútalo en un emulador:
El contenido principal de la aplicación aparece oscuro con texto claro. Sin embargo, la AppBar no es negra como en el experimento anterior con tema oscuro. La AppBar es violeta. El botón no es turquesa como en el experimento anterior con tema oscuro. El botón es ámbar.
A continuación, verás cómo aplicar temas a los widgets.
Paso 5: Uso de temas
Los experimentos anteriores se basaron en widgets de Material. Estos widgets se desarrollaron para usar ThemeData
. Si tuvieras que crear un nuevo widget personalizado, deberás asegurarte de que se puedan pasar las propiedades del tema. Puede usar Theme.of()
para acceder a todas las propiedades en ThemeData
.
A continuación se muestra un ejemplo de modificación del botón existente para utilizar diferentes propiedades de tema ThemeData
:
lib/main.dart
// ...class _MyHomePageState extends StateMyHomePage { // ... @override Widget build(BuildContext context) { return Scaffold( // ... floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', backgroundColor: Theme.of(context).primaryColor, foregroundColor: Theme.of(context).primaryColorLight, child: Icon(Icons.add), ), ); }}
Compila tu código y ejecútalo en un emulador.
En lugar de un botón turquesa, deberías observar un botón oscuro con un ícono claro.
Conclusión
En este artículo, aprendí a usar, personalizar y ampliar temas en Flutter.
Los temas son una herramienta poderosa para crear una estética consistente y cohesiva en toda su aplicación.
Consulte la documentación oficial para más información.
Deja una respuesta