network image rounded corner 적용(코너 라운드)

1. Circular image (without border)

• Using CircleAvatar:
• CircleAvatar( radius: 48, // Image radius backgroundImage: NetworkImage('imageUrl'), )
• Using ClipRRect:
• ClipOval( child: SizedBox.fromSize( size: Size.fromRadius(48), // Image radius child: Image.network('imageUrl', fit: BoxFit.cover), ), )

---

2. Circular image (with border)

• Using CircleAvatar:
• CircleAvatar( radius: 56, backgroundColor: Colors.red, child: Padding( padding: const EdgeInsets.all(8), // Border radius child: ClipOval(child: Image.network('imageUrl')), ), )
• Using 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. Rounded image (without border)

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

---

4. Rounded image (with border)

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),
    ),
  ),
)

There are other ways, like using DecoratedBox but that would make the answer bit too long.

 

참고 사이트

https://stackoverflow.com/questions/51513429/how-to-do-rounded-corners-image-in-flutter