Flutter - PhysicalModel, BoxDecoration, 위젯 그림자 넣기

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 위젯에 그림자를 만드는 방법에 대해서 배워보겠습니다. 

 

Flutter PhysicalModel

PhysicalModel(
  child: Container(width: 100, height: 100, color: Colors.blue),
  color: Colors.black,
  elevation: 10.0,
)

간단한 그림자를 만드는 방법은 PhysicalModel을 이용하는 방법입니다. PhysicalModel() 안에 그림자를 만들 위젯을 넣고 color와 elevation만 설정하시면 됩니다. 조금 더 상세한 설정은 아래와 같이 가능합니다. 

shadowColor: Colors.red,
shape: BoxShape.circle,

shadowColor는 그림자의 색깔은 shape는 그림자의 모양을 설정할 수 있습니다. 만약, 그림자를 조금 더 상세하게 설정하려면 아래와 같이 할 수 있습니다. 

borderRadius: BorderRadius.all(Radius.circular(20)),
borderRadius: BorderRadius.vertical(top: Radius.circular(50)),
borderRadius: BorderRadius.vertical(bottom: Radius.circular(50)),
borderRadius: BorderRadius.horizontal(left: Radius.elliptical(50, 50)),
borderRadius: BorderRadius.horizontal(right: Radius.elliptical(50, 50)),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(50)),
borderRadius: BorderRadius.only(bottomRight: Radius.circular(50)),
borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
borderRadius: BorderRadius.only(topRight: Radius.circular(50)),

다만 위의 설정은 약간의 한계가 있습니다. 그래서 간단한게 그림자를 만들 때만 PhysicalModel을 사용합니다. 더 세부적인 설정을 하려면 아래를 보시면 됩니다. 

 

Flutter BoxDecoration

Container(
    width: 100, height: 100,
    decoration: const BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(Radius.circular(40),),
      boxShadow: [
        BoxShadow(color: Colors.grey, offset: Offset(4.0, 4.0), blurRadius: 15.0, spreadRadius: 1.0,),
        BoxShadow(color: Colors.white, offset: Offset(-4.0, -4.0), blurRadius: 15.0, spreadRadius: 1.0,),
      ]
    ),
  )

BoxDecoration은 PhysicalModel 보다 훨씬 더 상세한 설정이 가능합니다. 간단히 보셔도 BoxShadow로 여러 가지 설정이 가능한 게 보이시죠? 또 여러 개의 그림자도 설정이 가능합니다. 그래서 그림자를 조금 더 상세하게 설정하시려면 BoxDecoration을 사용하시면 됩니다.