앱을 다운로드한 기기 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번으로 구현하시는 방법도 있을 듯 합니다.

감사합니다 :)