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을 사용하여 빨간색 배경에 흰색 테두리와 그림자를 가진 사각형 위젯을 만든 것이다.
'공부방 > Flutter' 카테고리의 다른 글
[Flutter] StatefulWidget위젯(함수) (0) | 2024.03.20 |
---|---|
[Flutter] Container위젯(함수) (0) | 2024.03.17 |
[Flutter] Padding()위젯(함수) (0) | 2024.03.10 |
[Flutter] mainAxisAlignment함수(위젯) (0) | 2024.03.06 |
[Flutter] Scaffold()함수(위젯) (0) | 2024.02.27 |