[Flutter] 3.7 업데이트 살펴보기 (2)

 

What’s new in Flutter 3.7

 

---

지난 글에서 Flutter 3.7의 주요 기능 중 Material 3 지원 강화, 메뉴 바 및 계단식 메뉴, Impeller 렌더링 엔진 프리뷰, iOS 릴리스 검증 기능, DevTools 업데이트를 살펴보았다.
이번 글에서는 컨텍스트 메뉴, iOS 스타일 리스트뷰, 스크롤 개선, 다국어 툴 개선, 글로벌 선택 및 새로운 플랫폼 채널 기능 등에 대해 알아보자.

---

1. 커스텀 컨텍스트 메뉴(Custom Context Menus)

이제 Flutter에서 컨텍스트 메뉴를 자유롭게 커스터마이징할 수 있다.
예를 들어, 텍스트 선택 툴바에서 기본 기능 외에 이메일 전송 버튼 같은 기능을 추가할 수 있다.

 

TextField(
  contextMenuBuilder: (context, editableTextState) {
    return AdaptiveTextSelectionToolbar(
      anchors: editableTextState.contextMenuAnchors,
      children: [
        TextButton(
          onPressed: () {
            // 이메일 전송 기능
          },
          child: Text('Send Email'),
        ),
      ],
    );
  },
);

 

 

 

 

적용 화면

 

 

이 기능은 단순한 텍스트 선택을 넘어 이미지 위젯에도 적용 가능하다.
예를 들어, 이미지를 우클릭하거나 길게 눌렀을 때 '저장' 버튼이 나타나도록 만들 수 있다.

ContextMenuController controller = ContextMenuController();
GestureDetector(
  onSecondaryTapDown: (details) => controller.show(details.globalPosition),
  child: Image.network('https://example.com/image.jpg'),
);

 

 

 

 

관련 문서:

contextMenuBuilder property - TextField class - material library - Dart API

ContextMenuController class - widgets library - Dart API

 

---

2. iOS 스타일 리스트: CupertinoListSection & CupertinoListTile

Flutter 3.7에서는 iOS 스타일의 리스트 UI를 위한 새로운 위젯이 추가되었다.

• CupertinoListSection: iOS 스타일의 섹션 리스트를 생성
• CupertinoListTile: ListTile과 유사한 기능을 제공하면서 Cupertino 디자인 적용

CupertinoListSection(
  children: [
    CupertinoListTile(
      title: Text('설정'),
      leading: Icon(CupertinoIcons.settings),
      onTap: () {},
    ),
    CupertinoListTile(
      title: Text('알림'),
      leading: Icon(CupertinoIcons.bell),
      onTap: () {},
    ),
  ],
);

 

 

 

 

---

3. 스크롤 개선 (Scrolling Improvements)

이번 업데이트에서는 스크롤 관련 기능이 강화되었다.

✅ 트랙패드 상호작용 개선
✅ 스크롤바 & DraggableScrollableSheet 개선
✅ 텍스트 선택 시 더 자연스러운 스크롤 지원
✅ MacOS에서 새로운 스크롤 물리 엔진 적용
✅ 새로운 애니메이션 스크롤 위젯

• AnimatedGrid
• SliverAnimatedGrid

특히 AnimatedGrid는 리스트에 아이템이 추가되거나 삭제될 때 애니메이션 효과를 제공한다.

AnimatedGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  initialItemCount: items.length,
  itemBuilder: (context, index, animation) {
    return FadeTransition(
      opacity: animation,
      child: Card(child: Text(items[index])),
    );
  },
);

 

또, ListView에서 itemBuilder가 NullableIndexedWidgetBuilder로 변경되면서
null을 반환해 리스트 끝을 나타낼 수 있는 기능이 복구되었다.

---

4. 다국어 지원 툴 & 문서 개선

Flutter 3.7에서는 다국어 기능이 대폭 개선되었다.

• gen-l10n 도구 개편
• 더 직관적인 문법 오류 메시지 지원
• 복잡한 다국어 메시지 지원 (중첩된 복수형, 선택형, 플레이스 홀더 활용 가능)

{
  "greeting": "안녕하세요 {userName}, 오늘 기분은 어때요?",
  "appleCount": "{count, plural, =0 {사과가 없습니다} one {사과가 1개 있습니다} other {사과가 {count}개 있습니다}}"
}

 

---

5. 데스크탑 / 웹 환경에서 Shift를 눌러 드래그하기

이전까지는 Flutter의 텍스트 선택이 마우스 드래그에만 대응했지만,
이제는 키보드를 활용한 텍스트 선택이 가능해졌다!

✅ Shift + → (오른쪽 선택)
✅ Shift + ← (왼쪽 선택)
✅ 기본 SelectionArea에서 키보드 선택 지원

SelectionArea(
  child: Column(
    children: [
      Text('이제 키보드로 텍스트를 선택할 수 있습니다!'),
    ],
  ),
);

 

---

6. 백그라운드 Isolate에서 플랫폼 채널 호출 지원

Flutter에서 플랫폼 채널 호출이 메인 Isolate에서만 가능했던 문제를 해결!
이제 백그라운드 Isolate에서도 네이티브 코드와 통신할 수 있다.

기존에는 네트워크 요청, 파일 IO 같은 무거운 작업을 Isolate에서 수행했지만,
플랫폼 채널은 사용할 수 없었다.
이제 백그라운드에서 네이티브 기능을 호출하는 것이 가능해졌다.

void backgroundTask() {
  const MethodChannel channel = MethodChannel('com.example.channel');
  channel.invokeMethod('backgroundTask');
}

 

관련 문서:

Writing custom platform-specific code

 

Background processes

Introducing background isolate channels

 

---

7. 텍스트 돋보기 (Text Magnifier) 지원

이제 iOS와 Android에서 텍스트 선택 시 돋보기 효과를 사용할 수 있다.

✅ 기본적으로 활성화되어 있음
✅ magnifierConfiguration 속성을 통해 설정 가능
✅ iOS 스타일의 확대 렌즈 구현 가능

TextField(
  magnifierConfiguration: TextMagnifierConfiguration(
    magnifierBuilder: (context, child) => CupertinoTextMagnifier(child: child),
  ),
);

 

 

---

마치며

이번 글에서는
✅ UI/UX 향상 (커스텀 컨텍스트 메뉴, iOS 스타일 리스트, 텍스트 돋보기)
✅ 스크롤 및 다국어 지원 툴 개선
✅ 백그라운드에서 플랫폼 채널 호출 지원
등의 기능을 살펴보았다.

다음 글에서는 Flutter 3.7의 메모리 최적화 및 추가적인 성능 개선 내용을 살펴볼 예정이다!