0

tengo el siguiente Widget:

class PoinstsDisplayState extends State<PoinstsDisplay> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: MediaQuery.of(context).size.width*0.9,
      margin: EdgeInsets.only(top: 20.0),
      padding: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Color(0xff2b2b2b),
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: new Text(
        '5000 Pts',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 20.0,
          fontFamily: 'Karla'
        ),
      )
    );
  }
}

Este se ve así:

introducir la descripción de la imagen aquí

Tal cual se ve esta perfecto, sin embargo ahora necesito darle estilos al numero de manera independiente del texto 'Pts', para esto necesito tener 2 Text's centrados de manera que se vean exactamente igual que en la imagen, lo cual no he logrado hacer, he intentado con Row, mas Container's, la clase Center, etc y no lo he conseguido.

Se agradece cualquier ayuda.

1 respuesta 1

2

Para el caso de textos en una línea con diferentes estilos puedes hacerlo de una forma más sencilla usando el RichText widget, mira como quedaría:

        Container(
                    width: MediaQuery.of(context).size.width * 0.9,
                    margin: EdgeInsets.only(top: 20.0),
                    padding: EdgeInsets.all(10.0),
                    decoration: BoxDecoration(
                      color: Color(0xff2b2b2b),
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: RichText(
                      textAlign: TextAlign.center,
                      text: TextSpan(
                        text: '5000 ',
                        style: TextStyle(fontSize: 35.0, fontFamily: 'Karla'),
                        children: [
                          TextSpan(
                              text: 'Pts',
                              style: TextStyle(fontSize: 20.0, fontFamily: 'Karla')),
                        ],
                      ),
                    ),
                  ),

Así le puedes aplicar diferentes estilos a cada TextSpan.

Puedes encontrar más info aquí : https://docs.flutter.io/flutter/widgets/RichText-class.html

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.