[Flutter] 05. 박스 디자인 - decoration(border, border radius, box shadow)

 

 

 

 

🤷‍♂️ Decoration

---

Container에서 border나 기타 등등을 넣어주려면 decoration()을 활용해야 합니다.

 

 

이렇게 decoration 안에 BoxDecoration을 통해서 박스에 대한 꾸밈을 설정할 수 있고

색, 테두리, 배경어쩌구모드, 테두리 기울기, 박스그림자 등등.. 을 이곳에서 정의합니다.

 

 

 

현재 위 코드처럼 짜면 에러가 나는데 그 이유는 Color를 중복으로 지정해 줬기 때문입니다.

dercoration을 사용하면 color는 decoration 안에서 정의해줘야 합니다.

 

 

🚀 Border

---

border에 대한 속성들은 width와 style이 있습니다.

width는 테두리 두께이고 style에 대한 정보는 없습니다.

dashed나 dotted 이런거 하려면 다른 방법들로 사용해야 합니다.

 

 

 

🚀Border Radius

---

테두리 기울기는 위와 같이 사용하는데

적용하는 다양한 방법들이 존재합니다.

 

 

이렇게 사용하면 처음에 쓴거 처럼 전부 적용하는 것이고

 

 

horizontal을 이용하면 좌우로 설정할 수 있고

 

 

vertical은 top, bottom으로 지정

 

 

only를 사용하면 4가지 꼭지점을 이용해서 만들 수 있습니다.

 

 

 

 

 

이런거도 가능합니다. 그래가지구

 

 

이런식으로도 만들 수 있습니다.

 

 

 

🚀Box Shadow

---

box shadow는 위처럼 사용할 수 있습니다.

색과 블러 처리, 두께 등을 설정할 수 있습니다.

 

 

color 속성으로 색 지정을 할 수 있고

spreadRadius를 통해서 두께를 지정하고

blurRadius를 통해서 흐림 처리의 정도를 지정하고

offset 속성으로 좌표 값을 추가해 그림자 위치를 옮길 수 있습니다.