말랑말랑제리스타일

플러터 웹 여부 및 실행중인 플랫폼 구분해서 확인하기 본문

프로그래밍/플러터 앱개발

플러터 웹 여부 및 실행중인 플랫폼 구분해서 확인하기

제리제리 2023. 4. 25. 09:16

플러터의 최대 강점 중 하나가 바로 안드로이드, IOS 뿐만 아니라 크롬에서 실행할 수 있는 웹까지 하나의 코드로 한 번에 만들 수 있다는 멀티 플랫폼 언어라는 점인데요. 한 번에 만들 수 있다는 장점이 있지만 가끔은 지금 프로그램을 구동하고 있는 플랫폼이 안드로인지, IOS인지 아니면 웹인지 구분할 필요가 있습니다.

 

물론 플랫폼 별로 소스를 약간씩 수정해서 따로 배포를 해도 되긴 하지만 그렇게 하지 않아도 된다는 것도 플러터의 장점이라고 생각되는데요. 플랫폼 간의 소스 변경 없이 플러터 소스 내에서 현재 실행 중인 플랫폼이 웹인지 여부와 아닌 경우 안드로인지 아니면 IOS인지 확인하는 방법이 생각보다 간단하기 때문이죠.

 

플러터 실행중인 플랫폼이 웹인지 여부 확인하는 방법

반응형

일단 웹에서 구동중인지구동 중인지 앱으로 구동 중인지 확인하는 방법은 플러터의 Foundation 라이브러리를 사용하면 됩니다.

설명을 찾아보면 최하위 수준의 유틸리티 및 클래스 함수라고 되어있는데요. 구동 중인 플랫폼에 가장 가까이 접근할 수 있는 라이브러리라고 판단이 되네요.

플러터의 Foundation 라이브러리를 이용해서 웹 여부를 판단하는 방법은 간단합니다.

먼저 다트 파일 최상단의 import 부분에서 아래와 같이 foundation 라이브러리를 import 해줍니다.

import 'package:flutter/foundation.dart';

이렇게 foundation.dart 파일을 import 해주면 소스 내에서 kIsWeb이라는 bool 형 const 변수를 사용할 수 있게 됩니다.

참고로 두 번째 문자는 대문자로 k is web에서 띄어쓰기 다음 문자만 대문자로 생각하시면 됩니다.

간단한 예시로 아래와 같은 Text 위젯을 한번 소스에 넣어서 실행해 보면 실행한 플랫폼이 크롬과 같은 웹이라면 텍스트에 "W"가 표시될 거고 아니라면 "D"가 표시될 겁니다.

Text(kIsWeb ? "W" : "D",),

플러터 실행 중인 플랫폼 구분하는 방법

반응형

플러터 실행중인 플랫폼 구분하는 방법 이미지
플러터 실행중인 플랫폼 구분하는 방법

물론 웹으로 구동 중인지 앱으로 구동중인지 여부도 중요하지만 안드로이드와 IOS는 OS 자체가 다른 만큼 구동중인 플랫폼을 굳이 구분해줘야하는 상황도 있습니다. 이런 경우 구동중인 플랫폼이 안드로인지 IOS인지 구분해줘야 하는데요.

이것도 생각보다 간단합니다.

import 'dart:io';

먼저 dart:io를 import 해준 뒤 Platform이라는 클래스를 이용해 플랫폼을 확인할 수 있죠.

말로 쓰면 이해가 안 되니 상단에 웹 여부 판단하는 소스에 붙여서 웹이 아니라면 플랫폼이 안드로이드인지 IOS인지 구분해서 텍스트 위젯에 텍스트로 표시하는 소스를 작성해 보았습니다.

Text(kIsWeb ? "W" : (Platform.isAndroid ? 'A' : 'I'),),

보시면 되게 간단합니다. kIsWeb 변수를 이용해 구동 중인 방식이 웹인지 판별해서 웹이 맞으면 "W"를, 아니라면 Platform 클래스의 isAndroid라는 클래스변수를 이용해 안드로이드라면 "A"를 출력해 주고 그게 아니라면 "I"를 출력해 주는데요.

물론 안드로이드도 ios도 웹도 아닌 어떤 다른 플랫폼을 고려한다면 아래와 같이 확인할 수도 있겠죠.

Text(kIsWeb ? "W" : (Platform.isAndroid ? 'A' : (Platform.isIOS? 'I':'??')),),
반응형

소스 한 줄에서 삼항연산자만 가지고 바로바로 구동 중인 플랫폼을 확인할 수 있다는 건 제 생각에 플러터의 상당히 매력적인 부분이라는 생각이 드네요.

반응형
Comments