Flutter — Widgets de estilo

Widgets de estilo para manejar tema, tamaño y margen de la aplicación.

Flutter cuenta con una gran cantidad de widgets ya creados y listos para usar. También nos da la oportunidad de generar nuestros propios widgets personalizados dependiendo de cada una de las necesidades. En su documentación los tienen categorizados, exploraremos un poco cada una de estas categorías.

Widgets de estilo

Dentro de esta categoría se encuentran tres widgets: MediaQuery, Padding y Theme.

Theme

Por medio de este widget podemos administrar el tema de toda nuestra aplicación Flutter. Se puede aplicar a todos los widgets que utilicemos por separado, el impacto de un tema es sobre todo en colores y tipografía.

Configuración

La configuración del tema se realiza desde nuestro main.dart en MaterialApp.theme allí se recibe el objeto ThemeData. Este objeto tiene todo lo necesario para la configuración del tema para todos los widgets hijos dentro de MaterialApp.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(),
    home: const MyHomePage(title: 'Flutter'),
  );
}

Uso

Los widgets hijos pueden usar el tema global por medio del método Theme.of el cual recibe el contexto actual (BuildContext) y devuelve un objeto ThemeData. Los componentes de material por lo general dependen de las propiedades colorScheme y textTheme.

Cuando usamos Theme.of en un widget, éste se reconstruye si el tema cambia posterior a su llamado, para poder aplicar los cambios.

// declaración para obtener todos los textTheme
final textTheme = Theme.of(context).textTheme;

// dentro de un Text
Text(
  widget.title,
  style: textTheme.titleLarge,
)

Propiedades de ThemeData

Veremos algunas de las propiedades que tiene la clase ThemeData.

• colorScheme es un conjunto de colores (30) que son basados dados por material que se aplican a los diferentes componentes.
• textTheme es la propiedad con la que se puede configurar los textos de la aplicación.
• appBarTheme por medio de esta propiedad se configura el tema para los AppBar.
• bottomNavigationBarTheme se personaliza el tema para los BottomNavigationBar.
• brightness esta propiedad sirve para establecer si el fondo del tema será blanco o negro, utilizando las propiedades Brightness.light y Brightness.dark.
• cardColor administra el color y estilos del widget Card.
• extensions sirve para agregar nuevos temas personalizados.
• typograhy administra el color y geometría de los textos.
• useMaterial3 false, si desea desactivar diseños de Material 3 y true, si desea activarlos. En las últimas versiones de Flutter ya viene true por defecto.

Estas fueron algunas de las propiedades que maneja ThemeData, para revisar las demás pueden consultar la documentación.

Ejemplo personalizando colorScheme y textScheme

Ejemplo usando combinación de colores de material 3

Padding

El Padding es un widget que nos permite crear un espacio alrededor del widget child el cual es rellenado con el color del fondo.

propiedades de Padding

Maneja dos propiedades obligatorias que recibe como parámetros.

• padding es el que determina la margen en píxeles desde los bordes hasta el widget hijo. Esta propiedad recibe un objeto EdgeInsets que hace referencia a las cuatro direcciones cardinales: izquierda (left), arriba (top), derecha(right) y abajo (bottom).

Tiene algunos métodos de instancia para generar las márgenes dependiendo del punto de partida.

// all
// coloca el mismo tamaño de margen en todos los lados
const EdgeInsets.all(8.0)

// symmetric
// vertical: coloca el mismo tamaño arriba y abajo
// horizontal: coloca el mismo tamaño izquierda y derecha
const EdgeInsets.symmetric(vertical: 8.0)

// only
// tiene los 4 lados left, right, top, bottom
const EdgeInsets.only(left: 40.0)

• child es el widget hijo al cual se le aplicará el padding configurado.

Ejemplo agregando un Text dentro de una Card

MediaQuery

MediaQuery nos sirve para que podamos usar correctamente el tamaño de la pantalla en nuestros widgets. Para conocer el tamaño de la pantalla actual se puede usar MediaQuery.sizeOf(context) , también es posible obtener el padding actual con MediaQuery.paddingOf(context) . Hay muchas otras propiedades que se pueden utilizar pero las anteriores son las más comunes, para más información podemos consultar MediaQueryData.

final currentSize = MediaQuery.sizeOf(context);
print(currentSize);
// flutter: Size(430.0, 932.0)

final currentPadding = MediaQuery.paddingOf(context);
print(currentPadding);
// aquí imprime en el orden: left, top, right, bottom
// flutter: EdgeInsets(0.0, 59.0, 0.0, 34.0)

Sino hay MediaQuery dentro del context que queremos usarlo podría generar una excepción al utilizar métodos como MediaQuery.sizeOf o MediaQuery.paddingOf para esto es posible usar los métodos maybe .

final currentSize = MediaQuery.maybeSizeOf(context);
final currentPadding = MediaQuery.maybePaddingOf(context);

Existen muchas más propiedades de MediaQuery que podemos utilizar como MediaQuery.orientationOf entre otras, para más información podemos consultar en MediaQuery.

Conclusión

Iniciamos a revisar las diferentes categorías de widgets que hay en el catálogo de widgets, los primeros fueron los widgets de estilos donde vimos diferentes formas de uso.

¡¡¡Gracias por leer este artículo!!!

Siguiente artículo

Seguiremos viendo sobre widgets, en este caso widgets de texto.

Código fuente

GitHub – jaimetellezb/widget-catalog at feature/styling-widgets

Referencias

• https://docs.flutter.dev/ui/widgets/styling