Flutter 3.13 업데이트 요약

으라차차·2023년 8월 17일

2D 2D스크롤 3.13 flutter impeller 양방향스크롤 임펠러 플러터

플러터 안정버전에 대한 신규 업데이트 3.13이 릴리즈되었습니다. 이번엔 어떤 내용들이 나왔는지 살펴보겠습니다.

참고로, 구글이 medium에 게시한 flutter 3.13 릴리즈노트를 참고하였습니다.

전체적으로, 2D 스크롤 기능 추가(👍)와 그래픽스(Impleller) 성능 개선이 두드러진 업데이트입니다.

engine

Impeller

ios 성능개선

과거 skia에서 문제됐었던 shader compilation jank가 거의 완벽하게 제거됨.
- 앱실행시 미리 수행되던 shader compile 때문에 jank가 발생하던 문제임
- 자체 벤치마킹으로는 3.10 대비 'average frame rasterization time'이 절반 줄어듬
- 위 최적화는 다음 내용들의 개선으로 이루어짐
  - 화면에서 꼭 필요한 부분만 필요할 때만 그리는 기법 적용
  - 병렬 랜더링
  - 텍스트 렌더링
  - 타일링 그리기(비싼 연산)에 대한 최적화
  - 몇가지 연산들에 대한 shader 연산 적용 시작
  - culling(물체의 안보이는 뒤부분을 렌더링에서 제외하는 기법) 처리 개선
  - wide gamut colors가 이젠 default

android

Impeller의 android적용에 대해 플러터팀은 아직 official preview release에는 미흡하다고 판단함. 내부적으로는 성능과 신뢰성에 있어 매우 높은 수준임에도 preview 공개에는 다소 미흡하다는 평가임. 따라서 다음 flutter stable release(올해 내)에 포함할 계획임

macOS

이번 버전부터 preview로 이용가능 함
현재 macOS 데스크탑버전의 wanderous앱을 이용할 수 있음. 다양한 feedback 바람

New engine API

foldable 지원 API

FlutterView.display는 Display객체를 반환함
- 반환 객체에는 physical size, device pixel ratio, refresh rate of the display 정보가 있음
- 사용 사례는 여기 참조

Framework

Material

적용되는 컴포넌트들이 너 많아졌고 Customization 강화, 새로운 기능도 추가됨

(iOS) TextField에 카메라로 인식된 text가 자동 입력되는 기능(community 기여가 엄청 컸음)

(공통) 플랫폼에 따라 Dialog UI가 선택되는 기능
- AlertDialog.adaptive(): iOS면 CupertinoAlertDialog, android는 AlertDialog가 알아서 적용됨
(iOS) CupertinoDatePicker : CupertinoDatePicker에서 monthYear 선택모드 추가
(iOS) CupertinoRadio : useCheckmarkStyle property추가
(Material) : InputDecoration에 error 출력 속성 추가

ButtonSegment에 tooltip 추가

ExpansionPanelList에 materialGapSize 속성 추가

Switch위젯에서 outline 수정 기능

NavigationDrawer에 tilePadding 속성으로 tile간 padding 설정

TabBar에서 Item들간 정렬(alingment) 설정 기능

chips 위젯에서 chip color(MaterialState color) 수정 기능

Elevated Chips (Material3 스펙에 따라 elevated 효과 추가)

onSubmitted to SearchBar
Text입력행위를 마쳤을때, 키보드로 Done버튼을 눌렀을때 처리를 달리할 수 있음
- BaseTapAndDragGestureRecognizer(feat. TapAndPanGestureRecognizer, TapAndHorizontalDragGestureRecognizer)
- "Tab + dragging" 결합처리 handler 등록 가능. 예를들어 화면에서 더블탭+vertical dragging으로 이미지 사이즈 조절 기능

App Lifecycle Changes

AppLifecycleListener class 추가. 예를들어 app exit 단계에서 뭔가 해야할 때.

Scrolling

드디어 가로/세로 양방향 스크롤가능한 layout이 가능해졌습니다. 이번 3.13에서 가장 눈에 띄는 기능입니가.

TwoDimensional scrolling foundation class 제공

일단 base 클래스와 다양한 delegate class를 내놓았습니다. 이들을 사용한 2DScrollView 샘플을 선보였고 자체적으로 이들을 활용한 공통위젯(two_dimensional_scrollables package)을 pub.dev에 공개할 계획이라고 합니다. 앞으로 다양한 응용 Widget이 나오겠네요.

ChildVicinity
1D scrollview에서 child를 index로 표련한 것 처럼 2D 공간에서는 ChildVicinity로 표현합니다.
TwoDimensionalChildDelegate (feat. TwoDimensionalChildBuilderDelegate, TwoDimensionalChildListDelegate)
SliverChildDelegated와 유사하다고 보시면 됩니다.
TwoDimensionalScrollView (abstract base class)
1D ScrollView와 유사합니다. TwoDimensionalScrollable(컨텐츠), TwoDimensionalViewport(화면에 보이는 영역)의 base class가 됩니다.
RenderTwoDimensionalViewport
최종적으로 children들을 2D공간에 배치하고 그리는 class 입니다
2D가 나왔으니 스크롤링 방식도 변화가 있겠죠. 그래서 DiagonalDragBehavior가 추가됩니다.

위 foundation 클래스를 이용한 sample에서 확인하실 수 있습니다.

Sliver

pub.dev에는 sticky_header류 위젯들이 많은데요. 이걸 flutter가 기본 기능으로 흡수하는것 같네요.
- SliverMainAxisGroup, SliverCrossAxisGroup 제공
DecoratedSliver
스크롤 효과 위주였는데 DecorationBox를 사용할 수 있어 개별 sliver, sliver 그룹 단위로 꾸미기가 가능합니다.

Accessibility

Platforms

Android

Android 14/ API 34를 지원합니다.

iOS

Screen을 회전시킬 때 native앱에서 회전과 달리 화면이 많이 왜곡되는 현상(비율에 따라 stretch가 많이 일어나는 현상)이 있었는데 이를 개선하였습니다.
- 이전
- 개선
Renaming Runner
flutter app template를 만들면 /ios에 Runner project, workspace로 모두 Runner로 네이밍이 되는데 수정가능 해졌음
Preparing for iOS 17 and Xcode 15
iOS 17 and Xcode 15 toolchain을 사용하려면 Flutter 3.13로 업글하세용
XCode 15 다운로드 받을때 iOS17 simulator 같이 받으시고요.

Games

개발자 지원을 강화하기 위해 별도 지원 사이트(https://flutter.dev/games)를 만들었습니다. Documents, Template Resources, Videos 등을 모아두고 체계적인 지원을 밝혔습니다. 그리고 수개월내에 game개발을 위한 많은 toolkit을 제공할테니 기대하세요.