Flutter 튜토리얼 36편: 플랫폼별 자동 적응

요약#

핵심 요지#

문제 정의: 같은 Flutter 코드가 Android와 iOS에서 다르게 동작해야 할 때, 플랫폼별 코드를 일일이 작성하면 복잡해진다.
핵심 주장: Flutter는 OS 환경 동작(스크롤, 텍스트 편집)을 자동으로 적응하고, UI 컴포넌트는 adaptive()¹ 생성자로 플랫폼별 위젯을 선택할 수 있다.
주요 근거: iOS 사용자는 edge swipe로 뒤로 가기를, Android 사용자는 back 버튼을 기대한다. 스크롤 물리도 플랫폼마다 다르게 느껴져야 자연스럽다.
실무 기준: 네비게이션, 스크롤, 텍스트 입력은 Flutter가 자동 처리하고, Switch, Slider, AlertDialog 등은 .adaptive() 생성자를 사용한다.

문서가 설명하는 범위#

자동 적응되는 네비게이션 전환 애니메이션
플랫폼별 스크롤 물리와 오버스크롤 동작
텍스트 편집 시 플랫폼별 제스처 차이
.adaptive() 생성자를 제공하는 위젯 목록
앱 바와 하단 네비게이션 바 커스터마이징

읽는 시간: 15분 | 난이도: 중급

참고 자료#

Automatic platform adaptations - 플랫폼 자동 적응 가이드
Additional resources - 추가 학습 자료

문제 상황#

Flutter 앱을 만들었는데 Android에서는 자연스럽지만 iOS에서는 어색합니다. iOS 사용자가 화면 왼쪽 가장자리를 스와이프해도 뒤로 가기가 안 됩니다. 스크롤할 때 iOS 특유의 바운스 효과가 없어서 이상하게 느껴집니다.

1
// 커스텀 페이지 전환 - 플랫폼 특성 무시
2
Navigator.push(
3
  context,
4
  MaterialPageRoute(
5
    builder: (context) => DetailPage(),
6
  ),
7
);

문제는 다음과 같습니다.

네비게이션 전환 애니메이션이 플랫폼에 맞지 않다.
스크롤 물리가 iOS/Android 고유의 느낌을 주지 않는다.
텍스트 선택, 복사 등 편집 동작이 익숙하지 않다.
Switch, Slider 같은 컨트롤이 플랫폼 스타일과 다르다.

해결 방법#

Flutter는 두 가지 유형의 플랫폼 적응을 구분합니다.

OS 환경 동작: 스크롤, 텍스트 편집처럼 다르면 ‘잘못된’ 느낌을 주는 것 → 자동 적응
OEM SDK 컨벤션: AlertDialog, Switch처럼 플랫폼 관례를 따르는 것 → .adaptive() 생성자로 선택

챕터 1: 네비게이션 전환 애니메이션#

Why#

NOTE
Android와 iOS는 화면 전환 애니메이션이 다릅니다. Android는 startActivity()² 스타일로 아래에서 위로 올라오고, iOS는 오른쪽에서 왼쪽으로 슬라이드합니다.
사용자가 매일 사용하는 앱들과 동일한 전환 효과가 없으면 앱이 어색하게 느껴집니다.

What#

NOTE
Flutter의 Navigator.push()³는 플랫폼에 따라 다른 전환 애니메이션을 적용합니다.

플랫폼 기본 전환 fullscreenDialog 전환
Android 줌(Zoom) 효과 아래에서 위로
iOS 오른쪽에서 왼쪽 슬라이드 아래에서 위로 (Present)
iOS에서는 CupertinoNavigationBar⁴의 각 요소도 함께 애니메이션됩니다.

플랫폼	기본 전환	fullscreenDialog 전환
Android	줌(Zoom) 효과	아래에서 위로
iOS	오른쪽에서 왼쪽 슬라이드	아래에서 위로 (Present)

How#

TIP

기본 Navigator.push() 사용 - 자동 적응

1
class MyApp extends StatelessWidget {
2
  const MyApp({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return MaterialApp(
7
      home: const HomePage(),
8
    );
9
  }
10
}
11

12
class HomePage extends StatelessWidget {
13
  const HomePage({super.key});
14

15
  @override
16
  Widget build(BuildContext context) {
17
    return Scaffold(
18
      appBar: AppBar(title: const Text('Home')),
19
      body: Center(
20
        child: ElevatedButton(
21
          onPressed: () {
22
            // Flutter가 플랫폼에 맞는 전환 애니메이션 자동 적용
23
            Navigator.push(
24
              context,
25
              MaterialPageRoute(
26
                builder: (context) => const DetailPage(),
27
              ),
28
            );
29
          },
30
          child: const Text('Go to Detail'),
31
        ),
32
      ),
33
    );
34
  }
35
}

모달 스타일 전환 (아래에서 위로)

1
Navigator.push(
2
  context,
3
  MaterialPageRoute(
4
    // fullscreenDialog: true로 설정하면
5
    // 두 플랫폼 모두 아래에서 위로 올라오는 전환 사용
6
    fullscreenDialog: true,
7
    builder: (context) => const SettingsPage(),
8
  ),
9
);

Watch out#

WARNING
뒤로 가기 동작도 자동 적응됩니다

Android: 시스템 뒤로 가기 버튼이 Navigator.pop() 호출

iOS: 화면 왼쪽 가장자리 스와이프로 뒤로 가기

iOS edge swipe를 비활성화하려면 주의가 필요합니다.
1
// iOS에서 swipe back 비활성화가 필요한 경우
2
// (예: 결제 화면에서 실수로 뒤로 가기 방지)
3
MaterialPageRoute(
4
  builder: (context) => const PaymentPage(),
5
  // 전체 화면 Dialog는 기본적으로 swipe back 비활성화
6
  fullscreenDialog: true,
7
)

결론: Navigator.push()와 MaterialPageRoute를 사용하면 플랫폼별 전환 애니메이션이 자동으로 적용됩니다.

챕터 2: 스크롤 물리 적응#

Why#

NOTE
스크롤은 사용자가 가장 자주 하는 동작입니다. iOS와 Android는 스크롤 물리가 완전히 다르고, 사용자는 이 차이에 매우 민감합니다.

iOS: 관성이 크고, 속도가 천천히 올라가며, 느린 속도에서도 미끄러집니다.

Android: 정적 마찰이 크고, 빠르게 가속되며, 더 멀리 스크롤됩니다.

What#

NOTE
Flutter는 ScrollPhysics⁵를 플랫폼에 따라 자동으로 선택합니다.

동작 Android iOS
오버스크롤 Glow 효과 (Material 색상) 바운스 (당겨지는 느낌)
모멘텀 일정함 연속 플링 시 누적
상단 복귀 없음 상태 바 탭으로 맨 위 이동
ListView, SingleChildScrollView, CustomScrollView 모두 이 동작을 자동으로 따릅니다.

동작	Android	iOS
오버스크롤	Glow 효과 (Material 색상)	바운스 (당겨지는 느낌)
모멘텀	일정함	연속 플링 시 누적
상단 복귀	없음	상태 바 탭으로 맨 위 이동

How#

TIP

기본 스크롤 - 자동 적응

1
class AutoAdaptiveScroll extends StatelessWidget {
2
  const AutoAdaptiveScroll({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return ListView.builder(
7
      // physics 파라미터를 지정하지 않으면
8
      // 플랫폼에 맞는 ScrollPhysics가 자동 적용
9
      itemCount: 100,
10
      itemBuilder: (context, index) {
11
        return ListTile(title: Text('Item $index'));
12
      },
13
    );
14
  }
15
}

특정 플랫폼 물리 강제 적용

1
// iOS 스타일 바운스를 Android에서도 사용하고 싶은 경우
2
ListView.builder(
3
  physics: const BouncingScrollPhysics(),
4
  itemCount: 100,
5
  itemBuilder: (context, index) {
6
    return ListTile(title: Text('Item $index'));
7
  },
8
)
9

10
// Android 스타일 Clamp를 iOS에서도 사용하고 싶은 경우
11
ListView.builder(
12
  physics: const ClampingScrollPhysics(),
13
  itemCount: 100,
14
  itemBuilder: (context, index) {
15
    return ListTile(title: Text('Item $index'));
16
  },
17
)

Watch out#

WARNING

iOS 전용 기능: 상태 바 탭으로 맨 위 이동

이 기능은 PrimaryScrollController⁶에 연결된 스크롤러에서만 동작합니다.

1
// Scaffold의 body에 직접 넣은 ListView는 자동으로 동작
2
Scaffold(
3
  body: ListView.builder(...), // 상태 바 탭 지원
4
)
5

6
// 중첩된 ListView나 여러 스크롤러가 있으면 주의
7
Scaffold(
8
  body: Column(
9
    children: [
10
      Expanded(child: ListView.builder(...)), // primary: true 필요할 수 있음
11
    ],
12
  ),
13
)

결론: ListView와 스크롤 위젯은 플랫폼에 맞는 물리 효과를 자동으로 적용합니다.

챕터 3: 텍스트 편집 동작 적응#

Why#

NOTE
텍스트 편집은 플랫폼마다 제스처가 다릅니다. Android에서 길게 누르면 단어가 선택되지만, iOS에서 길게 누르면 커서가 이동합니다.
사용자는 이런 세부 동작에 익숙해져 있어서, 다르게 동작하면 불편함을 느낍니다.

What#

NOTE
Flutter의 TextField⁷와 CupertinoTextField⁸는 플랫폼별 텍스트 편집 동작을 자동으로 적용합니다.

제스처 Android iOS
탭 탭한 위치에 커서 가장 가까운 단어 경계에 커서
길게 누르기 단어 선택 + 툴바 커서 위치 지정 + 툴바
길게 누른 채 드래그 선택 영역 확장 커서 이동
더블 탭 단어 선택 단어 선택
키보드 커서 이동 스페이스바 스와이프 3D Touch 플로팅 커서
텍스트 선택 툴바도 플랫폼에 맞는 디자인이 표시됩니다.

제스처	Android	iOS
탭	탭한 위치에 커서	가장 가까운 단어 경계에 커서
길게 누르기	단어 선택 + 툴바	커서 위치 지정 + 툴바
길게 누른 채 드래그	선택 영역 확장	커서 이동
더블 탭	단어 선택	단어 선택
키보드 커서 이동	스페이스바 스와이프	3D Touch 플로팅 커서

How#

TIP

기본 TextField 사용 - 자동 적응

1
class AdaptiveTextField extends StatelessWidget {
2
  const AdaptiveTextField({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return const TextField(
7
      decoration: InputDecoration(
8
        border: OutlineInputBorder(),
9
        labelText: 'Enter text',
10
      ),
11
      // 텍스트 편집 제스처는 플랫폼에 맞게 자동 적응
12
    );
13
  }
14
}

맞춤법 검사도 자동 적응

1
TextField(
2
  // 맞춤법 검사 활성화 - 플랫폼별 맞춤법 검사 사용
3
  spellCheckConfiguration: SpellCheckConfiguration(),
4
  decoration: const InputDecoration(
5
    border: OutlineInputBorder(),
6
    labelText: 'Type with spell check',
7
  ),
8
)

결론: TextField는 탭, 길게 누르기, 드래그 등 모든 텍스트 편집 제스처를 플랫폼에 맞게 자동 적응합니다.

챕터 4: 타이포그래피와 아이콘 적응#

Why#

NOTE
Android는 Roboto 폰트를, iOS는 San Francisco 폰트를 사용합니다. 아이콘도 플랫폼마다 디자인 스타일이 다릅니다.
폰트와 아이콘이 플랫폼에 맞지 않으면 앱이 이질적으로 느껴집니다.

What#

NOTE
폰트 자동 적응

패키지 Android iOS
Material Roboto San Francisco
Cupertino (폴백 폰트) San Francisco
아이콘 자동 적응
Material 패키지의 일부 아이콘은 플랫폼에 따라 다른 디자인을 표시합니다.

아이콘 Android iOS
뒤로 가기 화살표 + 막대 단순 화살표(<)
더보기 세로 점 3개 가로 점 3개

패키지	Android	iOS
Material	Roboto	San Francisco
Cupertino	(폴백 폰트)	San Francisco

아이콘	Android	iOS
뒤로 가기	화살표 + 막대	단순 화살표(<)
더보기	세로 점 3개	가로 점 3개

How#

TIP

플랫폼 적응 아이콘 사용

1
AppBar(
2
  leading: IconButton(
3
    // 플랫폼에 맞는 뒤로 가기 아이콘 자동 선택
4
    icon: const Icon(Icons.arrow_back),
5
    onPressed: () => Navigator.pop(context),
6
  ),
7
  actions: [
8
    IconButton(
9
      // 플랫폼에 맞는 더보기 아이콘 자동 선택
10
      icon: const Icon(Icons.more_vert),
11
      onPressed: () {},
12
    ),
13
  ],
14
)

Icons.adaptive 사용하기

1
// 플랫폼 적응 아이콘 명시적 사용
2
Icon(Icons.adaptive.arrow_back)
3
Icon(Icons.adaptive.share)
4
Icon(Icons.adaptive.more)

Watch out#

WARNING
San Francisco 폰트 라이선스 제한
San Francisco 폰트는 iOS, macOS, tvOS에서만 사용 가능합니다. Android에서 Cupertino 테마를 사용하면 폴백 폰트가 적용됩니다.
1
// Android에서 Cupertino 테마 사용 시 주의
2
CupertinoApp(
3
  theme: const CupertinoThemeData(
4
    // Android에서는 San Francisco 대신 다른 폰트 사용됨
5
  ),
6
)

결론: Material 패키지는 폰트와 일부 아이콘을 플랫폼에 맞게 자동으로 선택합니다.

챕터 5: .adaptive() 생성자 위젯#

Why#

NOTE
Switch, Slider, AlertDialog 같은 컨트롤은 OS와 밀접하게 통합됩니다. 사용자는 이런 컨트롤을 보고 즉시 어떻게 사용하는지 인식합니다.
플랫폼 컨벤션을 따르면 사용자가 더 빠르게 적응할 수 있습니다.

What#

NOTE
Flutter는 .adaptive() 생성자를 제공하는 위젯이 있습니다. iOS에서는 Cupertino 버전으로, Android에서는 Material 버전으로 렌더링됩니다.

Material 위젯 Cupertino 위젯 적응 생성자
Switch CupertinoSwitch Switch.adaptive()
Slider CupertinoSlider Slider.adaptive()
CircularProgressIndicator CupertinoActivityIndicator CircularProgressIndicator.adaptive()
RefreshProgressIndicator CupertinoActivityIndicator RefreshIndicator.adaptive()
Checkbox CupertinoCheckbox Checkbox.adaptive()
Radio CupertinoRadio Radio.adaptive()
AlertDialog CupertinoAlertDialog AlertDialog.adaptive()

Material 위젯	Cupertino 위젯	적응 생성자
`Switch`	`CupertinoSwitch`	`Switch.adaptive()`
`Slider`	`CupertinoSlider`	`Slider.adaptive()`
`CircularProgressIndicator`	`CupertinoActivityIndicator`	`CircularProgressIndicator.adaptive()`
`RefreshProgressIndicator`	`CupertinoActivityIndicator`	`RefreshIndicator.adaptive()`
`Checkbox`	`CupertinoCheckbox`	`Checkbox.adaptive()`
`Radio`	`CupertinoRadio`	`Radio.adaptive()`
`AlertDialog`	`CupertinoAlertDialog`	`AlertDialog.adaptive()`

How#

TIP

Switch.adaptive() 사용

1
class AdaptiveSwitchDemo extends StatefulWidget {
2
  const AdaptiveSwitchDemo({super.key});
3

4
  @override
5
  State<AdaptiveSwitchDemo> createState() => _AdaptiveSwitchDemoState();
6
}
7

8
class _AdaptiveSwitchDemoState extends State<AdaptiveSwitchDemo> {
9
  bool _value = false;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return Switch.adaptive(
14
      // iOS에서는 CupertinoSwitch로,
15
      // Android에서는 Material Switch로 렌더링
16
      value: _value,
17
      onChanged: (value) => setState(() => _value = value),
18
    );
19
  }
20
}

AlertDialog.adaptive() 사용

1
void _showAdaptiveDialog(BuildContext context) {
2
  showDialog(
3
    context: context,
4
    builder: (context) => AlertDialog.adaptive(
5
      // iOS에서는 CupertinoAlertDialog 스타일,
6
      // Android에서는 Material AlertDialog 스타일
7
      title: const Text('Confirm'),
8
      content: const Text('Are you sure you want to proceed?'),
9
      actions: [
10
        TextButton(
11
          onPressed: () => Navigator.pop(context),
12
          child: const Text('Cancel'),
13
        ),
14
        TextButton(
15
          onPressed: () {
16
            Navigator.pop(context);
17
            // 확인 동작
18
          },
19
          child: const Text('OK'),
20
        ),
21
      ],
22
    ),
23
  );
24
}

CircularProgressIndicator.adaptive() 사용

1
class LoadingIndicator extends StatelessWidget {
2
  const LoadingIndicator({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return const Center(
7
      // iOS: 스피너 스타일
8
      // Android: 원형 진행 표시기
9
      child: CircularProgressIndicator.adaptive(),
10
    );
11
  }
12
}

결론: .adaptive() 생성자를 사용하면 플랫폼에 맞는 네이티브 스타일 컨트롤이 자동으로 선택됩니다.

챕터 6: 앱 바와 네비게이션 바 커스터마이징#

Why#

NOTE
앱 바는 자동 적응되지 않습니다. 하지만 iOS 사용자를 위해 Apple Human Interface Guidelines 스타일에 맞게 커스터마이징할 수 있습니다.
iOS에서 Material 앱 바가 어색하게 느껴질 수 있습니다.

What#

NOTE
Top App Bar 비교

속성 Material 3 iOS HIG
높이 64dp 44pt
그림자 스크롤 시 약간 거의 없음
타이틀 스타일 작음 크게 (Large Title)
Bottom Navigation Bar 비교

속성 Material 3 iOS Tab Bar
레이블 선택 시 표시 항상 표시
선택 표시 상단 인디케이터 색상 변경

속성	Material 3	iOS HIG
높이	64dp	44pt
그림자	스크롤 시 약간	거의 없음
타이틀 스타일	작음	크게 (Large Title)

속성	Material 3	iOS Tab Bar
레이블	선택 시 표시	항상 표시
선택 표시	상단 인디케이터	색상 변경

How#

TIP

iOS 스타일 앱 바 적용

1
import 'dart:io';
2
import 'package:flutter/cupertino.dart';
3
import 'package:flutter/material.dart';
4

5
class AdaptiveAppBar extends StatelessWidget {
6
  const AdaptiveAppBar({super.key});
7

8
  @override
9
  Widget build(BuildContext context) {
10
    // iOS 텍스트 테마 매핑
11
    final cupertinoTextTheme = TextTheme(
12
      headlineMedium: const CupertinoThemeData()
13
          .textTheme
14
          .navLargeTitleTextStyle
15
          .copyWith(letterSpacing: -1.5),
16
      titleLarge: const CupertinoThemeData()
17
          .textTheme
18
          .navTitleTextStyle,
19
    );
20

21
    return MaterialApp(
22
      theme: ThemeData(
23
        // iOS에서는 Cupertino 스타일 텍스트 테마 사용
24
        textTheme: Platform.isIOS ? cupertinoTextTheme : null,
25
      ),
26
      home: Scaffold(
27
        appBar: AppBar(
28
          title: const Text('Adaptive App'),
29
          // iOS 스타일 적용
30
          surfaceTintColor: Platform.isIOS ? Colors.transparent : null,
31
          shadowColor: Platform.isIOS
32
              ? CupertinoColors.darkBackgroundGray
33
              : null,
34
          scrolledUnderElevation: Platform.isIOS ? 0.1 : null,
35
          toolbarHeight: Platform.isIOS ? 44 : null,
36
        ),
37
        body: const Center(child: Text('Content')),
38
      ),
39
    );
40
  }
41
}

플랫폼별 하단 네비게이션 바

1
class AdaptiveBottomNav extends StatefulWidget {
2
  const AdaptiveBottomNav({super.key});
3

4
  @override
5
  State<AdaptiveBottomNav> createState() => _AdaptiveBottomNavState();
6
}
7

8
class _AdaptiveBottomNavState extends State<AdaptiveBottomNav> {
9
  int _currentIndex = 0;
10

11
  final Map<String, Icon> _navigationItems = {
12
    'Home': Platform.isIOS
13
        ? const Icon(CupertinoIcons.house_fill)
14
        : const Icon(Icons.home),
15
    'Search': Icon(Icons.adaptive.share),
16
  };
17

18
  @override
19
  Widget build(BuildContext context) {
20
    return Scaffold(
21
      body: const Center(child: Text('Content')),
22
      bottomNavigationBar: Platform.isIOS
23
          ? CupertinoTabBar(
24
              currentIndex: _currentIndex,
25
              onTap: (index) => setState(() => _currentIndex = index),
26
              items: _navigationItems.entries
27
                  .map((entry) => BottomNavigationBarItem(
28
                        icon: entry.value,
29
                        label: entry.key,
30
                      ))
31
                  .toList(),
32
            )
33
          : NavigationBar(
34
              selectedIndex: _currentIndex,
35
              onDestinationSelected: (index) =>
36
                  setState(() => _currentIndex = index),
37
              destinations: _navigationItems.entries
38
                  .map((entry) => NavigationDestination(
39
                        icon: entry.value,
40
                        label: entry.key,
41
                      ))
42
                  .toList(),
43
            ),
44
    );
45
  }
46
}

Watch out#

WARNING
앱 전체 일관성 유지
앱 바만 iOS 스타일로 바꾸면 다른 부분과 어울리지 않을 수 있습니다.
1
// 앱 전체적으로 일관된 스타일을 유지하세요
2
// 앱 바만 iOS 스타일이고 나머지가 Material이면 어색함
앱 바 스타일을 변경하려면 다른 UI 요소도 함께 조정하는 것을 고려하세요.

결론: 앱 바와 네비게이션 바는 Platform.isIOS 조건으로 플랫폼별 스타일을 적용할 수 있습니다.

챕터 7: 햅틱 피드백 적응#

Why#

NOTE
터치 피드백도 플랫폼마다 다릅니다. Android에서 텍스트를 길게 눌러 선택하면 진동이 울리지만, iOS에서는 그렇지 않습니다.

What#

NOTE
Flutter의 Material/Cupertino 패키지는 적절한 햅틱 피드백을 자동으로 트리거합니다.

상황 Android iOS
텍스트 길게 눌러 선택 진동 없음
피커 스크롤 없음 약한 충격

상황	Android	iOS
텍스트 길게 눌러 선택	진동	없음
피커 스크롤	없음	약한 충격

How#

TIP

커스텀 햅틱 피드백

1
import 'package:flutter/services.dart';
2

3
class HapticFeedbackDemo extends StatelessWidget {
4
  const HapticFeedbackDemo({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return ElevatedButton(
9
      onPressed: () {
10
        // 플랫폼에 맞는 햅틱 피드백 트리거
11
        HapticFeedback.mediumImpact();
12
      },
13
      child: const Text('Tap for haptic'),
14
    );
15
  }
16
}

결론: 햅틱 피드백은 Material/Cupertino 위젯에서 플랫폼에 맞게 자동으로 트리거됩니다.

한계#

자동 적응은 Android와 iOS에만 적용됩니다. 웹, 데스크톱에서는 별도 처리가 필요합니다.
.adaptive() 생성자는 모든 위젯에 제공되지 않습니다. 필요하면 Platform.isIOS 조건문을 사용하세요.
앱 전체의 디자인 일관성을 유지하면서 플랫폼 적응을 적용하는 것은 팀 간 합의가 필요합니다.

adaptive(적응형): 플랫폼에 따라 자동으로 다른 스타일이나 동작을 적용하는 것을 말한다. ↩
startActivity(): Android에서 새 Activity를 시작하는 메서드로, Flutter Navigator.push()의 Android 전환 애니메이션 기반이다. ↩
Navigator.push(): Flutter에서 새 화면을 스택에 추가하고 해당 화면으로 이동하는 메서드다. ↩
CupertinoNavigationBar: iOS 스타일 네비게이션 바를 구현하는 Flutter 위젯이다. ↩
ScrollPhysics: 스크롤 동작의 물리 효과(마찰, 바운스 등)를 정의하는 클래스다. ↩
PrimaryScrollController: Scaffold 내 기본 스크롤러를 관리하며, iOS 상태 바 탭 동작과 연결된다. ↩
TextField: Material Design 스타일의 텍스트 입력 위젯이다. ↩
CupertinoTextField: iOS 스타일의 텍스트 입력 위젯이다. ↩

Flutter 튜토리얼 36편: 플랫폼별 자동 적응

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

해결 방법#

챕터 1: 네비게이션 전환 애니메이션#

Why#

What#

How#

Watch out#

챕터 2: 스크롤 물리 적응#

Why#

What#

How#

Watch out#

챕터 3: 텍스트 편집 동작 적응#

Why#

What#

How#

챕터 4: 타이포그래피와 아이콘 적응#

Why#

What#

How#

Watch out#

챕터 5: .adaptive() 생성자 위젯#

Why#

What#

How#

챕터 6: 앱 바와 네비게이션 바 커스터마이징#

Why#

What#

How#

Watch out#

챕터 7: 햅틱 피드백 적응#

Why#

What#

How#

한계#

Footnotes#

공유

목차