플러터로 첫 코딩하기! 19 - Container 꾸미기

 

얼마전 플러터로 첫 앱을 출시를 했습니다. 

 

앱을 만들고 출시하면서 느낀게 있습니다. 

 

앱 자체의 기능도 중요하지만 디자인이 더 중요하다  라는 사실을요. 

 

그 이유는 내가 만들 앱은 이미 구글플레이나, 앱스토어에 있습니다. 그렇기에

 

수 많은 어플과 차별점을 두려면 바로  디자인과 Ux에 집중해야 합니다. 

 

 

Container를 그저 흰 박스로 만들지 ,

 

아름다운 색을 넣고, 목적에 맞는 도형으로 만들어서 미각적인 효과를 가진 박스로 만들지 

 

앱 개발자가 꼭 고민해야 하는 부분인 것 같습니다. 

 

Container를 꾸미기 위해서는 decoration을 사용해야 합니다. 

 

아래 Container는 2020년 모바일 디자인 업계에서 트렌디하게 나타난 

 

"뉴모피즘 " 디자인 입니다. 

 

이 코드를 전부 공부하듯이 외울필요는 전혀없습니다. 그냥 이런게 있구나 정도만 넘어가시면 됩니다. 

 

Container 안에 decoration을 사용하고 BoxDecoration()을 불러옵니다.   

그안에 Container 모서리를 둥글게 만들 borderRadius를 사용합니다. 

 

뉴모피즘 디자인의 핵심은 Container아래 쪽에 검은색 그림자를 주고, 위쪽으로는 하얀색으로 밝게 해줍니다. 그 차이를 이용해서 

입체감을 만드는 것 입니다. 

 

그 그림자 관련 함수가 boxShadow 입니다. offset, color, blurRadius,spreadRadius 설정치를 이용해서 

입체감 있는 뉴모피즘 디자인이 완성됩니다. 

 

Container(
         padding: EdgeInsets.all(2),
           decoration: BoxDecoration(
               color: Colors.grey[200],
                 borderRadius: BorderRadius.circular(16),
                     boxShadow: [
                          BoxShadow(
                                offset: Offset(off2, off2),
                                color: Colors.black38,
                                blurRadius: blurR,
                                spreadRadius: spredR,
                              ),
                              BoxShadow(
                                offset: Offset(off1, off1),
                                color: Colors.white70,
                                blurRadius: blurR,
                                spreadRadius: spredR,
                              )
                            ],
                          ),

 

 

 

 

 

아래는 저번시간에 간단히 꾸며 놓은 Container 입니다. 

 

Container (

width : 120, //너비 120
height : 120, //높이 120
color : Colors.red //빨강

)

 

 

원하는 모양, 기능은 플러터가 다 제공하니 

Container 꾸미기는 후에 깊이 공부하시는 걸 추천합니다! (제게 하는 말)

 

다음시간에는 간단한Container에 Image 넣는 법을 알아보겠습니다.