Cómo hacer una imagen con esquinas redondeadas en Flutter
Estoy usando Flutter para hacer una lista de información sobre películas. Ahora quiero que la imagen de portada de la izquierda sea una imagen con esquinas redondeadas. Hice lo siguiente, pero no funcionó. ¡Gracias!
getItem(var subject) {
var row = Container(
margin: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 150.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Colors.redAccent,
),
child: Image.network(
subject['images']['large'],
height: 150.0,
width: 100.0,
),
),
],
),
);
return Card(
color: Colors.blueGrey,
child: row,
);
}
como sigue
Aceptado
Úselo ClipRRect
funcionará perfectamente.
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
subject['images']['large'],
height: 150.0,
width: 100.0,
),
)
1. Imagen circular (sin borde)
Usando
CircleAvatar
:CircleAvatar( radius: 48, // Image radius backgroundImage: NetworkImage('imageUrl'), )
Usando
ClipRRect
:ClipOval( child: SizedBox.fromSize( size: Size.fromRadius(48), // Image radius child: Image.network('imageUrl', fit: BoxFit.cover), ), )
2. Imagen circular (con borde)
Usando
CircleAvatar
:CircleAvatar( radius: 56, backgroundColor: Colors.red, child: Padding( padding: const EdgeInsets.all(8), // Border radius child: ClipOval(child: Image.network('imageUrl')), ), )
Usando
ClipRRect
:Container( padding: EdgeInsets.all(8), // Border width decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle), child: ClipOval( child: SizedBox.fromSize( size: Size.fromRadius(48), // Image radius child: Image.network('imageUrl', fit: BoxFit.cover), ), ), )
3. Imagen redondeada (sin borde)
ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
)
4. Imagen redondeada (con borde)
final borderRadius = BorderRadius.circular(20); // Image border
Container(
padding: EdgeInsets.all(8), // Border width
decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
child: ClipRRect(
borderRadius: borderRadius,
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
),
)
Hay otras formas, como usar DecoratedBox
, pero eso haría que la respuesta fuera demasiado larga.