0

tengo un inconveniente que no puedo resolver, quiero meter una imagen de fondo en un Dialog para ello en el hijo del dialog tengo un container y este container quiero que si o si tenga borders redondeados pero que la imagen de fondo se adapte al borde redondeado ya intente haciendolo o una la imagen se desborda y me tapa el borde o queda mas chico que el container aqui agrego mi codigo en este caso la imagen queda mas chico en los laterales.

 void showDialogWhereIsPin(BuildContext contextoVerPin){
  final tamanoPhone = MediaQuery.of(contextoVerPin).size;
 showDialog(
  context: context,
  builder: (BuildContext context) {
  return Dialog(
    backgroundColor: Colors.transparent,
    shape: RoundedRectangleBorder(
        borderRadius:
            BorderRadius.circular(20.0)), //this right here
    child: Container(

      decoration: BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(20.0)),
         color: Colors.white
      ),
      height: tamanoPhone.height * 0.5,
      child: Stack(
            children: <Widget>[
                  Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(20.0))
                      ),
                      child: Image(image: AssetImage("assets/imagenes/fondo_fridolin.jpg"), 
              height: tamanoPhone.height * 0.5, width: 300,)
                    )
            ],
      )
    ),
   );
  });

}

ahora tampoco quisiera que el dialog se vea el largo de toda la pantalla o si existe alguna propiedad o como hacer para achicar el alto de un dialog? tambien me vendria de gran ayuda, muchas gracias aqui dejo una imagen de como me queda de feo.

Asi me queda mi dialog eso blanco a los laterales no me gustan

o tambien si existiera algun paquete en ayudarme a hacer eso? aunq seria el ultimo recurso ya que no quiero usar paquetes.

Gracias de antemano.

1 respuesta 1

1

Es sencillo, puedes usar AlertDialog agregándole Center encima para que tenga constraints y así pueda mostrarse del tamaño que le indiques, mira este ejemplo que preparé:

void showDialogWhereIsPin(BuildContext contextoVerPin) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Center(
          child: AlertDialog(
            backgroundColor: Colors.transparent,
            contentPadding: EdgeInsets.zero, //this right here
            content: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Container(
                height: 100,
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Image.network(
                      'https://wallpapercave.com/wp/wp4759213.jpg',
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

Solo cambia el Image.network por Image.asset("assets/imagenes/fondo_fridolin.jpg",fit: BoxFit.cover,)

Tambien puedes cambiar el height: 100, que le puse al container y usar tamaños que elijas o incluso puedes quitarle y que se ajuste al contenido que agregues.

1
  • Muchas Gracias diegoVeloper el 2 jun. 2020 a las 21:49

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.