본문 바로가기

Flutter-플러터/플러터로 첫 코딩!

플러터로 첫 코딩하기! 18 - Padding과 Margin

반응형

 

 

처음엔 왜 이런 기능이 있는지 이해를 못했습니다;  

그냥 Row나, Column으로 정렬을 하면 그만 아닌가? 싶었습니다. 

 

 

하지만 Row, Column으로는 Padding과 Margin 기능을 절대 할 수 없다는 걸 깨닫고 

저 또한 애용중입니다. 

 

모바일 화면을 구성할 때 가장 중요한 부분이 "여백" 입니다. 

작은 화면에 위젯들이 빽빽하게 넣어져 있다면 가독성면으로 좋지 않습니다. 

 

그런 "여백"을 깔끔하게 만들어 주는게 바로 

 

Padding과 Margin입니다. 하지만 차이점이 있습니다. 

 

Padding은 안쪽 

Margin은 바깥쪽  

 

여백을 만들어 줍니다. 

 

Container(
padding : EdgeInsets.all(설정값)  || EdgeINsets.fromLTRB(설정값,설정값,설정값,설정값)
margin : EdgeInsets.all(설정값)  || EdgeINsets.fromLTRB(설정값,설정값,설정값,설정값)
)

많이 쓰이는 아래와 같습니다. 

사용법은 padding : EdgeInsets.all( 10) => 내부 공간 상하좌우를 10만큼 여백을 만들어라  ,

EdgeInsets.fromLTRB(40,30,20,10) => 내부 공간을 왼쪽은 40, 위는 30, 오른쪽은 30, 아래쪽은 10 만큼 여백을 만들어라 

 

 

 

 

다음에는 Container를 decoration으로 꾸며보는 것을 알아보겠습니다. 

728x90
반응형