Flutter es compatible con paquetes de interfaces de usuario (UI) como los sistemas de diseño Material y Cupertino. Estos sistemas de diseño sirven para proporcionar una solución para una estética consistente y cohesiva en toda su aplicación.
Sin embargo, depender únicamente de los patrones de diseño predeterminados puede no alinearse estrechamente con sus necesidades desde una perspectiva de marca. En su lugar, es posible que desee utilizar los valores predeterminados como base a partir de la cual puede aplicar personalizaciones en la parte superior.
En este artículo, explorará algunos de los métodos para cambiar el aspecto general de sus aplicaciones con temas de Flutter.
Uso de temas predeterminados
El paquete Material de Google viene con dos temas incorporados: 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 en el widget de MaterialApp, en este caso, las opciones light() o dark().
Abra main.dart en su editor de código y modifique el tema a ThemeData.dark():
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
A continuación, puede probar la personalización avanzada del tema.
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 y desde Fluter dos el colorScheme.
Algunas de las propiedades de ThemeData también tienen una contrapartida de brillo, que controlan los widgets que se encuentran encima de ellas. Por lo tanto, accentColor cambiaría el botón, pero accentColorBrightness cambiará el texto o el icono del botón. Deberá usar las propiedades claras u oscuras en Brillo para lograrlo.
Abra main.dart en un editor de código y modifique ThemeData para usar un color primario, un color de acento y un brillo de color de acento personalizados:
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'),
);
}
}Adaptación de temas
También es posible tomar un tema existente y sobrescribir solo ciertas propiedades. Para extender un tema, puede usar el método copyWith para extenderlo y pasar sus estilos personalizados; esto mismo hacemos con la propiedad colorScheme, que tenemos una paleta de colores que podemos personalizar y para evitar colocarlos todos, usamos el copyWith para reutilizar estilos existentes.
Abra main.dart en un editor de código y modifique ThemeData para ampliar el tema oscuro:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark().copyWith(
//primaryColor: Colors.blue,
colorScheme: ColorScheme.fromSwatch().copyWith(
primary: Colors.purple,
secondary: Colors.red, // Your accent color
),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}El contenido principal de la aplicación aparece oscuro con texto claro. Sin embargo, la AppBar no es negra como el anterior experimento de tema oscuro. La AppBar es de color púrpura. El botón es rojo ya que es el color secundario:
A continuación, verá cómo aplicar temas a los widgets.
Uso de temas
Los experimentos anteriores se han basado en widgets de materiales. Estos widgets se han desarrollado para utilizar ThemeData. Si tuviera que crear un nuevo widget personalizado, debería asegurarse de que se le puedan pasar las propiedades del tema. Puede usar Theme.of() para acceder a todas las propiedades en ThemeData.
Aquí hay un ejemplo de cómo modificar el botón existente para usar diferentes propiedades de tema de ThemeData:
class _MyHomePageState extends State<MyHomePage> {
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
// ...
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.primary,
child: const Icon(Icons.add),
),
);
}
}Compile su código y haga que se ejecute en un emulador.
En lugar de un botón rojo, deberías observar un botón azul, (si descomendas el primaryColor: Colors.blue).
Conclusión
En este artículo, aprendiste a usar, personalizar y extender temas en Flutter.
Los temas son una herramienta poderosa para crear una estética consistente y cohesiva en toda su aplicación.
Consulta la documentación oficial para más información.
Articulo original:
https://www.digitalocean.com/community/tutorials/flutter-themes
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter