플러터 위젯 개념 2

#3 플러터 위젯 구현 

지난 글(플러터 위젯 개념)에서 예시로 들었던 앱 구조(UI: User Interface)를 실제 플러터에서 구현해 보겠습니다. UI 구성은 위젯 배치 하여 간단하게 구현 가능합니다.

UI 위젯 배치

먼저 지난 번 글에서 살펴본 구조를 보면, 기본적인 뼈대는 상단 숫자를 텍스트 위젯 (Text Widget)으로, 아래 버튼은 텍스트 버튼 위젯 (TextButton Widget)으로 구성하는 것에서 시작합니다. 아래 그림의 붉은 상자를 참고하면 텍스트 위젯과 텍스트 버튼 위젯을 뼈대로 코드가 구성된 것을 확인 할 수 있습니다.

 

먼저 상단의 택스트 위젯을 먼저 보면, '25 17 30 19 01 41' 이렇게 글자를 적어넣은 부분이 우측의 실제 앱 화면에 그대로 출력되고 있는 것을 확인할 수 있습니다. 추가적으로 이 텍스트 위젯을 감싸는 코드를 살펴보면 컨테이너(Container)는 가로(width), 세로(height) 각각 350, 100 크기에 회색(Colors.grey)으로 설정되어 있는 것 또한 할 수 있습니다.

 

한편 하단의 텍스트 버튼 위젯에는 버튼의 크기와 색을 정하기 위해 버튼의 자식(child: Container)으로 컨테이너가 자리잡고 있으며, 이 컨테이너는 가로(width), 세로(height) 각각 200, 90 크기에 인디고색(Colors.indigoAccent)으로 설정되어 있습니다. 또 그 컨테이너의 자식으로 다시 "버튼"이란 글을 나타내는 텍스트 위젯이 위치하고 있습니다. 다른 위젯들과 달리 텍스트 버튼 위젯의 경우 버튼의 역할(누르면 어떠한 기능이 행해지는) 구현을 위해 onPressed:(){} 라는 함수가 작성되어 있는데, 이는 이전 글에서 다룬 것처럼 UI가 아닌 기능적인 부분, 즉 로직을 작성하는 부분이 됩니다.

 

#4 기타 위젯

코드에 사용되었지만 설명되지 않은 두가지 위젯이 더 있는데, 하나는 Center() 위젯, 또 하나는 Column() 위젯입니다. 각 위젯의 구체적인 속성은 추후 위젯 하나하나에 대해 따로 다룰 예정이지만, 비전공자의 개발 입문 단계에서 충분히 궁금해할 만한 요소이므로 간단히 살펴보겠습니다.

 

먼저 Center() 위젯의 경우, 부모 위젯을 기준으로 자식 위젯을 가운데 정렬 하는 역할을 합니다.

Container(child:Center(child:Text('아무텍스트'))) 와 같이 작성 된 코드를 예로 들면,

부모위젯인 Container() 내부의 정 가운데에 자식위젯인 Text()위젯이 위치하게 되고, 이 텍스트 위젯은 '아무텍스트'라는 글자를 출력하므로, Container의 정 중앙에 '아무텍스트'라는 글 보이게 됩니다.

 

Column() 위젯의 경우 여러 자식을 세로 목록으로 출력하는 위젯 입니다.

본문의 Column()위젯을 보면 children:<Widget>[] 형태의 목록형 자식들을 품고 있는데, 이 children 목록에는 Container() 위젯 2개와 TextButton() 위젯을 감싸고 있는 Center() 위젯 1개, 총 3개의 위젯이 위치하고 있습니다. 이 중 두번째 Container() 위젯은 상단의 Container() 위젯과 하단의 Center() 위젯의 간격을 벌리기 위해 높이(height) 420으로 임의 배치한 위젯입니다.

 

이번 포스트에서는, 지난 글에서 예시로 들었던 앱 구조를 구현하기 위해 실제 코드로 작성할 때 위젯이 어떻게 배치되는지 살펴보았습니다. 

아직 위젯이란 개념이 막 와닿지 않을 수도 있겠지만, 계속 플러터를 접하다보면 크게 노력하지 않아도 어느새 자연히 일상처럼 위젯의 개념과 응용이 가능해지므로 걱정할 필요가 없습니다. 다음에는 몇몇 기본 위젯을 예로 들어 해당 위젯의 속성값과 사용법 및 코드상 표현법 등에 대해 조금 더 자세히 다뤄보겠습니다.