[Flutter] Container 둥글기 주기,그림자 효과 border,shadow

안녕하세요. 욱쓰입니다. 밋밋한 Container에 둥글기와 그림자 효과를 적용해보고 알아보는 포스팅을 작성하겠습니다.

 

전체 둥글기

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20),
  ),
)

 

bottomRight에 둥글기 주기 (한쪽에만 둥글기 주기)

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.only(bottomRight:Radius.circular(30)),
  ),
)

 

bottomLeft와 Right에 둥글기 주기

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.only(
      bottomRight: Radius.circular(
        30,
      ),
      bottomLeft: Radius.circular(30),
    ),
  ),
)

 

그림자 효과 주기

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(30),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

 

그림자 하단에만 주기

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(30),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.7),
        spreadRadius: 0,
        blurRadius: 5.0,
        offset: Offset(0, 10), // changes position of shadow
      ),
    ],
  ),
)