앱을 다운로드한 기기 OS에 맞는 스타일로 보여주는 방법

안녕하세요.

Flutter에는 다양한 플랫폼에 맞추어 자동으로 구현되는 일부 요소들이 있습니다. 해당 항목들에 대한 자세한 사항들은 공식 문서에서 확인하실 수 있습니다. 그 외에 기본적으로 플랫폼에 따라 다르게 구현되지 않는 요소들을 직접 구현하는 여러가지 방법이 있습니다.

1. Flutter의 Platform 클래스를 이용하여 모든 UI 요소를 플랫폼 별로 분리하여 구현한다.

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    if (Platform.isAndroid) {
      /// Android
      return const AndroidHome();
    } else {
      /// iOS
      return const IOSHome();
    }
  }
}

UI를 2벌 만드는 공수가 들어가므로, 유지보수 공수도 2배로 들어갑니다.
Android와 iOS UI가 완전히 달라 공통 요소가 없는 경우 사용하는 것을 권장합니다.

2. 기본적으로 Material 기반으로 구현하고, iOS에서만 다르게 보이는 일부 위젯들만 부분적으로 분리하기

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// 일부 요소만 플랫폼에 따라 분기
      body: Platform.isAndroid
          ? ElevatedButton(
              onPressed: () {},
              child: const Text("Android 버튼"),
            )
          : CupertinoButton(
              onPressed: () {},
              child: const Text("IOS 버튼"),
            ),
    );
  }
}

공통 요소들은 한 번만 사용되므로 보다 적은 유지보수 비용으로 서비스를 운영할 수 있습니다.

상황, 기획, 가진 자원에 따라 구현 방법이 다를 것 같습니다. 제 3의 선택지로 2번으로 시작하고, 플랫폼별 구현이 완전히 다른 화면에 대해서만 1번으로 구현하시는 방법도 있을 듯 합니다.

감사합니다 :)

인프런 커뮤니티 질문&답변