Saltar al contenido

Tamaño de fuente predeterminado de Flutter

Solución:

Encontré una mejor manera para el tamaño de fuente predeterminado anulando el tema del texto del material.

Referencia: https://api.flutter.dev/flutter/material/TextTheme-class.html

Por ejemplo: body1 es para los widgets de texto normales, por lo tanto, para el color rojo para todos los widgets de texto

 theme: ThemeData(
        textTheme: TextTheme(body1: TextStyle(backgroundColor: Colors.red))
      )

Resultado:

ingrese la descripción de la imagen aquí

Deberías preferir la composición a la herencia.

class Mono12Text extends StatelessWidget {
  final String data;
  final TextAlign align;
  final TextStyle style;

  Mono12Text(
    this.data, {
    this.align,
    TextStyle style = const TextStyle(),
  }) : style = style.copyWith(
          fontFamily: 'Monospace',
          fontSize: 12,
        );

  @override
  Widget build(BuildContext context) {
    return Text(
      data,
      textAlign: align,
      style: style,
    );
  }
}

Un tema de Flutter define no uno, sino muchos tamaños de fuente predeterminados. El tamaño utilizado depende de la situación, por ejemplo, un widget de texto normalmente usaría body estilo, pero el mismo widget usaría button estilo si se usa dentro de un botón.

Encontré dos formas de aumentar todos los tamaños de fuente en una aplicación Flutter.

Solución simple: ajuste el tema predeterminado

MaterialApp(
  theme: ThemeData(
    textTheme: Theme.of(context).textTheme.apply(
          fontSizeFactor: 1.1,
          fontSizeDelta: 2.0,
        ),
  ),
  ...
);

El tamaño de fuente resultante es (originalSize * fontSizeFactor + fontSizeDelta). Entonces, en el ejemplo anterior, todos los tamaños de fuente se incrementan en un 10% y luego adicionalmente en 2.

Solución con más control: defina todos los tamaños a mano

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18.0),
      bodyText2: TextStyle(fontSize: 16.0),
      button: TextStyle(fontSize: 16.0),
      ...  // and so on for every text style
    ),
  ),
  ...
);

La lista completa de estilos se puede encontrar en https://api.flutter.dev/flutter/material/TextTheme-class.html.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *