오랜만에 디자인 레이아웃 하나 따라하고있는데
사진과 같이 사선으로 나눠진 컨테이너를 만들어야 했다.
한번도 해보지 못한 디자인이면서
흔한 디자인이라 뭔가 놓치고 싶지않은 디테일이였다.
이번 시간에는 CustomClipper를 이용해 컨테이너를 잘라볼것이다.
방법만 이해하면 상당히 쉽다.
ClipPath(
clipper: CustomRectClipper(),
child:
Container(
height = 300,
width = 300,
child: Column(
),
),
),기본 구조이다.
사용할 컨테이너를 ClipPath로 감싸주고
cliper를 지정해주면된다.
class CustomRectClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path()
..lineTo(0.0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, 20)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
시작과 각 꼭지점이 있다.
시작점 -> lineTo(0.0, size.height) -> lineTo(size.width, size.height) ->
lineTo(size.width, 20) 이렇게 이동한다.
좀더 풀어서 말하면
(x축, y축)이다.
시작점(0,0)
↓
(0,size.height)
↓
(size.width, size.height)
↓
(size.width, 20)
마지막 3 -> 시작점은 안그려줘도 되는것 같다.
그렇다면 윗 부분 컨테이너는 어떻게 할까?
시작점(0,0)
↓
(0,size.height-20)
↓
(size.width, size.height)
↓
(size.width, 0)
사선의 정도는 20이라고 했다.
본인 디자인에 맞게 조정하면 된다.
곡선을 그리는 법도 있지만...
아직 난 안필요하기에 Skip~