[Flutter] host platform 구별 (Web, Phone)

• 구현내용
• 구현방법

---

구현 내용

프로그램이 돌아가는 환경이 웹인지 폰인지 구별한다.

---

구현 방법 1번. (플랫폼 구별)

import 'package:flutter/foundation.dart' as IsWeb;

    if (IsWeb.kIsWeb) {
      // running on the web!
      print('web');
    } else {
      // NOT running on the web! You can check for additional platforms here.
      print('phone');
    }

구현 방법 2번. (화면 사이즈에 따라)

웹의 경우 다양한 사이즈로 변할 수 있기 때문에 웹의 사이즈가 모바일 수준으로 작아졌을 때 모바일 UI로 변경해야 할 때가 있다.

화면 크기에 따라서 알맞게 사이즈를 바꿔주는 함수를 만들었으며 해당 함수에 파라미터로 사이즈를 넘겨주면 된다.

 

화면 크기 조절 클래스, 플랫폼 구별 클래스

import 'package:flutter/material.dart';
import 'package:frontend/responsive.dart';

class SizeCalculate {
  // 웹 페이지의 경우 다양한 크기로 변경 가능하기 때문에 반응형으로 만들어 오류가 나지 않게 하기 위함입니다.
  double heightCalculate(screenSizeHeight, height) {
    var ratio = height / screenSizeHeight;

    return screenSizeHeight * ratio;
  }

  // 웹 페이지의 경우 다양한 크기로 변경 가능하기 때문에 반응형으로 만들어 오류가 나지 않게 하기 위함입니다.
  double widthCalculate(screenSizeWidth, width) {
    var ratio = width / screenSizeWidth;

    return screenSizeWidth * ratio;
  }
}


 class ClassificationPlatform {
  // criteriaSize : 분류 기준이 되는 사이즈
  
  classifyWithScreenSize({required context, criteriaSize = 900}) {
    final double screenWidthSize = MediaQuery.of(context).size.width;

    // 900보다 작을 경우에 Renderflex 발생
    if (screenWidthSize > criteriaSize) {
      return 2;
    } else {
      return 0;
    }
  }

  classifyWithDevice({required context,}) {
    if (Responsive.isMobile(context)) {
      return 0;
    } else if (Responsive.isTablet(context)) {
      return 1;
    } else {
      return 2;
    }
  }

}

사용법

1. 화면 사이즈에 맞게 모바일 또는 웹 UI 반영

 
  var platform;
  
  @override
  Widget build(BuildContext context) {

    if (_classificationPlatform.classifyWithScreenSize(context: context, criteriaSize: 900) == 0) {
      // mobile,tablet
      platform = 0;
    } else {
      // web
      platform = 2;
    }

    return platform == 0 ? mobileBody() : webBody();
  }

2. webBody()에서 화면 크기 조절

Container(
          width: _sizeCalculate.widthCalculate(screenSizeWidth, 260),
          height: _sizeCalculate.heightCalculate(screenSizeHeight, 260),
                ),