박스데코레이션 활용

데코레이션을 적용해서 그림자를 만들어 보려고 합니다.

 

만들면 box 테두리에 그림자가 생겨서 입체감을 줄 수 있죠.

말로 하면 어떤 느낌인지 잘 모를 수 있으니 이미지로 보여드릴게요.

 

---

일단 저 박스를 만들기 위해 위젯을 선언해야 하는데 main함수에서 바로 선언을 하면 

복잡해지니 body를 사용하여 다른 클래스를 참조하도록 하겠습니다.

# runApp() 함수 안에 입력하는 내용 중 일부
body: 클래스 이름(),

 

참조하도록 했으면 해당하는 클래스를 만들어주시는데 움직일 것은 아니니 StatelessWidget을 

만들어 주겠습니다. (stl 입력 후 ctrl + spacebar)

만들었을 때 커서가 클래스 이름 쪽에 있으니 바로 이름을 지정해 주시면 됩니다.

(2 개 바뀌는게 맞습니다. 이상하지 않아요. 추츰하지 않아도 됩니다.)

이제 return 뒷부분을 지우고 동작할 위젯을 입력하도록 하겠습니다.

일단 글을 한번 적어보겠습니다. Text함수를 이용하면 되겠네요. 

 

그다음은 텍스트를 감싸는 틀을 만들어줍니다.

틀은 Container() 함수로 해주시면 되요. (Container: 가장 기본적인 양식형태)

 

(ctrl + . 를 눌러주세요. - 빠른 수정이 가능해요)

다시 글을 가운데로 두고 싶으니 Container 함수를 클릭하시고 빠른 수정(ctrl + .)을 눌러서 center 위젯을 

클릭해 주세요. 그러면 글이 가운데로 온 것을 볼 수 있습니다.

(보기 편하려고 주변 색상을 파란색으로 바꿨습니다.)

코드를 보시면 아마 이렇게 나오셨을 겁니다. (뒤에 컬러는 글씨의 테두리에 색상을 입력하는 겁니다.)

Center(child: Container( child: Text("hello"), color: Colors.yellow[200], )),

 

 

그럼 이제 텍스트 부분을 손을 볼 부분이 없는 것 같네요.

Center부분을 선택하셔서 빠른 수정을 사용하여 Container로 다시 감싸줍니다.

 

그리고 크기를 지정해줄텐데 영어 잘 아시는 분들은 많이 보셨을지도 모르겠네요. 

width, height(넓이, 높이)를 사용하여 Container 크기를 지정해 주세요. 

 

{갑자기 가운데에서 이동했다고 이상하게 생각하지 마세요.

 기존 틀을 새로운 틀 안으로 넣으면서 그 틀의 중심으로 이동을 한 겁니다. }

---

다음은 데코레이션 설정입니다. 

크기 지정한 곳 밑에 아래와 같이 일단 입력을 하세요.

(저장은 아직 하지마세요. error 납니다. - 안에 코드가 없다고요)

decoration: BoxDecoration(),

안에 색상을 하나 만들어주시고 박스 테두리 선을 하나 그어보겠습니다.

BoxDecoration() 안에 color: 선언을 하시고 원하시는 색상 선택

border: 를 사용하여 테두리를 만들어 보겠습니다.

 

일단 박스 틀이 어느정도 만들어졌네요. 

틀을 좀 둥글게 만들고 싶으니 circular(숫자)를 사용해서 좀 둥글게 만들겠습니다.

     decoration: BoxDecoration(
          color: Colors.green,
          border:
              Border.all(color: Colors.red, width: 3, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(50)),

 

다음은 마지막인 그림자를 생성하겠습니다.

boxshadow를 사용하여 그림자를 만들 수 있는데 

자세한 내용은 아래 코드 부분에 설명을 적어놓겠습니다.

# boxShadow 사용 시 [] 테두리로 감싸준다 
boxShadow: [
            BoxShadow(
                color: Colors.grey,  # 그림자 색상 지정
                offset: Offset(6, 6), # 그림자 위치 이동
                spreadRadius: 4,  # 그림자 배율
                blurRadius: 10) # 그림자 흐림 비율
          ]

그리고 이 출력물을 가운데로 두기 위해서는 가장 외부 틀(Container)에서 빠른 수정을 통해

Center 위젯으로 감싸줍니다.

 

그럼 좌측 상단에 있던 결과물이 가운데로 옮겨온 것을 볼 수 있습니다.