(flutter) BoxDecoration

Container 위젯의 테두리, 박스 모양, 색상 등의 스타일을 적용하려면  decoration 속성의 BoxDecoration 클래스를 사용한다.

 

• border : 컨테이너의 테두리 스타일을 변경한다.
• borderRadius : 테두리의 모서리를 둥글게 변경한다.
• gradient : 컨테이너 내부 색상에 그라데이션 효과를 줄 수 있다.
• boxShadow : 그림자 효과를 줄 수 있고, 그림자 색상 위치 등 변경한다.

 

1)테두리 : border

 

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.green,
      width: 10,
    ),
  ),
),

 

 

 

2) 둥근 모서리 : borderRadius

 

 

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 10,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
  ),
),

 

 

 

 

 

3) 그라데이션 효과 : gradient

 

decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.purpleAccent, Colors.white],
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 2,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
),

 

 

 

 

 

4) 그림자 효과 : boxShadow

 

boxShadow: [
  BoxShadow(
      color:Colors.grey,
      spreadRadius: 4.0,
    blurRadius: 10.0,
    blurStyle: BlurStyle.normal,
  ),
],