FlutterㅣWidget이란?

UI?

Flutter를 설명할 때, 사용하는 이유 중 큰 이유인 Cross Platform이라는 설명도 있지만, UI Toolkit이라는 소개도 간간히 보이곤 한다.

Flutter에서 UI는 매우 중요한 요소이고, Flutter를 선택하는 이유 중 중요한 요소 중 하나가 UI이기도 하다. 하나의 소스코드로 UI를 여러 Platform에 출력할 수 있기 때문이다.

Flutter UI에서 Widget?

Flutter UI의 가장 기본적인 단위가 Widget이다. 따라서 Flutter UI를 구성하는 각각의 요소가 모두 Widget으로 이루어져 있다.
단단한 블록부터, 심지어 화면 내 특정 요소 간의 간격조차도 Widget으로 관리된다.

Flutter 개발자에게 UI를 효율적이고 디자이너의 시안을 구현하는 데에 요구되는 것 중 하나가 Widget을 얼마나 알맞게, 효과적으로 사용할 수 있느냐이다.

Flutter 기본 SDK의 Widget만 해도 상당히 많고, pub.dev를 통해 제공되는 오픈소스 Widget을 모두 더하면 굉장히 많은 수의 Widget이 있다는 것을 알 수 있다.

Widget Tree?

Flutter의 Widget은 블록과 비슷하다. Widget을 조합해 사용하는 방식에 따라 전혀 다른 UI를 만들어낼 수도 있고, 한 화면에서 만들었던 Widget을 다른화면에서 그대로 사용하는 것도 가능하다.

또한, Widget들 간에 수평적인 관계도 있지만, 수직적인 관계도 만들어낼 수 있다.

이런 Widget들 간의 관계를 나타낸 형태를 Widget Tree라고 하고, 이 개념은 상태를 관리하는데 매우 중요한 개념이다.

Stateless Widget / Stateful Widget

Flutter 개발을 하면 직접 Widget을 만들 때 보통 Stateless / stateful Widget을 사용하게 된다.

간단하게 설명하면,
화면을 갱신할 필요가 없는 정적인 화면을 구성할 때는 Stateless Widget을, 특정한 상황에 따라 화면을 갱신할 필요가 있다면 Stateful Widget을 사용한다.

Hot restart, Hot reload?

Dart언어는 JIT 컴파일러와 AOT 컴파일러 2가지가 사용된다. 지금은 따로 설명은 안 하겠다.

Flutter는 이러한 언어적 특징을 이용해, 빠른 개발을 위해 Hot restart / Hot Reload 기능을 제공한다.

이 기능을 사용하게 되면, JIT 컴파일러를 활용해, 앱을 시간이 오래 걸리는 컴파일 과정을 거치지 않고도 코드의 변경 사항을 빠르게 반영할 수 있다.

Hot restart

Hot restart는 말 그대로 앱을 재시작하는 형태이다.

Hot restart를 사용할 시, 앱의 모든 상태가 초기화 되고, 앱의 코드 변경 사항을 반영할 수 있게 된다.

Hot reload

Hot reload는 hot restart와는 다르게 앱을 재실행하는 것은 아니지만, 코드의 변경 사항을 반영하는 기능을 한다.

Hot reload는, 앱의 상태를 유지한 상태로 코드의 수정사항을 확인하기 때문에 더 빠른 개발을 할 수 있게 해준다.

주의사항

Hot Restart / Hot reload 모두 앱을 재 컴파일 후 빌드하는 것은 아니기 때문에, 앱의 기초가 되는 네이티브 코드의 수정이나, 라이브러리나 Asset의 추가 등의 상황에서는 정상적으로 작동 되지 않는다.

또한, 과하게 많은 코드의 변경사항이 있을 경우에는 Reload / Restart 순서로 실행중인 프로세스가 상위 재시동을 요청 할 수 있고, 특히 추후 상태를 관리하는 개발 단계에 도달하게 되면, 이 2가지의 기능을 사용할 때는 주의를 해야한다.

※ Hot Reload는 위 그림에서 console 옆에 '번개 모양 아이콘' 이고, '번개 모양 옆 초록 색 아이콘'이 Hot Restart 이다.

Design Guide?

Flutter 내에서는 대표적인 2개의 디자인 가이드를 활용하여 개발을 할 수 있다. 물론 이 2가지 가이드 말고 커스텀 디자인 가이드 이용도 가능하다.

하지만 위 2가지의 다지인 가이드는 Google과 Apple의 노하우가 담긴 디자인 가이드이기 때문에 충분히 앱을 개인화하여 만들 수 있다.

Google의 철학이 담겨져 있는 디자인 가이드인 'Material Design', Apple의 철학이 담겨져 있는 'Cupertino Design'이라고 Flutter 내에서는 구분 짓고 있다.

위의 2가지 디자인 가이드들을 디바이스에 따라 분리해서 구현할 수도 있고, Android기기에서 Cupertino의 디자인 가이드를 따르거나, iPhone에서 Material 디자인 가이드를 따르게 할 수도 있다.

Material Design

Material Design은 Google에서 제시하는 디자인 가이드라인이며, 비교적 최근에 Material 3를 발표하면서 개인화 된 앱을 구현하는데 중점이 맞춰져 있다.

Material Design에 맞게 여러 Widget들이 이미 구현이 대부분 되어 있다. Flutter에서는 Material 2와 3를 개발자의 취향에 맞게 선택하여 활용 할 수도 있다.

또한, Flutter는 Google에서 주도적으로 개발하고 있는 프레임워크이다보니, Cupertino Widget보다 Material Widget이 더 많이 있는 부분도 없지 않아 있기는 하다.

※ 디자인 가이드를 따르는 것이 좋을까?

디자인 가이드를 따르면 창의적인 앱을 만드기 어렵다고 생각할 수도 있다. 하지만, 디자인 가이드 자체보다는, 디자인 가이드 내부에 들어가는 콘텐츠가 더 창의적인 요소를 불러일으킬 수 있다.

앱 전반의 Font 스타일링을 담당하는 Typography부터, Color 등의 Theme 요소 등을 잘 활용하는 것이 오히려 창의적인 앱을 만드는데 효과적이다.

특히 별도의 디자이너 직군이 없는 소규모 앱 개발 인원을 보유한 상황이라면, 개발자들 만으로도 디자인이 괜찮은 앱을 구현할 수도 있을 것이다.

※참고 사이트

1) https://m3.material.io/
2) flutter.dev => Widget dialog 검색
=> Widget catalog 카테고리 참고

많은 위젯을 알면 플루터 개발하는데 큰 도움이 되니 시간나면 꼭 둘러보면 좋다!

MaterialApp, Scaffold Widget?

MaterialApp

• home : 앱을 실행했을 때 맨 처음 들어가는 기본적인 라우터

• routes : 앱 내에서 경로 만들어 줄 때

• theme : 꾸밀 때나, color 등등에 많이 활용. 많이 활용되므로 알아둬야함!

• locale : 해당 앱이 어떤 나라의 언어로 이루어질지, locale이 어떤 것들이 지원되는지

※ 간단히는 마우스에 커서를 올리거나, ctrl을 누르고 MaterialApp을 클릭하면 자세히 볼 수 있다.

Scaffold

• 앱의 화면을 구성하는데 필요한 것들이 어느정도 들어있는 도화지 같은 위젯

Container, Center Widget?

Container

• 가장 기본적인 위젯

• child를 사용하여 컨테이너의 내부에 들어갈 위젯을 선언한다.

※ 이번 글에서는 많은 위젯을 다루지 않지만, 위젯을 모두 다룰 수 없을 정도로 많기 때문에 위에 참고 사이트를 들어가서 둘러보고 필요한 위젯을 적절히 잘 사용하길 바래요~!