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:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensió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 createproducirá 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 ThemeDatael MaterialAppwidget, en este caso, las opciones light()o dark().

Ábrelo main.darten tu editor de código y modifícalo themea 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 ThemeDatatambién tienen una contraparte de brillo, que controla los widgets que se encuentran sobre ellas. Por lo tanto, accentColorcambiaría el botón, pero accentColorBrightnesscambiará el texto o el ícono del botón. Deberá usar las propiedades lighto de para lograrlo.darkBrightness

Ábralo main.darten un editor de código y modifíquelo ThemeDatapara 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 copyWithmétodo para extenderlo y pasarle sus estilos personalizados.

Ábralo main.darten un editor de código y modifíquelo ThemeDatapara ampliar el darktema:

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.