[Flutter] What’s new in Dart and Flutter (Flutter 3.10 / Dart 3.0)

Flutter의 앱개발 향상을 위한 5가지 핵심적 특징

• Beautiful : 화면 위의 모든 픽셀을 완전히 제어할 수 있다.
• Fast : 하드웨어 가속 그래픽 덕분에 속도가 빠르다.
• Productive : 생산적이다. 핫 리로드와 DevTools로 워크플로를 지원한다.
• Portable : 이식가능하다. 코드베이스 하나를 공유하여 고객이 어떤 플랫폼을 사용하든 모두 지원한다.
• Open : 개방적이다. 무료 오픈 소스이다. 모든 코드를 볼 수 있어 배우고 수정할 수 있다.

 

Flutter Forward 올해 초에 도입

1. 개발자 경험에 계속 집중 하였으며
2. 혁신적 그래픽 성능을 제공하고
3. 웹, 데스크톱, 모바일을 매끄럽게 통합하는 방향을 지향하고
4. 새롭게 떠오르는 아키텍처를 조기에 도입할 예정이다.

 

1. Flutter 3.10 upgrade

• Material 3에 대한 지원을 크게 향상
  • 종합적이고 적응 가능한 위젯 툴킷
  • 알고리즘 색 구성표를 지원 - 하나의 시드 색상에서 전체 색 구성표를 손쉽게 생성할 수 있고 생성된 색 구성표는 접근성이 우수 하면서도 멋진 스타일을 보장한다.
  • 드롭다운 메뉴와 NavigationDrawer, TabBar가 보조탭을 지원하고 SnackBar 스타일이 변경되었다.
  • SearchBar 가 새로 추가 되었다.
• 프레임워크도 개선해서 iOS, Mac OS 앱을 쉽게 구축할 수 있다.
  • Editable Text Widget 에서 맞춤법 검사를 지원하며 모든 플랫폼에서 제공된다.
  • Cupertino Checkbox 추가 되었다.
  • Context menu 업데이트 - 텍스트 복사/붙여넣기 기능
  • 물리적 기기를 좀 더 쉽게 테스트할 수 있도록 기기에 무선으로 연결할 수 있게 해서 편의성을 높였다.

 

2. Dart 3

• 모든 코드에 sound null safety 를 적용하여 런타임 오류를 줄이고 성능을 개선했다.
• pub.dev에 올라 있는 상위 1000개 패키지 중 99%가 이미 Dart 3 를 지원한다.
• 새로운 언어 기능도 두개 추가
  • 레코드가 있는 구조적 데이터와 구조 분해, 패턴 매칭을 지원 - 추상적 데이터 유형이 있는 모던 프로그래밍이 용이해진다. 패턴은 Dart3 에서 가장 규모가 큰 신규 기능이다.

  (double, double) getLocation(String place) {
  	return (lat, long);	
  }
  
  main() {
  	var (lat, long) = getLocation('Mountain View');
  }

  • Class modifiers 추가
    • interface class
    • base class
    • final class
    • sealed class

  import 'dart:math' as math;
  
  sealed class Shape {}
  
  class Square implements Shape {
    final double length;
  
    Square(this.length);
  }
  
  class Circle implements Shape {
    final double radius;
  
    Circle(this.radius);
  }
  
  double calculateArea(Shape shape) => switch (shape) {
        Square(length: double l) => l * l,
        Circle(radius: double r) => r * r * math.pi
      };
  
  main() {
    print('Area of Square(5); ${calculateArea(Square(5))}');
  }

 

3. Devtools

• Diff Snapshots 탭을 사용하여 상호작용 전 후의 메모리 사용량을 비교할 수 있다.
• 앱이 실행중일 때 DevTools 콘솔에서 평가하는 기능도 지원한다. - 원래는 앱이 일시 정지되었을 경우에만 사용할 수 있었다
• 메모리 힙 스냅샷의 다른 인스턴스를 콘솔 변수로 저장하고 메모리 힙을 살펴볼 수도 있다.
• 일관성과 접근성을 유지하기 위해 모든 DevTools UI가 Material 3를 사용하도록 업데이트 했다.
• 마지막으로 Trace Viewer를 완전히 새롭게 개편했다.
• 이제 사용자 지정 구현을 사용하지 않고 오픈 소스 도구인 Perfetto를 기반으로 한다. - 이는 시행착오를 거쳐 성능이 검증된 도구이며 Trace Viewer에 없던 여러 기능을 보완해 준다.
• 추적 기간을 선택하는 직접 측정 도구와 SQL 쿼리를 사용한 고급 검색 등이 포함된다. - 이 도구는 규모가 큰 앱도 속도저하 없이 처리할 수 있다.

 

4. SLSA

• 보안
• SLSA는 Google이 지원하는 공급업체 중립적 이니셔티브 이며 일련의 표준과 기술적 컨트롤을 제공함으로써 아티팩트 무결성을 보장한다.
• 예를 들어, Dart Flutter SDK와 런타임은 조작되지 않을 것이라고 믿을 수 있다.
• 얼마전에 레벨1을 완성했는데 여기에는 완전히 자동화된 SDK 빌드 프로세스와 출처 생성이 포함된다.
• 레벨2 에서는 조작에 저항하는 수준에 도달하고
• 레벨3 에서는 추가적 컨트롤을 적용하는게 목표이다.
• Dart와 Flutter 개발자들이 프로젝트에서 SLSA를 지원하도록 돕기 위한 지침과 도구도 개발할 것이다.

 

5. 사용자를 위해 구축할 수 있는 Flutter의 그래픽과 경험

• 웹에서 프래그먼트 셰이더를 공식 지원한다. - Flutter 3.10 부터 지원
• 프래그먼트 셰이더나 픽셀 셰이더는 현재 그리고 있는 도형 내에서 각 픽셀에 대해 GPU에서 직접 실행되는 함수이다. 픽셀의 색상 값을 변경하거나 교체해서 시각적으로 인상 깊은 효과를 구현하면서도 최신 GPU의 대규모 병렬 처리를 활용한 우수한 성능을 그대로 유지할 수 있다.

 

6. Impeller

• 복잡한 애니메이션인 경우 처음 시작할 때 버벅임이 생기기도 한다.
• Flutter 구조는 프레임워크, 엔진, 임베더가 있는데 엔진에서 렌더링으로 표시된 부분을 떼어내서 교체하였다.
• 렌더링은 GPU와 연결해서 어떤 이미지를 받아서 화면에 그리라는 명령을 내리는 부분이다.
• 지금까지 Flutter는 범용 그래픽 라이브러리를 사용했고 엔진의 이 부분에서는 Skia를 사용했다.
• Skia는 매우 안정적이고 다양한 곳에 사용되지만 Flutter의 요구 사항에 맞게 설계 되지는 않았다.
• Impeller는 성능과 품질을 극대화하기 위해 개발된 새로운 Flutter 전용 렌더러 이다.
• Impeller는 iOS 용으로 프로덕션에 배포되고 공개 버전 채널에서 제공된다. - Flutter 3.10부터

 

 

 

---

https://io.google/2023/program/7a253260-3941-470b-8a4d-4253af000119/intl/ko/

Google I/O 2023

https://github.com/jiyeonjoy/flutter_dart_3_test_app

GitHub - jiyeonjoy/flutter_dart_3_test_app