flutter에 스타일(margin, padding, border, border-radius) 적용하기

시작하기

웹에서 엘리먼트에 스타일을 넣으려면 css를 사용하는 것은 대부분 아는 사실입니다. 크로스 플랫폼의 react native의 경우에는 js와 같은 방식으로 사용합니다. 하지만 사용방법은 크게 다르지 않죠.

flutter에서는 margin, padding, border, border-radius 등을 어떻게 넣을 수 있을까 사용해보도록 하겠습니다.

기본

기본적으로 스타일을 넣기 위해서는 Container 클래스를 이용해야 합니다.

1
2
3
4
Container(
styles....,
child:...
)

Margin

일반적인 css나 js처럼 margin:30 이런 식으로 작성하면 좋겠지만, flutter에서는 조금 다릅니다.

다음과 같이 EdgeInsets이라는 클래스를 사용해야 합니다.

1
2
3
4
Container(
margin: EdgeInsets.only(bottom:10),
child:...
)

EdgeInsets에서 margin을 주는 방법이 있습니다. 기존 css와 비교하면서 몇가지 알아보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
// 전부
EdgeInsets.all(10)

// 한 지점만
EdgeInsets.only(bottom: 4)

// 좌위 상위 우위 하위
EdgeInsets.fromLTRB(left, top, right, bottom)

// 가로와 세로
EdgeInsets.symmetric(horizontal: 20, vertical: 10)
1
2
3
4
margin: 10px;
margin-bottom: 4px;
margin: top right bottom left;
margin: 10 20 10 20;

Padding

패딩도 margin과 사용법은 같습니다.

1
2
3
4
Container(
padding: EdgeInsets.all(10),
child:...
)

Border

Container 클래스에 margin과 padding을 사용했는데, border도 넣고싶다면 다음과 같이 작성하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
Container(
margin: EdgeInsets.all(4),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 5,
),
)
child:...
)

Container의 decoration에 BoxDecoration클래스를 이용해서 border를 넣어줄수 있습니다.

Border Radius

border radius 는 기존 border 스타일을 넣는 방법과 흡사하게 BoxDecoration을 사용합니다.

1
2
3
4
5
6
7
8
Container(
margin: EdgeInsets.all(4),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10)
)
child:...
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 전부 - 방법1
BorderRadius.circular(10)

// 전부 - 방법2
BorderRadius.all(Radius.circular(10))

// 가로만
BorderRadius.horizontal(Radius.circular(10))

// 세로만
BorderRadius.vertical(Radius.circular(10))

// 한곳만
BorderRadius.only(topLeft:Radius.circular(10))
// topLeft topRight bottomLeft bottomRight

// 여러개 사용예시
BorderRadius.only(
topLeft: Radius.circular(19),
bottomLeft: Radius.circular(19)
)

마지막으로

margin, padding, border, border radius 를 적용하는 방법을 정리해보았는데 기존 css를 사용하는 벙법과는 많이 달라서 처음에는 혼선이 왔지만, 자동완성기능이나 타입이 정해져 있기때문에 더 깔끔하게 코드를 작성할 수 있어서 좋았습니다.

Share