close

Formateo de IU con ThemeData y Personalizado Styles en Flutter

En Flutter, puede formatear la apariencia de su aplicación usando ThemeData y personalizar el archivo styles. ThemeData es una clase que contiene propiedades para definir el color dominante styles, fuentes, padding etc. para toda la aplicación. Estilo personalizado le permite personalizar styles para cada archivo específico Widget. Aquí hay instrucciones detalladas sobre cómo usar ThemeData y personalizar Styles en Flutter:

ThemeData

En Flutter, ThemeData es una clase que contiene atributos para definir el color principal, la familia de fuentes padding y muchas otras opciones de estilo para toda la aplicación. Al usar ThemeData, puede cambiar rápidamente la apariencia general de su aplicación sin tener que modificar cada una de ellas Widget.

Atributos comunes de ThemeData:

  • primaryColor: el color principal de los elementos principales de la aplicación, como la barra de la aplicación, los botones, etc.
  • accentColor: El color de acento para elementos secundarios o resaltados en la interfaz de usuario, como FloatingActionButton.
  • backgroundColor: El color de fondo de toda la aplicación.
  • textTheme: define el texto principal styles para diferentes elementos de texto en la aplicación, como encabezados, texto del cuerpo, etc.
  • textTheme.headline1: estilo de texto para encabezado de nivel 1.
  • textTheme.headline2: estilo de texto para encabezado de nivel 2.
  • textTheme.bodyText1: Estilo de texto para el texto del cuerpo principal.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

Estilo personalizado

Personalizado Styles le permite personalizar el estilo para cada archivo específico Widget. Al usar el style atributo de Widgets como Texto, Contenedor, Botón elevado, etc., puede cambiar la fuente, el color, el tamaño del texto padding y varios otros atributos.

Atributos comunes de TextStyle(utilizado para Text Widget):

  • fontSize: El tamaño de fuente.
  • fontWeight: El peso de la fuente.
  • color: El color del texto.
  • fontStyle: El estilo de fuente, como negrita, cursiva.
  • letterSpacing: El espaciado entre caracteres.
  • wordSpacing: El espacio entre palabras.
  • decoration: La decoración del texto, como subrayado, tachado.

Ejemplo usando personalizado Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

usando Themes y Styles con MediaQuery

Puede combinar Themes y Styles con MediaQuery para ajustar la interfaz de usuario según el tamaño de la pantalla o la resolución del dispositivo.

Ejemplo:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Conclusión:

Flutter proporciona herramientas poderosas para formatear la interfaz de usuario de su aplicación. Al usar ThemeData y personalizar Styles, puede ajustar fácilmente elementos de la interfaz de usuario, como colores, fuentes, tamaños de texto, etc., para crear una interfaz hermosa y atractiva para su aplicación.