Flutter 플랫폼 구별하기 (안드로이드, IOS, Web) - Platform & kIsWeb

플러터의 가장 큰 장점은 원소스로 멀티 플랫폼을 구현 할 수 있다는 부분이다. 하지만 모바일에 최적화 되어 있다 보니 웹이나 윈도우를 구현 할 때는 살짝 화면 깨짐이나 늘어남 같은 부분은 어쩔 수 없는 부분이긴 한다. 

 

어플 개발을 하는 중 아이폰인지, 안드로이드인지 웹인지 구별 할 수 있는 패키지가 있어서 사용해 보려고 한다. 

 

 

[ Platform.isAndroid vs Platform.isIOS ]

우선, 안드로이드와 IOS 구별을 해보려고 한다. Platform class는 플러터에서 제공하는 것으로 아주 간단하게 구별 할 수 있게 구현 가능하다. 

if (Platform.isAndroid) {
   print("안드로이드 플랫폼");
} else if (Platform.isIOS) {
   print("IOS 플랫폼");
}

 

또한, Platform 클래스는 이 두개 외에 다양한 플랫폼 구현이 가능하다 

• static final bool isMacOS = (_operatingSystem == "macos");
• static final bool isWindows = (_operatingSystem == "windows");
• static final bool isLinux = (_operatingSystem == "linux");
• static final bool isFuchsia = (_operatingSystem == "fuchsia");

엇, 근데 웹이 없다.. 그렇다면 웹은 어떻게 구분해야 하는걸까? 

 

 

[ kIsWeb ]

kIsWeb는 Flutter 프레임워크에서 제공하는 상수 중 하나로, 현재 앱이 웹 플랫폼에서 실행 중인지 아닌지를 나타낸다. 이는 플랫폼에 따라 앱의 동작을 조정하는 데 사용될 수 있다. 이 상수는 dart:io 패키지에서 제공되는 Platform 클래스와 유사한 역할을 하지만 웹 플랫폼에서 실행 중인지 여부를 쉽게 확인할 수 있도록 특화되어 있다.

if(kIsWeb){
    isBigScreen = true;
  }

 

이렇게 웹이 실행 중인지 아닌 지를 판단하여 상수로 선언한 isBigScreen 에 값을 할당 해준다. 

이렇게 하면 나중에 코드를 구현 할때 아래와 같이 조건을 걸어서 확인하면 된다. 

 margin: isBigScreen? EdgeInsets.symmetric(horizontal: 50) : EdgeInsets.symmetric(horizontal: 5) ,

 

 

[main.dart]

 if(kIsWeb){
    isBigScreen = true;
  }
  else if(Platform.isAndroid || Platform.isIOS){
    isBigScreen = false;
  }
  else{
    isBigScreen = true;
  }