고급

플랫폼 통합

지원 플랫폼, 네이티브 코드, 플랫폼 채널, 패키지와 플러그인을 이해합니다.

핵심 개념

플랫폼 통합 주요 항목

지원 플랫폼

Flutter는 모바일, 웹, 데스크톱 등 여러 플랫폼을 대상으로 빌드할 수 있습니다.

언제 쓰나: 플랫폼별 기능은 Android, iOS, Web, Windows, macOS, Linux 문서에서 따로 확인해야 합니다.

Flutter에서: 모든 기능이 모든 플랫폼에서 같은 방식으로 동작하지는 않으므로 capabilities와 정책을 점검합니다.

final platform = Theme.of(context).platform;
final label = platform == TargetPlatform.iOS
    ? 'iOS 스타일'
    : 'Material 스타일';

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '플랫폼별 UI',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('iOS 스타일')),
        Chip(label: Text('Android 스타일'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('실행 플랫폼에 맞춰 분기됩니다.')
      ],
    )
    ],
  ),
)

네이티브 연동

플랫폼별 API가 필요하면 platform-specific code 또는 plugin을 사용합니다.

언제 쓰나: MethodChannel은 Dart와 네이티브 코드 사이에 메시지를 주고받는 대표 방식입니다.

Flutter에서: 기존 앱에 Flutter 화면을 추가하는 add-to-app 시나리오도 별도로 살펴볼 수 있습니다.

final platform = Theme.of(context).platform;
final label = platform == TargetPlatform.iOS
    ? 'iOS 스타일'
    : 'Material 스타일';

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '플랫폼별 UI',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('iOS 스타일')),
        Chip(label: Text('Android 스타일'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('실행 플랫폼에 맞춰 분기됩니다.')
      ],
    )
    ],
  ),
)

확장 개념

플랫폼별 코드

Flutter만으로 접근할 수 없는 기능은 플랫폼별 코드나 플러그인으로 연결합니다.
MethodChannel은 Dart와 네이티브 코드 사이의 메시지 통로 역할을 합니다.
플랫폼별 권한, 빌드 설정, 생명주기 차이를 함께 고려해야 합니다.

코드

예제

if (Theme.of(context).platform == TargetPlatform.iOS) {
  // iOS 스타일 처리
}

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '플랫폼별 UI',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('iOS 스타일')),
        Chip(label: Text('Android 스타일'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('실행 플랫폼에 맞춰 분기됩니다.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

목표 플랫폼 확정플랫폼별 권한 확인플러그인 지원 플랫폼 점검

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Dart languageDart 문법 자체가 궁금할 때 함께 봅니다.