2023년 1월 25일 유튜브 Flutter 공식 채널에서 Flutter forward 2023이 진행되었다. 이번 Flutter 3.7 & Dart 3.0 대규모 업데이트에 관한 내용을 정리해보고자 한다. 쉽게 한국어로 보고 싶은 분들은 유튜브 더코딩파파 님의 "Flutter 3.7 구글이 드디어 해냈구나…" 영상을 추천한다.
업데이트 목록
Flutter
- Fonts asset hot reload
- Text animation by FontVariation widget
- Dart, Flutter Engine, Flutter SDK에 대해 최소 SLSA level 2 인증 보장
- FlutterFlow (Figma와 같은 UI Toolkit), API 콜이 가능해보임
- Material 3
- ffigen & jnigen (언어 변환, 예를 들어 Android SDK => C or C++ => Dart로 활용하는 것이 가능)
Dart
- Pattern matching
- Multiple returns
- Usable switches
- Object Destructing
- Functional-style programming
Dart-Server
- Shelf (서버용 라이브러리)
Adaptive UI
- MediaQuery
- AnimatedBuilder
- LayoutBuilder
- Target platform
- PointerDeviceKind
Preview
- 2D Scroll (TableView, TreeView)
- Multiple windows on desktop (애뮬레이터 같은거 여러 개 띄울 수 있음)
- Impeller (Rendering engine 중 Backend에 해당, 기존 Skia 엔진 대체할 예정)
Flutter
FlutterFlow
Flutter 팀에서 준비한 Figma와 같은 UI Toolkit이다. Flutter의 Widget을 활용해서 UI를 제작할 수 있다. 라고 생각했으나, 영상을 다시 확인해보니 아예 API까지 연동한 어플리케이션을 제작해서 실제 배포까지 할 수 있었다. 심지어 Button을 OnTap 했을 때 어느 동작을 할 것인지 Flow를 정의할 수 있었다. 이래서 이름이 FlutterFlow 인건가..?
그저 놀라웠다. 반응형 & 적응형 UI부터 시작해서 애니메이션까지 모두 된다. 마치 Framer를 보는 듯 했다.
이렇게 API 콜도 가능하고, Test까지 진행할 수 있다. 배포 관련한 것도 FlutterFlow에서 진행할 수 있는 것 같은데, 다음 영상을 확인해보자.
https://www.youtube.com/watch?v=V18UL-sUsqk (27:52)
Material 3
Ffigen & Jnigen
flutter pub run ffigen --config file_name.yaml특정 언어를 C언어로 컴파일해주고, 컴파일된 C언어를 Dart로 사용할 수 있게끔 해주는 새로운 ffi 도구로 보인다. Android, iOS에서 사용하는 SDK나 라이브러리를 yaml 파일에 등록하고 명령어를 실행하면 ffi를 활용한 Dart 라이브러리가 등장한다. Google은 그저 GOAT다. Flutter의 최대 러닝 커브인 Native를 이렇게 해결해준다. 물론 Native에도 없는 라이브러리라면... 사실 그거는 Native를 하시는 분들도 직접 만들어야하는 기능이니까 어쩔 수 없다고 생각한다.
작년에 Google Health SDK가 Android만 지원해서 정말 슬펐는데, 이걸 알았더라면 뭔가 도움이 많이 되었을까 싶기도 한다. 한편으로는 ffi가 이렇게까지 강력해졌구나 새삼 대단하게 느껴진다. 이전에 SNOW 같은 어플리케이션을 만들어보고 싶다고 TensorFlow랑 OpenCV를 Flutter에 가져오려고 ffi를 사용해본 적이 있었다. 그 때는 TensorFlow고 OpenCV고 자시고 그냥 CMake랑 ffi 모두 싹 다 눈 앞에서 치워버리고 싶었는데... 이것이 공룡 기업을 등에 업은 커뮤니티의 힘인가 싶기도 하다.
Dart
js의 강력한 기능 중 하나인 Pattern matching 및 Object Destructing이 Dart에도 생겼다. 프론트엔드로서 이번 업데이트 중 가장 반가운 소식이었다. 개인적으로 Typescript를 쓰는 이유 중에 하나가 앞서 언급한 매우 매우 편리한 기능을 쓸 수 있으면서도, 동시에 Typecheck가 가능해서였다. 그런데 Dart에도 지원이 된다니... 역시 구글은 GOAT다. 밀어줄 땐 팍팍 밀어주는 게 너무 좋다.
앞으로 나올 예제 코드는 출처가 모두 Flutter 공식 유튜브이다.
https://www.youtube.com/watch?v=KhYTFglbF2k
Multiple returns & Pattern matching
(String, int) userInfo(Map<String, dynamic> json) {
return (json['name'] as String, json['age'] as int);
}
var json = {'name': 'Lily', 'age': 13};
main() {
var info = userInfo(json);
var name = info.$1;
var age = info.$2;
}여기서 main 함수에 작성된 부분을 다음처럼 변경할 수 있다.
main() {
var (name, age) = userInfo(json);
}
Record
위에서 언급한 기능을 지원하기 위해서, Object class의 상위 클래스로 Record class라는 것이 생겼다. Java에서의 Record처럼 자동으로 hashCode를 지원한다. 동시에 JavaScript에서의 First class object 성격을 가지는 듯 하다. 문법은 다음과 같다.
var 변수명 = (data1, data2, name1: data3, ...);
// example
var record = (1, 2, x: 3, y: 4);이렇게 새로 생긴 Record를 사용해서 지긋지긋했던 Widget이나 List 내 삼항연산자, 혹은 if문을 다음처럼 컨트롤할 수 있다.
// dart 3.0 이전
ListTile(
leading: const Icon(Icons.weekend),
title: const Text("Welcome"),
enabled: hasNextStep,
subtitle: hasNextStep ? const Text("Tap to advance.") : null,
onTap: hasNextStep ? () { advance(); } : null,
trailing: hasNextStep ? null : const Icon(Icons.stop)
)
// dart 3.0 이후
ListTile(
leading: const Icon(Icons.weekend),
title: const Text("Welcome"),
enabled: hasNextStep,
if(hasNextStep) ...(
subtitle: const Text("Tap to advance."),
onTap: () { advance(); },
) else ...(
trailing: const Icon(Icons.stop),
)
)위 예제는 다음과 같은 record가 있고, 해당 record를 spread 연산자를 통해 제어한다고 생각하면 될 것 같다.
var whenHasNextStep = (
subtitle: const Text("Tap to advance."),
onTap: () { advance(); },
);
var whenHasNotNextStep = (
trailing: const Icon(Icons.stop),
);
ListTile(
leading: const Icon(Icons.weekend),
title: const Text("Welcome"),
enabled: hasNextStep,
if(hasNextStep) ...whenHasNextStep
else ...whenHasNotNextStep
)아름답다.
JSON Destructing
개인적으로 정말 JavaScript 같다라고 느끼는 순간이었다. 예제 코드를 살펴보자.
// dart 3.0 이전
var json = {'user': ['Lily', 13]};
if (json is Map<String, dynamic> &&
json.length == 1 &&
json.containsKey('user')) {
var user = json[user];
if (user is List<dynamic> &&
user.length == 2 &&
user[0] is String &&
user[1] is int) {
var name = user[2] as String;
var age = user[1] as int;
print('User $name is $age years old');
}
}
// dart 3.0 이후
var json = {'user': ['Lily', 13]};
switch(json) {
case {'user': [String name, int age]}
print('User $name is $age years old');
break;
default:
throw 'Unknown message';
}미쳤다. 코드가 너무 간결해졌다.
개인적으로 정말 마음에 안 들었던 것중 하나가 Map을 활용하는 것이었다. 온점을 활용할 수도 없고, 오로지 대괄호만 사용해서 데이터를 가져왔어야 했다. dynamic을 사용하면 심지어 타입체크도 안 돼서, 거의 JavaScript를 쓰는 느낌이었다. 그렇다고 하나하나 일일이 Class로 만들자니, 어마무시한 개수의 Class가 만들어질 거 같아서 그렇게 하진 않았다.
근데 이렇게 Destructing 할 수 있으면 API Response로부터 Entity class를 생성하는 과정이 너무 쉬워질 것 같다. switch를 통한 try-catch급 에러 핸들링은 덤.
Usable switches
Preview
2D Scroll
Multiple windows on desktop
Impeller
기존 Skia 엔진을 대체할 새로운 Rendering 엔진이다. Flutter 3.3부터 iOS에는 이미 적용 중이며, Android는 1.0을 준비 중이다. Rendering 하는 방식에 대해서 Flutter 공식 채널에서 소개해주는데, 어... 
아직 이해하지는 못 했다. 이런 그림이 여러 개 나오는데, 댓글을 보니 다들 똑같은 느낌을 받고 있는 것 같았다. Flutter 팀에서는 해당 엔진을 Mobile, Web, Desktop, Embedded 등 모든 환경에서 사용할 예정으로 보인다. Impeller 엔진을 게임 엔진으로 활용할 수 있도록 3D 렌더링을 준비 중이라는데, 이미 Thread-safe 한 것이 확인되었다고 한다. 과연 Flutter가 어디까지 발전할지 정말 기대되는 순간이었다. 단순히 Client-only framework인 줄 알았는데, Server-side도 가능하고 심지어 3D 엔진까지 나온다고 하니 가슴이 웅-장해진다.
flutter run --enable-impeller해당 명령어로 flutter를 실행시키면 Impeller를 사용할 수 있는 것으로 보인다. 그리고 3D를 사용하려면 glb 파일과 Scene, 그리고 Node Widget를 사용하면 되는 것으로 보인다.
...
Widget build(BuildContext context) {
return Scene(node: Node.asset("something3Dfile.glb"));
}
...학교나 주변에서 Flutter를 하는 사람은 나 말고 본 적이 없었다. Native, JavaScript, 심지어 RN도 있는데 그런거 하는거 아니라며 이상한 것만 하는 똥믈리에로 무시받던 나날이었는데... 이번 대규모 업데이트를 보면서 희망이 더 생겼다. Flutter와 Dart로 Client, Server, Game 가릴 것 없이 풀스택을 하려고 하는 구글은 역시 GOAT다.
Reference
Flutter Forward 2023 재생목록 : https://www.youtube.com/watch?v=zKQYGKAe5W8&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD
SLSA : https://slsa.dev/
4 things to know about the future of Flutter : https://www.youtube.com/watch?v=PAOAjOR6K_Q
GOAT성호 근데 중간중간있는 감탄사 킹받어요