728x90
ClipRRect
위 이미지처럼 플러터에서 콘텐츠박스나 이미지를 둥글게 표현하고 싶을 때 어떤 위젯을 쓸 수 있을까?
바로 ClipRRect이다!
플러터 공식문서에 따르면 R은 Round의 R이라고 한다!
ClipRRect위젯 borderRadius값에 둥근 모서리 값을 정할 수 있다
모든 모서리에 같은 값으로 둥글게 하고 싶다면 아래와 같이 할 수 있다
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: image,
),
BorderRadius 위젯의 Constructors은 아래와 같다!
원하는 모양에 따라 선택하면 된다!
/// Creates a border radius where all radii are [radius].
const BorderRadius.all(Radius radius) : this.only(
topLeft: radius,
topRight: radius,
bottomLeft: radius,
bottomRight: radius,
);
/// Creates a border radius where all radii are [Radius.circular(radius)].
BorderRadius.circular(double radius) : this.all(
Radius.circular(radius),
);
/// Creates a vertically symmetric border radius where the top and bottom
/// sides of the rectangle have the same radii.
const BorderRadius.vertical({
Radius top = Radius.zero,
Radius bottom = Radius.zero,
}) : this.only(
topLeft: top,
topRight: top,
bottomLeft: bottom,
bottomRight: bottom,
);
/// Creates a horizontally symmetrical border radius where the left and right
/// sides of the rectangle have the same radii.
const BorderRadius.horizontal({
Radius left = Radius.zero,
Radius right = Radius.zero,
}) : this.only(
topLeft: left,
topRight: right,
bottomLeft: left,
bottomRight: right,
);
/// Creates a border radius with only the given non-zero values. The other
/// corners will be right angles.
const BorderRadius.only({
this.topLeft = Radius.zero,
this.topRight = Radius.zero,
this.bottomLeft = Radius.zero,
this.bottomRight = Radius.zero,
});
/// Returns a copy of this BorderRadius with the given fields replaced with
/// the new values.
BorderRadius copyWith({
Radius? topLeft,
Radius? topRight,
Radius? bottomLeft,
Radius? bottomRight,
}) {
return BorderRadius.only(
topLeft: topLeft ?? this.topLeft,
topRight: topRight ?? this.topRight,
bottomLeft: bottomLeft ?? this.bottomLeft,
bottomRight: bottomRight ?? this.bottomRight,
);
}
/// A border radius with all zero radii.
static const BorderRadius zero = BorderRadius.all(Radius.zero);
ClipRRect 같은 위젯은 특정한 렌더 객체를 렌더 트리에서 그 자손 위에 삽입해서 작동한다고 한다
그래서 재구성될 때 마다 렌더 객체는 클립을 추가한다
둥글게 설정하는 것 외에도 clipBehavior 속성으로 테두리 부분을 취향에 맞게 바꿀 수 있다
[옵션]
If the content does overflow, please explicitly specify the following Clip options:
- hardEdge, which is the fastest clipping, but with lower fidelity.
- antiAlias, which is a little slower than hardEdge, but with smoothed edges.
- antiAliasWithSaveLayer, which is much slower than antiAlias, and should rarely be used.
또한, ClipRRect말고도 ClipOval, ClipPath등과 같은 위젯을 사용하면 다양한 모양을 만들 수 있다
[참고]
https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
'IT > 기록' 카테고리의 다른 글
[Gmail] 특정 보낸 사람 메일이 프로모션 수신함으로 자동 분류 (0) | 2022.10.20 |
---|---|
Nest (NestJS) CORS 설정 (1) | 2022.10.18 |
우분투 Jenkins 설치하기 (0) | 2022.08.12 |
[Flutter] Firebase Authentication을 사용하여 구글 계정 인증하기 (0) | 2022.08.10 |
[Flutter] Flutter 앱에 Firebase 파이어베이스 설정하기 (0) | 2022.08.08 |