1

La imagen que quiero colocar es un logo que aparece "por encima" de una imagen background de fondo que cubre toda la pantalla. Esta es la imagen que no puedo centrar:

new Image(
                image: new AssetImage('logo_transparent.png'),
                height: 180,
                alignment: Alignment.center
              )

Me pregunto por qué la propiedad "alignment" no me está funcionando? Ya ponga center, bottom, bottomcenter, etc...la imagen no se mueve. La propiedad "height" si funciona.

Aquí todo el código:

class LoginPageState extends State<LoginPage>{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.black,
      body: new Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Image(
            image: new AssetImage('assets/adult-blur-camera-368893.jpg'),
            fit: BoxFit.cover,
            color: Colors.black54,
            colorBlendMode: BlendMode.darken
          ),
          new Column(
            children: <Widget>[
              new Image(
                image: new AssetImage('logo_transparent.png'),
                height: 180,
                alignment: Alignment.center
              )
            ],
          )
        ],
      ),
    );
  }
}
1
  • Vale Lo acabo de solucionar viendo un tutorial que ponen "mainAxisAlignment: MainAxisAlignment.center," justo antes del widget de Children. De todas formas si alguien me puede indicar por qué de la forma inicial que lo puse no funciona, lo agradecería. Commented el 20 jun. 2019 a las 10:53

1 respuesta 1

1

Por defecto el Column ocupa todo el espacio disponible, y usa la alineación topCenter por eso se muestra la imagen arriba, con el mainAxisAlignment: MainAxisAlignment.center, estás moviendo el contenido al centro, otra solución más sencilla es usar el widget Center.

Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.black,
      body: new Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Image(
              image: new AssetImage('assets/adult-blur-camera-368893.jpg'),
              fit: BoxFit.cover,
              color: Colors.black54,
              colorBlendMode: BlendMode.darken),
          new Center(
              child: Image(
                  image: new AssetImage('logo_transparent.png'),
                  height: 180,))
        ],
      ),
    );
  }

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.