[Flutter] 모서리를 둥글게 / 테두리 넣기

위젯의 모서리를 둥글게하고 테두리를 넣기 위해선 위젯의 속성에

decoration이나 shape가 있어야한다.

해당 속성에서 아래의 방법으로 위젯을 둥글게, 테두리를 디자인 할 수 있다.

 

아래의 두 가지 유형을 기억하면 대부분의 위젯을 처리할 수 있다.

 

Decoration 속성을 가진 위젯

Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50), //모서리를 둥글게
            border: Border.all(color: Colors.black12, width: 3)), //테두리

 

Shape 속성을 가진 위젯

 ButtonTheme(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50) //모서리
                        side: BorderSide(color: Colors.black)), //테두리

 

모서리가 둥근 버튼

버튼의 모서리를 둥글게 하려고 보니, Decoration과 Shape가 없어 당황스러울 것이다.

버튼 위젯은 두 가지 속성이 없으므로 ButtonTheme으로 감싸 이 속성을 사용한다.

둥근 버튼 예시

ButtonTheme(
                      minWidth: //버튼의 최소 가로 길이
                      height: //버튼의 세로 길이
                      shape: RoundedRectangleBorder( //버튼을 둥글게 처리
                          borderRadius: BorderRadius.circular(10)),
                      child: RaisedButton( //ButtonTheme의 child로 버튼 위젯 삽입
                        onPressed: () {},
                        child: Text(
                          '예시 버튼 텍스트',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                        color: Colors.deepPurple,
                      ),
                    ),