시작하기 전에...
Google I/O Keynote와 What's new in Flutter 2.2 (https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039) 의 블로그를 보며 정리한 내용입니다. 영어로 된 내용을 정리하다보니 오역과 의역이 포함되어 있습니다. 잘못된 내용이 있는경우 피드백 해주시면 정말 감사드리겠습니다.
Flutter 2.2가 사용가능합니다. stable channel을 변경하여 현재 Flutter SDK를 업그레이드 하거나, flutter.dev에서 새롭게 설치하세요.
이번 릴리즈에서는 2,456개의 PR과, 3,105개의 issus를 처리 했습니다.
Flutter 2.2 updates in stable
Flutter 2.2는 Andriod, iOS, Web 업데이트와 새로운 Material 아이콘, Text 처리 및 TextSpan 위젯의 마우스 커서 지원, Scroll bar 지원이 추가되었고, 멀티 플렛폼을 최적으로 지원하는 방법에 대한 새로운 지침이 포함되었습니다.
또한 Flutter 2.2는 새로운 Dart 릴리즈 버전인 Dart 2.13 버전에서 빌드되었습니다.
Dart 2.13
Type Aliases
Type Aliases를 사용하여 길고 복잡한 유형을 짧고 간결한 이름을 지정할
수 있으며, 같은 방식으로 Class의 이름도 변경 할 수 있습니다.
// Type alias for functions (existing)
typedef ValueChanged<T> = void Function(T value);
// Type alias for classes (new!)
typedef StringList = List<String>;
// Rename classes in a non-breaking way (new!)
@Deprecated("Use NewClassName instead")
typedef OldClassName<T> = NewClassName<T>;그 외 Dart 2.13의 릴리즈 정보를 확인하려면 아래 링크를 참고해주세요.
https://medium.com/dartlang/announcing-dart-2-13-c6d547b57067
Flutter web update
Service Worker 개선
새로운 service worker loading mechanism을 통한 캐싱동작
최적화
이전 버전에서는 service worker가 구버전 앱을 실행하는 동안
백그라운드에서 앱 업데이트를 다운로드하고, 다운로드가 완료되면 브라우저는 두번 새로고침 하기 전까지 구버전 앱을 실행했지만,
Flutter 2.2에서는 앱 업데이트를 감지하면 앱 사용을 위해 업데이트가 다운로드 될 때 까지 기다린 후 페이지 새로고침 없이 업데이트 된 앱을 실행합니다.
이 변경사항을 적용하기 위해서는 index.html을 제거 후,
flutter create . 명령으로 index.html을 재 생성 하면 됩니다.
HTML, CanvasKit Renderer 개선
HTML의 경우 글꼴 기능을 설정 할 수 있도록 지원하고, 캔버스 API를 사용하여 텍스트를 렌더링하여 호버링 시 올바른 위치에 표시되도록 합니다.
Flutter Web 과 Mobile App 의 격차를 해결하기위해 shader mask와 computeLineMetrics를 지원합니다.
Accessibility
위젯이 변환과 스타일링 될 때 포커스 상자가 올바르게 나타나도록
semantic node 위치 개선
app 실행 시 아래와 같은 옵션을 주는 경우 개발자에게 생성된
semantic node를 시각화하여 잘못된 위치에 배치되는지 디버그 할 수 있도록 도와준다.
$ flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=trueFluttwe Web Layout Explorer 지원
iOS update
Page Transitions
애니메이션 프레임 렌더링 시간을 75% 단축하고, 저가형 모델에서는 더 많은 시간을 단축 함으로써
Cupertino 에서 페이지 전환이 보다 원활해졌습니다. (🔗link)
Incremental Installs
개발 프로세스 중 Incremental iOS installs 을 구현했습니다.
벤치마크 결과에 따르면 iOS앱의 업데이트 설치 시간이 40% 단축되었습니다. (🔗 link)
Platform Adaptive Apps
Flutter 가 더 많은 플랫폼을 지원함에 따라 단지 다른 폼팩터를 고려하는것 뿐만 아니라 다른 입력 유형(터치 vs 마우스+키보드)과 플랫폼별 사용자 경혐(내비게이션 서랍 vs 시스템 메뉴)등을 고려하는 것이 유용할 수 있습니다.
서로 다른 플랫폼의 세부 사항에 맞춰 조정할 수 있는 앱을 "Platform Adaptive Apps"라고 부릅니다.
관련된 google IO 세션과 doc을 확인해보세요.
https://flutter.dev/docs/development/ui/layout/building-adaptive-apps
이러한 원칙에 따라 여러 플랫폼에 대해 작성된 샘플앱의 경우 gSkinner의 Flokk 와 Folio 앱을 참고해보세요. 다양한 앱스토어에서 다운로드 하거나 직접 브라우저에서 실행 할 수 있습니다.
Flutter의 UX부분은 new Material Guidance for Large Screens를 기반으로 합니다.
이 새로운 지침에는 몇가지 main layout과 여러 components, design kit의 재작업이 포함되어있으며, 모두 대형 스크린을 염두에 두고 있습니다.
More Material icons
새로운 Material icons를 추가했습니다.
fonts.google.com/icons 에서 원하는 아이콘 검색 할 수 있습니다.
Improved text handling
여러 플렛폼의 세부 사항을 지원하기 위해 모바일 환경에서는 중요하지 않았던 새로운 영역에 대한 개선이 진행되고 있습니다.
이번 릴리즈에서는 키 입력을 취소 기능과 사용자 정의 키지정 기능을 도입하였습니다.
Cancel a Keystroke
키입력을 취소 할 수 있게되면, 스크롤 이벤트를 트리거 하지 않고 스페이스바와 화살표 키를 사용하는 등의
작업을 구현 할 수 있습니다. 동일한 기능을 사용하여 키입력을 상위 위젯에 전달하기 전에 처리 할 수도 있습니다. 또 다른 예로 TextField와
Button간의 Tab을 사용 할 수 있습니다.
Custom Text Action
Custom Text Action을 사용해 TextField에서 Enter키를 특수하게 처리하는 등의
작업을 수행 할 수 있습니다. Flutter 자체에서 OS 별 텍스트 편집 동작과 일치하는 다른 키 입력을 제공 할 수 있습니다. 예를 들명 윈도우의 Ctrl+C,
MacOS의 Cmd+C
Automatic scrolling behavior
Android와 iOS에서는 기본적으로 Scroll Bar가 표시되지 않습니다. 하지만 데스크톱 앱의 경우 컨텐츠가 컨테이너보다 큰 경우 Scroll Bar가 자동으로 표시됩니다.
이번 릴리즈에서 모바일과 데스크톱 환경에서 필요한 동작을 자동으로 처리 합니다.
Scroll Bar 모양을 바꾸거나, 항상 표시되는 경우 ScrollBarTheme과 ScrollBehavior에서 설정 할 수 있습니다. Scroll Bar 동작과 마이그레이션 방법은 docs을 확인하세요.
Mouse cursors over text spans
GestureRecognizer가 있는
TextSpan에서는 자동으로 마우스 커서가 변경됩니다.
Flutter 2.2 updates in preview
프로적션으로 사용 할 수 있는 새로운 기능 외에도 iOS shader 컴파일러 성능향상, Android deferred component 지원, Flutter desktop 업데이트, ARM64 Linux 호스트 지원 등의 기능을 preview 할 수 있습니다.
Preview: iOS shader compilation improvements
그래픽 용어로 shader는 최종 사용자의 장치에서 사용 할 수 있는 GPU에서
컴파일하여 실행할 프로그램이다. Flutter에서는 Skia 의 기본 그래픽 라이브러리에서 고품질 그래픽 효과로 네이티브 성능을 제공하기위해
shader를 사용해왔다.
Flutter API의 유연성(flexibility) 덕뿐에 shader는 JIT 컴파일 되고,
frame workload가 필요로 할때 동기화 됩니다. 하지만 shader를 컴파일 하는시간이 프레임 예산(frame budget)을 초과하는 경우 사용자에게 jank로
표시됩니다.
jank를 피하기 위해 Flutter는 shader를 training run 중에
캐싱 할 수 있는 기능을 제공했습니다. 이 기능은 앱과 함께 패키징되고, Flutter Engine이 시작되는 동안 첫번째 프레임 전에 컴파일 됩니다.
즉, 미리 컴파일 된 shader는 frame workload 중 컴파일 할 필요가 없고,
jank가 발생하지 않습니다. 하지만 Skia는 OpenGL에만 이 기능을 구현했습니다.
그래서 애플이 더이상 OpenGL을 사용하지 않는 것에 대응하여 iOS에서 기본적으로 Metal backend를 사용 했을 때 벤치마크에서 최악의 프레임 시간이 증가 했고, jank에 대한 사용자 보고도 증가 했습니다.
dev channel에서 preview 기능으로 Skia for shader warm-up for Metal을 새롭게 지원합니다. Skia를 통해 Flutter는 첫 번째 frame workload가 시작되기 전에 번들 shader를 컴파일 합니다.
이 방법에는 몇가지 주의사항이 존재합니다.
- Skia는 여전히 OepnGL 보다 Metal에 더 많은 shader를 생성 합니다.
- machine code에 대한 최종 shader 컴파일은 여전히 frame workload와 동시에 수행되지만, 프레임 렌더링 시간의 일부로 전체 shader 생성 및 컴파일을 수행한는 거보다 빠릅니다.
- 앱의 첫 번째 실행 후 장치를 재부팅 할 때까지 machine code 결과가 캐시됩니다.
하지만 몇가지 단점 또한 존재 합니다.
- bundled shaders 가 포함되기 때문에 배포된 앱의 크기가 더 큽니다.
- bundled shaders 를 미리 컴파일 해야하므로 앱시작 지연시간이 더 깁니다.
- 이 구현이 암시하는 개발자 경험에 만족하지 않습니다. (???)
원문 : We aren’t happy with the developer experience that this implementation implies.
앱에서 이 방법을 이용하려면(How to use SkSL warmup) flutter.dev에서 확인해보세요.
Android deferred components
Dart의 split AOT 기능을 사용하여 앱이 런타임에 미리 컴파일된 코드와 assets을 포합하는
모듈을 다운로드 할 수 있도록 합니다. 이러한 분할된 컴포넌트들을 Deffered Component라고 부릅니다. 코드와 assets이 필요한 경우에만 다운로드시킴으로
초기 설치 크기를 크게 줄일 수 있습니다.
Deffered Component는 현재 Android에서만 사용할 수 있습니다. 보다 상세한 내용은 아래 페이지를 참조해주세요.
https://flutter.dev/docs/perf/deferred-components
Flutter Windows UWP alpha
Windows UWP alpha 에서 dev channel 로 이동했습니다.
UWP를 사용하면 xbox를 비록한 표준 Windows 앱이 실행되지 않는 장치에 Flutter 앱을 사용 할 수 있습니다.
UWP를 사용하려면 UWP prerequisites를 설정해야 합니다.
ARM64 Linux host support from Sony
소니의 소프트웨어 엔지니어인 마츠바야시 히데노리(Matsubayashi Hidenori)가 ARM64 Linux을 지원하는데 기여했다. 이 PR을 이용하면 Flutter 앱을 ARM64 Linux에서 실행 할 수 있다.
Flutter ecosystem and tooling updates
새로운 Flutter Favorite packages와 FlutterFire의 Firebase 지원 업데이트가 제공됩니다.
메모리 최적화를 위한 DevTool과 Provider package에 대한 새로운 탭이 추가 되었습니다.
VS Code 및 Android Studio 플러그인의 업데이트와 DartPad를 문서에 포함시킬 수 있는 새로운 방법이 있습니다.
FlutterFlow라는 low-code 앱 디자인 및 빌딩 툴을 소개합니다.
Flutter Favorite updates
24개의 새로운 Flutter Favorite packages가 추가됩니다.
- FlutterFire packages in
production:
cloud_firestore,cloud_functions,firebase_auth,firebase_core,firebase_crashlytics,firebase_messaging,andfirebase_storage
- Flutter Community “plus”
packages:
android_alarm_manager_plus,android_intent_plus,battery_plus,connectivity_plus,device_info_plus,network_info_plus,package_info_plus,sensors_plus,andshare_plus
googleapispackage
win32package
intlandcharacterspackages
- Sentry packages:
sentryandsentry_flutter
infinite_scroll_paginationandflutter_native_splashpackages
모든 패키지는 null safety로 마이그레이션 되어있으며, Android, iOS, web을 지원합니다.
FlutterFire updates and Firebase App Check
Colud Firebase와의 통합에 대한 업데이트
- Support for the Firebase Local Emulator Suite
- Optimizing your data queries with data bundles
Firebase App Check의 베타 릴리즈 지원
Firebase App Check는 클라우드 스토리지 악용으로부터 보호합니다. App Check를
사용하는 경우 앱을 실행하는 장치는 identity attestation provider 를 사용하여 앱이 진짜 사용자의 앱인지 인증하고, 조작되지 않은 장치에서 실행되고
있는지도 확인 가능합니다. App Check를 사용하면 앱이 Firebase 백엔드 리소스에 대해 수행하는 모든 요청에 추가됩니다. 자세한 내용은 FlutterFire App Check 문서를 확인해주세요.
Flutter DevTools updates
memory tracking 개선사항 2개지와 provider plugin을 위한 새로운 탭이 추가 되었습니다.
Allocation Stack Trace
object가 할당된 위치를 추적하는 기능이 제공됩니다. 메모리 누수 코드의 위치를 쉽게 찾을 수 있습니다.
Custom Memory Event
메모리 타임라인에 사용자 지정 메세지를 주입 기능입니다. 메모리 사용량이 많은 작업 수행 전과 후처럼 특별한 마커를 추가하여 메모리가 제대로 정리되고 있는지 확인 할 수 있습니다.
Provider Tab
Flutter DevTools 최신버전을 실행 중이고, Provider 플러그인을 사용하는 경우 Flutter 앱을 디버깅할때 자동으로 Provider Tab이 나타납니다.
그 외 DevTools에서 제공하는 기능들은 릴리즈 노트에서 확인해보세요.
IDE plugins updates
VS Code
Inline Method, Inline Local Variable 리팩토링 기능이 추가로 지원됩니다.
추가 VS Code 확장프로그램 릴리즈 노트를 확인하세요.
Android Studio
모든 Stack trace를 콘솔에 출력하는 옵션이 추가되었습니다.
다른 패키지에서 발생할 수 있는 근본적인 원인을 확인하는데 도움이 됩니다.
추가 Android Studio 확장프로그램 릴리즈 노트를 확인하세요.
DartPad workshops
DartPad에 직접 가이드를 추가하여 I/O에 대한 워크샵 경험을 제공합니다.
the DartPad Workshop Authoring Guide 를 따라 작성하시면됩니다.
그리고 Gist에서 DartPad를 이용하여 코드를 공유(share code using DartPad in a Gist),하거나 DartPad를 사이트에 내장(embedding DartPad in your own site) 할 수 있습니다.
Community Spotlight: FlutterFlow
FlutterFlow는 브라우저 내에서 앱을 만들기 위한 low code 앱 설계
및 개발 도구입니다. Firebase의 실제 데이터를 사용해 여러 페이지에 걸쳐 앱을 배치하기 위한 WYSIWYG 환경을 제공합니다. 아래 유튜브에서 제작과정을 확인해보세요.
https://www.youtube.com/watch?v=TXsjnd_4SBo
FlutterFlow의 결과물은 Flutter Code로 만들어집니다. 그렇기 때문에 앱을 더 수정 할수도 있습니다. FlutterFlow에 대해서는 flutterflow.io에서 확인 가능합니다.
Breaking Changes
이번 릴리즈에서는 더이상 사용하지 않는 부분을 제거하는 Breaking Change가 존재 합니다.
flutter.dev 에서 Breaking Change를 위한 마이그레이션 방법(mitigations for these breaking changes)을 확인해보세요.
원문은 아래 글을 확인해주세요
https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039
What's new in Flutter Keynote
https://www.youtube.com/watch?v=40_tpAHwWcM
'Flutter' 카테고리의 다른 글
| Flutter Null Safety 적용안된 package 직접 Migration 하기 (pub.dev package) (0) | 2021.05.16 |
|---|---|
| Flutter Engage Extended Seoul Goods! (0) | 2021.05.12 |
| Flutter 매우 간단한 무한 스크롤 만들기 (14) | 2021.04.29 |
| Flutter 앱출시 방법 (0) | 2021.04.15 |
댓글