2023 Google I/O Extended - Flutter Google I/O 2023 Recap

 

 

개요

---

2023 Google I/O Extended 에서,

박제창님이 진행해주신 Flutter 2023 Recap 세션을 정리한다.

 

발표 자료 제공해주셔서 감사합니다.

 

 

 

Flutter 2023 Recap 

---

Google I/O 2023 에서 Flutter 에 대한 내용을 Recap 하는 세션.

 

[ 목차 ]
Intro. What's Flutter

1. What's new in Dart and Flutter 

2. Design for every device with Flutter and Material 3

3. What's new in Firebase's Flutter

4. Flutter's new rendering engine

5. Evolving Flutter's support for the Web

6. Flutter, Dart, and Raspberry Pi

 

 

 

 

Intro. What's Flutter

---

• Flutter = Google의 Flutter팀에서 운영하고 오픈소스 프레임워크.
• 싱글 코드베이스로, 멀티 플렛폼 어플리케이션을 만들 수 있음.
• natively compiled.

 

• Flutter Architecture Layers.
  
  
  • Dart 로 만들어진 프레임워크,
    C++ 로 만들어진 엔진들 ( Redering 등 ),
    플렛폼 스페시픽한 Embedder 들로 이루어짐.
    
    
  • iOS, Android, Web 등 각 플렛폼마다 프레임워크는 동일.
    Embedder 과, Rendering Engine 만 달라짐.

 

 

 

1. What's new in Dart and Flutter

---

1. Dart 3
   
   
   1. 100 % Sound Null Safety
      
      null 로 인한 런타임 에러 없어짐
      컴파일 결과물의 크기가 작아짐 + 성능 향상
      
      
   2. Modern Programming
      
      Records 라는 타입(Type) 추가 = Swift 의 tuple
      ex. (String, String, Int) 
      
      Pattern 라는 구문 카테고리(syntactic category) 추가 = JS의 구조 분해 할당 구문
      ex. var (name, age) = SomeReturnTupleFunc()
      
      
      
   3. New Class Modifiers
      
      기존 : abstract, mixin
      새로 추가된 것 : base, final, interface, sealed
      
      
      
2. DevTools 
   
   Perfetto 도입? ( 자세히 못들었다.. )
   Memory Diff 을 더 쉽게 확인가능.
   더 쉬운 디버깅~

 

 

 

 

2. Design for every device with Flutter and Material 3

---

• Meterial 3 : 50 여개의 UI 컴포넌트가 추가 지원.

 

• 새로운 프로젝트를 만들면 기본 App theme 가 Meterial 3 로 변경됨.
  기존 프로젝트는 app theme에서 useMeterial3: true 해서 적용.
  
  
• seedColor 라는 값이 추가됨.
  진한 보라색을 seedColor 로 넣어주면, Meterial 컴포넌트에 대한 Color System 을 만들어줌

 

• Meterial 팀에서 관리하는(!) Color System 에 대한 괜찮은 라이브러리들 추천.
  • dynamic_color
  • google_fonts
  • flutter_adaptive_scaffold

 

 

3. What's new in Firebase's Flutter

---

• Google 은 Firebase 와 Flutter 간의 유연한 연동을 주도하는 중.
  
  
• FlutterFire 라는 Firebase 의 Flutter Plugin 이 있고, 각종 문서가 추가 & 업데이트 됨. 
  
  
• FlutterFire 의 Package(Analytic, FireStore, Crashlytic 등) 들
  iOS, Android App 개발에 한해서 풀로 지원됨.
  ( Web 쪽은 아직 미비된 부분 존재 )

 

• FlutterFire 의 Window 어플리케이션 개발도 지원? ( 자세히 못들음.. )

 

 

4. Flutter's new rendering engine

---

• 기존에 사용하던 Rendering Engine = SKIA
  
  
  • 애니메이션을 사용하면 UI Jank ( 프레임이 60 미만으로 떨어지는 현상 ) 이 자주 발생.
    = 성능이 구림
    
    
  • 이런 현상은 2015년 부터 발견되었고,
    Bank App 처럼 신빙성을 주어야하는 App 에서 크리티컬한 부분. ( GPay, Google Nust Hub 등 )
    
    
• Flutter 팀에서 직접 Rendering Engine을 만듦 = Impeller
  
  
  • iOS 는 기본으로 Impeller 적용. ( info.plist 파일에 "FLTEnableImpeller = true" 가 기본으로 들어가있음 )
    Android는 AndroidManifest.xml 에 별도로 작업해야 impeller 사용됨.
    
    
  • Impeller를 사용함으로써 3D 렌더링이 가능함
    과거에 쓰던 SKIA는 2D 엔진이기 때문.
  • Layout 방식 개선.
    
    1. Pixcel Level 에서는 모든 것을 삼각형으로 잘라서 Layout 함.
    
    2. Circle을 그릴 때,
    SKIA 는 왼쪽 그림처럼 큰 삼각형으로 잡아서 Layout = 불필요한 부분이 많이 잡히고 비효율적.
    Impeller 는 오른쪽 그림처럼 원 내부에 많은 삼각형을 만듦.
    
    3. Impeller 는 내부적으로 캐싱을 더 최적화해서, 다시 GPU 연산을 돌려야하는 케이스를 많이 줄임
    자세한 설명은 시간 관계상 못해주심..ㅠ

좌 : SKIA , 우 : Impller

 

 

5. Evolving Flutter's support for the web

---

• Web 에 대한 변경점.
  ( 솔직히 App 만 해도 머리가 터졌지만, 들어서 나쁠 것 없지.. )
  
  
• CanvasKit 도입 => UI 메모리 사용량 적어짐
• Icon Fonts 도입 => 폰트의 메모리 사용량 적어짐

 

• 결과물에 WebAssembly 도입. + Arcitecture 로드맵
  
  
  • 가장 처음 : Flutter를 이용한 결과물이 js 파일뿐.
  • 현재 : js + wasm.
  • 최종 로드맵 : 모두 wasm 으로 변경.
    ( 옆에 계신분이 이걸 들으시곤 큰 소리로 감탄하셔서 놀랐던..ㄷㄷ )

 

 

 

 

6. Flutter, Dart, and Raspberry Pi

---

• 라즈베리 파이 어플리케이션도 Flutter 로 개발가능.. ㄷㄷ