by
Apr 15. 2020
플러터 Hello World 살펴보기
플러터 Hello World 살펴보기
다트 언어를 살펴보느라 플러터 개발 환경 구축 및 Hot reload를 다루고 한참이 지나서야 다시 플러터로 돌아왔다. 처음부터 식상하지만 hello world 앱을 플러터를 사용하여 간단히 구현해본다. 그리고 간단하지만 새롭게 접하는 구조에 대해서 잠시 살펴본다. 여기서 가장 중요한 개념은 위젯(Widget)이다.
플러터는 화면에 표시되는 UI를 위젯이란 개념을 사용하여 나타낸다. 이미지나 텍스트 표시는 물론이고 사용자와 상호작용을 하는 버튼과 심지어 레이아웃 배치를 위한 속성들도 모두 위젯이다.
Hello World 예제 분석
Hello World 예제는 일단 다음과 같다.
플러터만의 새로운 구조로 생소한 부분이 있다.
Line 3 : 여느 언어와 같이 main()이 시작점이다. 그 후 runApp() 함수를 호출한다. runApp()의 파라미터는 아래 rupApp()의 선언부에서 확인할 수 있듯이 위젯이다. 따라서 가장 먼저 화면에 나타날 위젯을 구현해야 한다. 여기서는 그 위젯이 HelloWorld 클래스이다.
Line 5 : HelloWorld 클래스를 구현한다. 이때 StatelessWidget를 상속받았다. StatelessWidget은 다음과 같이 위젯을 상속받은 추상 클래스이다. 따라서 HelloWorld 클래스는 runApp()의 인자로 사용이 가능하다. StatelessWidget은 간단히 말해서 화면 표시만을 위한 위젯이다.
Line 7 : build() 함수를 오버라이딩 한다. StatelessWidget 상속 시 필수 구현 메서드이다. 리턴 타입이 위젯이다. 즉 여기서 기본적인 위젯을 만드는(build) 것이다.
Line 8~9 : MaterialApp은 안드로이드 머티리얼 디자인의 구현을 쉽게 할 수 있도록 도와주는 플러터의 위젯이다. 다양한 파라미터를 가지는데 여기서 사용된 title은 앱의 최근 목록에서 표시되는 이름이다. 아래 그림을 참고하자. First Flutter App이 title이다.
Line 10~17 : home이란 파라미터도 타입이 위젯이다. 즉 MaterialApp의 자식 위젯이라고 생각하면 된다. 여기서 사용된 Scaffold라는 위젯은 MaterialApp내에서 실제적으로 머티리얼 디자인의 기본적인 뼈대를 구성하는 역할을 한다. Scaffold 역시 다양한 파라미터가 있는데 여기서는 appBar, body를 사용했다. 이렇게 각 위젯은 다양한 자신만의 파라미터를 가진다.
appBar와 body 역시 위젯이다. appBar는 아래 그림에서 'Hello World Demo'라고 적힌 부분이다. 새로운 AppBar 위젯을 만들고 AppBar 위젯의 파라미터 중 title이란 파라미터만 사용했다. (MaterialApp의 title과 다른 것이다.)
body는 AppBar를 제외한 아래 영역이다. body는 정렬과 관련된 위젯인 Center를 사용했다. Center의 파라미터 중 child 위젯으로 Text라는 StatefulWidget을 사용하여 'Hello World'라는 텍스트를 표시했다. Center라는 이름에서 알 수 있듯이 가운데 정렬을 해주는 위젯이다.
이렇게 플러터 앱의 화면 구성은 위젯으로 시작해서 위젯으로 끝이 난다. 코드를 실행해보면 아래와 같이 나온다. 참고로 우상단 DEBUG 마크는 debug mode로 빌드해서 나타난 것이며 release mode로 빌드하면 나타나지 않는다.
