[Flutter] Widget에 Border 추가하기

React 혹은 RN에서 넘어왔기 때문에 각 객체에 border 속성이 있는 것은 당연한 개념이였다.

하지만 이게 뭐람 Flutter의 Widget에는 style이 없는 것도 있었다.

 

종종 decoration을 통해 여러 속성을 설정 할 수 있는 Widget이 있었지만

모든 Widget이 border를 설정할 수 있는 옵션은 없었다.

 

다행히도 구글에서 손쉽게 그 방법을 찾을 수 있었다.

내가 찾은 글은 아래 링크와 같다.

https://stackoverflow.com/questions/47423297/how-can-i-add-a-border-to-a-widget-in-flutter

How can I add a border to a widget in Flutter?

 

위 글의 답변은 다음과 같다. 

Border가 필요하다면 DecoratedBox라는 Widget을 사용하면 된단다.

그러나 우리가 앞서 말했듯, React 혹은 RN, 심지어 Android까지 Border가 있으면 무엇이 있나?

바로 Margin과 Padding이다. 하지만 위 소개한 DecoratedBox 는 이러한 속성이 없다...(너무 분리해 놓은거 아닌가?)

 

때문에 Container 를 사용하려한다.

Container 는 DecoratedBox 와 같이 우리가 필요한 Border를 적용시키는 decoration 속성이 있다.

또한 margin과 padding이 있어 익숙하게 사용 할 수 있다.

다만 DecoratedBox 의 문서에 설명되어있듯,

Container insets its child by the widths of the borders; this widget does not.

Container는  테두리의 크기만큼 child를 안쪽으로 밀어넣지만 DecoratedBox는 그렇지 않다는 점이 다르다.

또한 position 속성의 유무 또한 차이가 난다. 이는 추후에 알아보려고 한다.(*** 언젠간! ***)

 

+++ 간단하게 position에 대해 사용해 보니 직관적으로 알 수 있었다.

positoin : DecorationPosition.foreground

position : DecorationPosition.background