1

Tengo el siguiente código y no me redondea los bordes de la imagen:

final imagen = Container(
      margin: EdgeInsets.only(
        top:80.0,
        left: 20.0,
      ),
      decoration: BoxDecoration(
          color: Colors.yellow,  //PARA PROBAR CONTAINER
          borderRadius: new BorderRadius.circular(2.0),
          boxShadow: [new BoxShadow(          //SOMBRA
            color: Color(0xffA4A4A4),
            offset: Offset(1.0, 5.0),
            blurRadius: 3.0,
          ),]

      ),

          child: Image.network(
            String_imagen,
            height: 220.0,
            width: 330.0,

            ),


      );

Foto de como me queda:

introducir la descripción de la imagen aquí

1
  • Puedes revisar la respuesta para no dejar abierta esta pregunta ? el 25 nov. 2019 a las 15:33

3 respuestas 3

1

Recién veo esta pregunta, es que no estaba con el tag de Flutter, la actualizaré. De todas maneras voy a responder por si alguien busca la solución.

El problema es que el border solo lo aplica al Container, más no al child(Image), tienes varias opciones para solucionar esto, por ejemplo agregar un ClipOval widget al Container para cortarlo.

Pondré aquí la solución más sencilla, ya que estas usando Container y BoxDecoration, puedes aprovechar la propiedad image del BoxDecoration.

    Container(
                margin: EdgeInsets.only(
                  top: 80.0,
                  left: 20.0,
                ),
                height: 220.0,
                width: 330.0,
                decoration: BoxDecoration(
                    color: Colors.yellow, //PARA PROBAR CONTAINER
                    borderRadius: new BorderRadius.circular(10.0),
                    image: DecorationImage(
                      image: NetworkImage(
                        "https://img.depor.com/files/ec_article_multimedia_gallery/uploads/2018/07/05/5b3e3ad01bd47.jpeg",
                      ),
                      fit: BoxFit.cover,
                    ),
                    boxShadow: [
                      new BoxShadow(
                        //SOMBRA
                        color: Color(0xffA4A4A4),
                        offset: Offset(1.0, 5.0),
                        blurRadius: 3.0,
                      ),
                    ]),
              ),
0

En estos casos, se puede envolver el child dentro del widget Image(), y setearle el fit, así tomará los parámetros del box decoration del container. Algo así por ejemplo:

child: Image(image: AssetImage('assets/no-image.png'),
             isAntiAlias: true,
             fit: BoxFit.fill,
       ),
0

puedes resolver esto envolviendo tu imagen con el widget ClipRRect, te dejo un fragmento del código que estoy desarrollando.

ClipRRect(
                            borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(5.0),
                              topLeft: Radius.circular(5.0),
                            ),
                            child: FadeInImage(
                              placeholder:
                                  AssetImage('assets/loading-gif2.gif'),

                              image: NetworkImage(
                                imgs[0],
                              ),
                              //height: 40,
                              fit: BoxFit.fill,
                            ),
                          )

Tu Respuesta

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

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