[Flutter] 그림자 버튼 만들기 BoxShadow 사용하기

요즘 유행하는 그림자 버튼 UI를 만들어 보자 

 

BoxShadow를 사용하여 그림자를 줄 수 있다. 

GestureDetector를 사용했지만, 버튼으로 감싸도 가능.. 

GestureDetector(
  onTap: (){// Action},
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white, // background color
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 5,
          blurRadius: 7,
          offset: Offset(0, 1), 
        ),
      ],
      shape: BoxShape.circle,
    ),
    child: Container(
      margin: EdgeInsets.all(8),
      padding: EdgeInsets.all(8),
      child: Icon(
        Icons.remove,
        color: Colors.black,
        size: 28,
      ),
    ),
  ),
),

 

위젯을 따로 빼서 사용하는 중인데, 생각보다 나쁘지 않은 디자인이지만, 좀 구린거 같다.. 

 

그렇다면 BoxShadow 속성을 몇번 더 주어서 디자인을 수정해보면 된다. 

그리고 예쁜 그림자를 찾았다면, 꼭 연락주시기를 바래요

 

더 예쁜 그림자 버튼, 입체감 있는 버튼을 만들게 되면 또 포스팅해보겠다..!