ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Flutter] host platform ๊ตฌ๋ณ„ (Web, Phone)
    Flutter ํ…Œํฌ 2022. 7. 26. 22:33
    • ๊ตฌํ˜„๋‚ด์šฉ
    • ๊ตฌํ˜„๋ฐฉ๋ฒ•

    ๊ตฌํ˜„ ๋‚ด์šฉ

    ํ”„๋กœ๊ทธ๋žจ์ด ๋Œ์•„๊ฐ€๋Š” ํ™˜๊ฒฝ์ด ์›น์ธ์ง€ ํฐ์ธ์ง€ ๊ตฌ๋ณ„ํ•œ๋‹ค.


    ๊ตฌํ˜„ ๋ฐฉ๋ฒ• 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),
                    ),

    ๋Œ“๊ธ€

Designed by Tistory.