[Flutter] 3.7.0 새로운 기능!

Flutter 가 3.3.10 에서 3.7.0 으로 업데이트가 되었다.

 

 

Material 3 디자인 마이그레이션!

• Badge
• BottomAppBar
• Filled and Filled Tonal buttons
• SegmentedButton
• Checkbox
• Divider
• Menus
• DropdownMenu
• Drawer and NavigationDrawer
• ProgressIndicator
• Radio buttons
• Slider
• SnackBar
• TabBar
• TextFields and InputDecorator
• Banner

다양한 위젯들이 추가 되었고 아래 링크로 들어가면 material 3 디자인 및 material 2 디자인 비교도 가능하다!

 

https://flutter.github.io/samples/web/material_3_demo/#/

material_3_demo

 

material 3 디자인을 사용하려면 

 

MaterialApp(
  theme: ThemeData(
     useMaterial3: true,
    colorSchemeSeed: Colors.green,
  ),
  // …
);

 

ThemeData 에서 useMaterial3 플래그를 true 로 지정해주면 되고 default 값은 false 이다.

 

 

 

DevTools 업데이트

메모리 디버깅 도구가 완전히 개편 되었다고 한다.

 

세 가지 새로운 기능 탭 Profile , Trace 및 Diff 이 추가 되었고, 새로운 기능에는 클래스 및 메모리 유형별로 앱의 현재 메모리 할당을 분석하는 기능, 런타임 시 클래스 세트에 메모리를 할당하는 코드 경로 조사, 두 시점 간의 메모리 관리를 이해하기 위한 메모리 스냅샷 비교 기능이 포함된다고 한다!

 

자세한 설명은 https://docs.flutter.dev/development/tools/devtools/memory 링크에서 확인 가능하다.

 

 

 

텍스트 돋보기 추가 

안드로이드 및 iOS 네이티브에서 제공하던 텍스트를 선택하는 동안 표시되는 돋보기가 Flutter 앱에서도 작동한다고 한다.

magnifierConfiguration 속성을 추가하여  활성화 또는 비활성화 설정이 가능하다고 한다.

 

 

 

 

 

Custom shader support improvements

Custom shader 가 많이 개선되었다고 한다.

사용자 지정 셰이더를 핫 리로드할 수 있고  iOS의 Skia 및 Impeller 백엔드 모두에서 지원된다고 한다.

 

아래 링크의 예제를 보고 가장 많이 놀랐던 것 같다. 너무 예뻐서.. 언젠가는 작업하는 프로젝트에 적용해보고 싶다!!

 

https://twitter.com/reNotANumber/status/1599717360096620544

https://twitter.com/reNotANumber/status/1599810391625719810

https://twitter.com/wolfenrain/status/1600242975937687553

https://twitter.com/iamjideguru/status/1598308434608283650

https://twitter.com/rxlabz/status/1609975128758026247

https://twitter.com/RealDevOwl/status/1528357506795421698

https://twitter.com/TakRutvik/status/1601380047599808513

https://twitter.com/wolfenrain/status/1600601043477401606

 

 

 

 

그 밖에도..

iOS 장치에서 애니메이션 버벅거림 감소 및 메모리 관리 등이 향상되어 flutter 자체 렌더링 성능이 많이 올라갔다고 한다.

아직은 나오지 않았지만 3D 위젯 및 Two-dimensional scrolling 위젯도 출시될 예정이라고 한다!

 

 

 

 

---

Custom shader 와 Material 3 적용된 예제는 아래 링크에서 확인 할 수 있다!

https://github.com/jiyeonjoy/flutter_3_7_0_test_app

GitHub - jiyeonjoy/flutter_3_7_0_test_app

 

 

---

https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c

What’s new in Flutter 3.7

 

https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.7.0

Flutter 3.7.0 release notes