본문 바로가기
공부방/Flutter

[Flutter] BoxDecoration()위젯(함수)

by SmartCow 2024. 3. 13.

1. BoxDecoration()위젯(함수)란?

컨테이너나 다른 위젯의 배경을 꾸미는 데 사용. 주로 사각형 모양의 위젯에 사용되며, 배경색, 그림자, 모서리 둥글게 처리, 경계선 등을 지정할 수 있다. BoxDecoration은 Flutter의 디자인 요소를 매우 다양하게 다룰 수 있어서 UI 디자인에 많이 활용함.

2. 주요속성

속성 설명
color 위젯의 배경 색상을 지정
image 배경 이미지를 지정.
NetworkImage, AssetImage, FileImage 등의 이미지 소스를 사용.
border 경계선을 설정.
BorderSide 객체를 사용하여 선의 스타일, 색상 및 두께를 지정.
borderRadius 모서리를 둥글게 만든다.
BorderRadius 객체를 사용하여 각 모서리에 대해 서로 다른 값을 지정할 수 있다.
boxShadow 그림자 효과를 추가.
List<BoxShadow>를 통해 여러 그림자를 지정.
gradient 그라데이션 효과를 추가.
LinearGradient, RadialGradient, SweepGradient를 사용하여 선형, 원형, 호 그라데이션을 만들 수 있다.
backgroundBlendMode 배경 이미지와 색상의 혼합 모드를 지정.
기본적으로는 BlendMode.srcOver로 설정.

3. 예제

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    border: Border.all(color: Colors.white, width: 2.0),
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // 그림자의 위치 조정
      ),
    ],
  ),
  child: Text('Box with decoration'),
)

위의 예제는 BoxDecoration을 사용하여 빨간색 배경에 흰색 테두리와 그림자를 가진 사각형 위젯을 만든 것이다.