Flutter) Container에 BoxDecoration 사용하기

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Container(
            width: double.infinity,
            height: 80,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(38.5),
              boxShadow: [
                BoxShadow(
                  offset: Offset(0,10),
                  blurRadius: 33,
                  color: Color(0xFFD3D3D3).withOpacity(.84),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

실행결과

 

 

Container에  decoration 속성에  BoxDecoration 위젯을 주면  Container를 꾸밀 수 있다.

 

 

BoxDecoration

color : 컨테이너 색상을 정할 수 있다.

 

borderRadius : 컨테이너 모서리부분을 설정할 수 있다.

 

boxShadow : 컨테이너 그림자를 줄 수 있다.

- 리스트 타입으로 받기 때문에 [] 안에 BoxShadow위젯을 넣어야 한다.

- offset : x, y 값을 받아서 그림자 위치를 조절할 수 있다.

- blurRadius : 그림자 세기를 조절할 수 있다.

- color : 그림자 색상을 조절할 수 있다. 투명도까지 가능.

 

image : 컨테이너 배경 이미지를 지정할 수 있다.

 

border : 컨테이너 테두리를 지정할 수 있다.

 

shape : 컨테이너 모양을 변경할 수 있다.