본문 바로가기
Flutter/Flutter FAQ

flutter 플러터에서 위젯에 그림자를 추가하는 방법은 무엇인가요?, How can I add shadow to the widget in flutter?

by 베타코드 2023. 5. 9.
반응형

질문


위 사진과 같이 위젯에 그림자를 추가하는 방법은 무엇인가요?

가 내 현재 위젯 코드입니다.

그림자가 있는 이미지


답변


BoxShadowBoxDecoration을 확인하세요.

Container는 원래 게시한 코드를 기반으로 BoxDecoration을 취할 수 있으며, 이는 boxShadow를 취합니다.

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)
반응형

댓글